jQuery css()

Posted: September 3rd, 2010 | Author: | Filed under: AJAX, JavaScript, jQuery | No Comments »

I am the process of migrating a code base from Prototype + old-school JS to jQuery (the new mayor of Awesome Town), and ran across some code that was replacing some (but not all) styles of an element. This led me to jQuery’s css() method, one of the many handy CSS-related features in jQuery.. As I often do when tinkering with a new language, library, framework or feature I like to whip up a code sample. With this example I was able to see that the css() method adds css to an element without replacing other css attributes. A working example can be found here.

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

<html>
<head>
	<title>styles</title>
	<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	function modColor(){
		jQuery("#awesometown").css
			({
				'color':'red'
			});
	}
	function modStyle(){
		jQuery("#awesometown").css
			({
				'text-decoration':'underline'
			});				
	}
	function modVis(){
		jQuery("#awesometown").css
			({
				'display':'none'
			});
	}
	function modSize(){
		jQuery("#awesometown").css
			({
				'color':'black',
				'text-decoration':'none',
				'display':''
			});
	}
	</script>
</head>
<body>
	<h1 id="awesometown">I Am An H1 Tag On A Page With No Meaningful Content</h1>
	<em>sung to the tune of "Horse With No Name"</em>
	<hr />
	<a href="javascript:modColor();">red,</a> 
	<a href="javascript:modStyle();">underlined,</a> 
	<a href="javascript:modVis();">gone,</a> 
	<a href="javascript:modSize();">reset</a>
</body>
</html>

UPDATE

Here is another code snippet. This replaces five lines of code with one.

1
2
3
4
5
6
7
8
9

// the old code
$('XYZ').select('table.thisIsAClassname').each( 
    function (e) {
        e.style.display = 'none';
    }
);
 
// the new code
jQuery(".thisIsAClassname").css("display", "none");

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 :)

Model-Glue, Oracle and YUI

Posted: November 30th, 2009 | Author: | Filed under: ColdFusion, Flash, Frameworks, JavaScript, Model-Glue, SQL | No Comments »

I’ve been immersed in a world filled with Model-Glue Framework, Oracle 10g and YUI since June and am loving every minute of it. One of my goals for 2010 is to dust off this blog and resume contributing to the developer community. See you next year!

CFTEXTAREA or FCKEditor?

Posted: May 15th, 2009 | Author: | Filed under: ColdFusion, JavaScript | 4 Comments »

If you want to add a rich text editor to your forms in ColdFusion 8 it’s as easy as CFTEXTAREA richtext=”true”…

Read the rest of this entry »