/* Begining of jQuery cookie part 1 */ /* End of jQuery cookie part 1 */

Srini's Blog

Tuesday, November 04, 2008

jQuery chess board

Inspired by the excellent jQuery table striping tutorial by Jack Born and the 8 queens puzzle, I have done a chess board with jQuery, html and css.
The basic logic was this:
Every ODD ROW will start with a white square followed by a black square, then a white square and so on.
Like so:
88

Likewise, each EVEN row will start with a black square and alternates with a white square.
Simply put,
ODD ROW + ODD ELEMENT = white
ODD ROW + EVEN ELEMENT = black
EVEN ROW + ODD ELEMENT = white
EVEN ROW + EVEN ELEMENT = black

All this, achieved with a little CSS

.white {
background-color: #FFCE9E;
width: 60px;
height: 60px;
}
.black {
background-color: #D18B47;
width: 60px;
height: 60px;
}


and FOUR LINES of jQuery!

$("#board tr:odd td:odd").addClass("white");
$("#board tr:odd td:even").addClass("black");
$("#board tr:even td:odd").addClass("white");
$("#board tr:even td:even").addClass("black");



Here it is -- my own jQuery chess board:)
abcdefgh
88
77
66
55
44
33
22
11
abcdefgh

Labels: , , , , , , , , , , , , ,

1 Comments:

  • could be even simpler. Default class should be black or white then you can half code :)

    nice post anyway! a little ajax chess head to head would be cool with jqueroid

    By Blogger LukeB, at 6:51 AM  

Post a Comment

<< Home