Goofing Around With jQuery

Posted: June 30th, 2010 | Author: | Filed under: JavaScript, jQuery | No Comments »

I’ve been reading a lot about jQuery these days. First my friend and former associate Rick “American” Flagg suggested that I check it out, then I took notice of Ray Camden’s recent posts on jQuery. With the power of suggestion now firmly behind the wheel I headed over to the jQuery website, and worked through the first few tutorials.

Now I fancy myself a bit of a JavaScript hack, so after coding the examples in the first two lessons I began to tinker a bit. I ended up with the following fun and pointless bit of code…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<!--- what exactly is a "google a pis"? --->
<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
  type="text/javascript"></script>
 
<script type="text/javascript">
 
// old-school JS stuff
 
// declare your variables!
var columnIdsList = "";
var columnIds = new Array();
var beginRedraw = false;
var i = -1;
var theIntervalId = 0;
 
// redraw the table cells
function redrawStuff(){
 
	i = i + 1;
	theIntervalId = setInterval("hiThere()", 50);
	$("body").removeClass("whiteBkg");
	$("body").addClass("blackBkg");
 
}
 
function hiThere() {
 
	//
	//	alert(columnIds.length);
 
	if(i < columnIds.length){
		document.getElementById(columnIds[i]).className="blackTd";
		clearInterval(theIntervalId);
		redrawStuff();
	}else{
		clearInterval(theIntervalId);
		beginRedraw = false;
		columnIds = new Array();
		//	alert(columnIds.length);
		i = -1;
		$("body").removeClass("blackBkg");
		$("body").addClass("whiteBkg");
	}
 
}
 
// jQuery stuff
$(document).ready(function(){
 
	// when you hover over a TD
	$("td").hover(function() {
 
		columnIdsList = columnIds.toString();
 
		if(beginRedraw == false){
			if(columnIds.length > 15){
 
				beginRedraw = true;
				redrawStuff();
 
			}else{
				$(this).removeClass("blackTd");
				$(this).removeClass("orangeTd");
				$(this).addClass("whiteTd");
 
				// add the columnId to the array
				if(columnIdsList.search(this.id) == -1){
					columnIds.push(this.id);
 
				}
			}
		}
	},function(){
 
		if(beginRedraw == false){
		  $(this).removeClass("whiteTd");
		  $(this).addClass("orangeTd");
		}
	});
});
</script>
<style type="text/css">
	.blackBkg {
	  background-color: #000000;
	}
	.whiteBkg {
	  background-color: #FFFFFF;
	}
	.blackTd {
	  background-color: #000000;
	  height: 40px;
	  width: 40px;
	  text-align:center;
	}
	.whiteTd{
	  background-color: #FFFFFF;
	  height: 40px;
	  width: 40px;
	  text-align:center;
	}
	.orangeTd{
	  background-color: ORANGE;
	  height: 40px;
	  width: 40px;
	  text-align: center;
	}
</style>
<table>
<cfoutput>
	<cfloop from="1" to="6" index="variables.rowIndex" step="1">
		<tr>
		<cfloop from="1" to="6" index="variables.columnIndex" step="1">
			<td
			  class="blackTd"
			  id="r#variables.rowIndex#c#variables.columnIndex#"
			  >r#variables.rowIndex#c#variables.columnIndex#</td>
		</cfloop>
		</tr>
	</cfloop>
</cfoutput>
</table>

I look forward to continuing to use jQuery a bit more…perhaps to make something useful :)

Leave a Reply