jQuery css()

Posted: September 3rd, 2010 | Author: Christopher Vigliotti | 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>

Regular Expressions, Reverend Jim Ignatowski and You

Posted: July 30th, 2010 | Author: Christopher Vigliotti | Filed under: Code Sample, Regular Expressions | 4 Comments »

Regular Expressions

I use regular expressions just often enough to have to totally re-learn them every time I need to use them. After a round of Google searches, reading over a few good regex sites (here’s one) and a bit of head scratching and code tinkering I end up with the code I need.

In this particular case I needed append a variable with punctuation in cases where the variable ended in an alphanumeric character. Regex to the rescue!

1
2
3
4
5
6
7

<cfset variables.question = "what does the yellow light mean" />
<cfif ReFindNoCase("[a-zA-Z0-9]$", variables.question )>
     <cfset variables.question = variables.question & "?" />
</cfif>
<cfoutput> 
     #variables.question #
</cfoutput>

Reverend Jim Ignatowski

This has nothing to do with regular expressions, but it’s a classic moment from Taxi.

You

The next time you need some regex help you may want to check out http://www.regular-expressions.info. If you have any good regex tips or sites leave them in the comments below. As usual, spammers will be shot on site.

I’m Just Sayin’: Firebug Break Points Are Cool

Posted: July 22nd, 2010 | Author: Christopher Vigliotti | Filed under: I'm Just Sayin' | No Comments »

http://getfirebug.com/doc/breakpoints/demo.html

Firefox Add-Ons

Posted: July 21st, 2010 | Author: Christopher Vigliotti | Filed under: Firefox | No Comments »

I’m into my first week at my new job and I’ve been spending some time getting my workstation setup.  This task includes getting Firefox installed and adding some key Add-Ons.  Here’s my list…

Hopefully you will find some of these helpful.  Have I missed anything cool?  Please post your favorites in the comments section.  Cheers!

UPDATE
August 2nd, 2010

Two Firefox Add-Ons that every web software developer should have are The Firefox Accessibility Extension and Total Validator

CFUnited

Posted: July 21st, 2010 | Author: Christopher Vigliotti | Filed under: ColdFusion | No Comments »

It’s hard to believe, but this year’s CFUnited will be the last. I had a chance to attend CFUnited a few years ago and found it to be fun and inspiring.

I urge my fellow ColdFusion developers to take advantage of CFUnited this year (while it’s..sniff…still here).  As always the speaker and topic lineup is top notch.

The Strategy Pattern

Posted: July 7th, 2010 | Author: Christopher Vigliotti | Filed under: Uncategorized | 2 Comments »

I’ve read and coded my way through the first chapter of Head First Design Patterns and enjoyed working with the MiniDuckSimulator sample. The author(s) make a good case for favoring composition over inheritance. I look forward to understanding this concept on a deeper, actionable level as I continue onto Chapter 2. I’ve included some (but not all) of my code from Chapter 1…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* 
MiniDuckSimulator.java
creates a new instance of MallardDuck and ModelDuck 
and demonstrates the different behaviors of each
*/
public class MiniDuckSimulator{
	public static void main(String[] args){
 
		System.out.println("-- new MallardDuck instance...");		
 
		Duck mallard = new MallardDuck();
		mallard.performQuack();
		mallard.performFly();
 
		System.out.println("-- new ModelDuck instance...");		
 
		Duck model = new ModelDuck();
		model.performFly();
 
		//		now he can fly!
		model.setFlyBehavior(new FlyRocketPowered());
		model.performFly();	
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

/* 
MallardDuck.java
a duck that has wings and can quack
*/
public class MallardDuck extends Duck{
 
	//	constructor
	public MallardDuck(){
		quackBehavior = new Quack();
		flyBehavior = new FlyWithWings();
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

/* 
ModelDuck.java
a duck that cannot fly
*/
public class ModelDuck extends Duck{
 
	//	constructor
	public ModelDuck(){
		flyBehavior = new FlyNoWay();
		quackBehavior = new Quack();
	}
}
1
2
3
4
5
6
7

/*
FlyBehavior.java
the interface!
*/
public interface FlyBehavior {
	public void fly();
}
1
2
3
4
5
6
7
8
9

/*
FlyNoWay.java
implements FlyBehavior
*/
public class FlyNoWay implements FlyBehavior{
	public void fly(){
		System.out.println("I can't fly :(");
	}
}
1
2
3
4
5
6
7
8
9

/*
FlyRocketPowered.java
implements FlyBehavior
*/
public class FlyRocketPowered implements FlyBehavior{
	public void fly(){
		System.out.println("I'm flying with a rocket");
	}
}

Diving Head First Into Head First Design Patterns

Posted: July 6th, 2010 | Author: Christopher Vigliotti | Filed under: Books, Design Patterns, O-O | 1 Comment »

Over the last few days I’ve been sinking my teeth into Head First Design Patterns. I’m really enjoying both learning about Design Patterns as well as slinging some Java code.

Goofing Around With jQuery

Posted: June 30th, 2010 | Author: Christopher Vigliotti | 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 :)

We Interrupt This Blog For A Rant About Revision Control

Posted: June 30th, 2010 | Author: Christopher Vigliotti | Filed under: Uncategorized | 4 Comments »

Throughout my career as a software developer I’ve worked at shops that use revision control software. I’ve worked with systems that implement file locking (Visual Source Safe) as well as systems that implement branching and merging (CVS and Subversion). In my view using any system is better than using none at all.

If your organization isn’t using some sort of system for managing / storing your code then you are working in a state of unnecessary risk. For example, if you are working on a shared development environment, and the server that your code resides on is only backed up every 24 hours, you are one failed hard drive away from losing one day’s worth of work. Now imagine that your server’s backup is corrupted and you are a few months into development you could be looking at losing several months worth of work.

CFDOCUMENTITEM, Why Hast Thou Forsaken Me

Posted: February 26th, 2010 | Author: Christopher Vigliotti | Filed under: Code Sample, ColdFusion | 2 Comments »

I’m working on generating PDF reports in ColdFusion 8 using the quick and easy cfdocument tag, and discovered that I cannot open and close tables using cfdocumentitem headers and footers. Here’s what I would have liked to do…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<cfdocument attributecollection="#cfdocAttributes#">
	<cfdocumentitem type="header">
		<table border="5">
		<tr>
			<th>ID</th>
			<th>Name</th>
		</tr>
	</cfdocumentitem>
	<cfdocumentitem type="footer">
		</table>
	</cfdocumentitem>
	<cfoutput query="qPeople">
		<tr>
			<td>#ID#</td>
			<td>#Name#</td>
		</tr>
	</cfoutput>
</cfdocument>

Apparently there is a work-around for this if one is using Open BlueDragon. If anyone out there has a ColdFusion 8 solution that they’d care to share I would appreciate it…and apparently so would fellow CF developer Renu Deshpande.

« Older Entries