jQuery – Manipulating Table Row Background Colors (Part 3)

A couple of days ago, we used jQuery to automatically highlight any table rows where the value of a specified <td> was less than $100.

Yesterday, we used a different method (traversing the DOM) to highlight any table rows where the value of the “Sale Price” was 50% or more off of the value of the “Regular Price”.

Today, we’re going to combine both into one application. Both of the original methods will work the same. The only thing we’re going to add is a clearRows() method, which will run before either of the two methods described above. This will remove the background color from all table rows, effectively “resetting” the table before either of the two highlight methods run.

Given the table below, allow the user to see which items are under $100, -or- which items are reduced by 50% or more.

Read More»

jQuery – Manipulating Table Row Background Colors (The Sequel)

Yesterday we looked at using jQuery to manipulate table row background colors based on a specific set of criteria. It was a relatively straightforward effort as we simply referenced a particular class name. However, sometimes we don’t have total control over the markup, and will need to rely on our ability to traverse the DOM.

Given the table below, allow the user to see which items are marked down by 50% or more.

<table id="inventoryTable" cellpadding="3" cellspacing="0">
<thead>
<tr>
	<td>Original Price</td>
	<td>Sale Price</td>
	<td>Description</td>
</tr>
</thead>
<tr>
	<td>100.00</td>
	<td>65.00</td>
	<td>Green widget (Yellow stripes)</td>
</tr>
<tr>
	<td>200.00</td>
	<td>110.00</td>
	<td>Lavender Widget (White dots)</td>
</tr>
<tr>
	<td>200.00</td>
	<td>74.00</td>
	<td>Red Widget (Solid)</td>
</tr>
</tbody>
</table>
Read More»

jQuery – Manipulating Table Row Background Colors

Given the table below, allow the user to see which items are under $100

<table id="inventoryTable" cellpadding="3" cellspacing="0">
<thead>
<tr>
	<td>Original Price</td>
	<td>Sale Price</td>
	<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
	<td class="originalPrice">100.00</td>
	<td class="salePrice">65.00</td>
	<td>Green widget (Yellow stripes)</td>
</tr>
<tr>
	<td class="originalPrice">200.00</td>
	<td class="salePrice">110.00</td>
	<td>Lavender Widget (White dots)</td>
</tr>
<tr>
	<td class="originalPrice">200.00</td>
	<td class="salePrice">74.00</td>
	<td>Red Widget (Solid)</td>
</tr>
</tbody>
</table>
Read More»

jQuery – Accessing Dynamic Elements

Given ‘n’ number of dynamically generated elements on a page, all starting with a particular string (e.g. “menu_1, menu_2, menu_3 … menu_n“), and without knowing how many there are, use jQuery to access these elements.

Read More»

jQuery – Accessing Checked Checkboxes

Assuming the markup below, determine which checkboxes are checked.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
</head>

<body>

<input type="checkbox" name="cb1" id="cb1" value="a" /> A<br />
<input type="checkbox" name="cb2" id="cb2" value="b" /> B<br />
<input type="checkbox" name="cb3" id="cb3" value="c" /> C<br />
<input type="checkbox" name="cb4" id="cb4" value="d" /> D<br />
<input type="checkbox" name="cb5" id="cb5" value="e" /> E<br />

<input type="button" id="myButton" value="Which are Checked?" />

</body>
</html>

Using “POJS” (plain old JavaScript), we’d do the following (after adding an onclick attribute to the button):

Read More»

jQuery – A Love Story

Over the past year or so, I’ve been endeavoring to learn jQuery. I put it off for a long time. I’ve always been a fan of JavaScript, and have been used to writing it for as long as I can remember. I couldn’t justify taking the time to learn a new way to do something that I already knew how to do.

But little by little and more and more I kept hearing people espouse the virtues of jQuery. I finally resigned myself to sit down and give it a fair shake.

At first, yes it was a little daunting. I think I was still subconsciously resisting this new way of doing things. But little by little I started to see the power of jQuery. It isn’t that it’s just a different way to do something that I already know how to do… but it’s a quicker and easier and more powerful way.

Read More»

Add Twitter to BlogCFC

Twitter LogoI’m pretty close to being done with my latest re-skinning effort of BlogCFC, and wanted to add a Twitter Pod to display my most recent tweet.

I’ve done some work recently with the Twitter API for blitztweets.com, so I didn’t think it would be too difficult of a task.

I added a method to blog.cfc, added an application variable with the last update date/time (so as to only update every ‘n’ minutes and avoid potentially hitting the rate limit), and then created the pod itself (aptly named twitter.cfm).

After reinitializing the blog, everything looked good. I waited a few minutes, made a new tweet, and reloaded the page. Unfortunately, it didn’t update.

Read More»

42 Different Kinds of Awesome – CrossSlide jQuery Plugin

Via Scott Pinkston on #coldfusion…

While I haven’t had the opportunity to dive as deeply into jQuery as I’d like, I’ve incorporated quite a few jQuery plugins into some recent projects, and have always been impressed with the quality of the output as well as the ease of implementation.

Last night Scott brought the CrossSlide jQuery plugin to my attention. I’m definitely in awe.

The plugin plays an image “slideshow” of sorts. It utilizes a fade transition effect, as well as a panning effect to create an overall effect that I’d only previously seen done via Flash. There are a few configuration options as well, including the option of not panning the image, and panning/zooming (what they refer to as the “Ken Burns effect”).

This is one of those plugins that, unfortunately, I really have no need for at the moment… but it’s slick enough that I’ve been wracking my little brain trying to figure out how I could force it into an upcoming project :)

Check it out!

Page 2 of 212
© Copyright Charlie Griefer