Blogs about javascript:

A New JavaScript Event?

10.8.2008

I was reading the errata for one of my technical books, and I was delighted to discover an error with the onclick() function that had been printed. onclick() is a JavaScript function that executes when a user clicks an element. Alas, the book called the function onlick(). Hee hee - I guess onlick is what happens when your cat licks the screen. I wonder if there is an accompanying onnom() function.

0 comment(s).

Permalink

jQuery - Vertical Show / Hide Issues.

9.16.2008

The only trouble at all that I've encountered with jQuery is that if you study the page carefully as the show/hide animation works, you'll notice a big jump near the end of the animation. This jumpiness when using the slideToggle() function said to only occur when the animating elements have margin or padding.

Phooey, I say! I really dislike having to add extra elements to work around this issue. In my example below, I haven't got any margin or padding on the dt element. There must be something else at work here, and it's driving me nuts.

0 comment(s).

Permalink

jQuery - Vertical Show / Hide.

9.9.2008

Here's a definition list. Click on one of the baked goods below to reveal the description:

Bat Cupcakes
These are a simple chocolate cupcake, with a dusting of powdered sugar for a topping. The bat and ghost shapes were made by placing paper cut-outs over the cupcake before dusting on the powdered sugar.
Jam Cookies
Start with a tube of premade sugar cookie dough. Press a cookie-sized amount into mini-muffin pans and then bake as directed. Dust the cookie cups with powdered sugar. Microwave some jam (raspberry and mint) and spoon it into the cookie cups. Melted some chocolate chips, scoop them into a platic baggie, cut off the corner of the baggie, and drizzle the chocolate on the cookies.
Chocolate Sprinkle Cupcakes
These are chocolate cupcakes, with a cream-cheese frosting, and fall harvest leaf sprinkles.

Again, this is pretty dary simple to set up. Here's the jQuery code:

$(document).ready(function(){ // Hide all dds $("dl.v_show_hide dd").hide(); // When a dt is clicked, $("dl.v_show_hide dt").click(function () { // Toggle the slideVisibility of the dd directly after the clicked dt $(this).next("dd").slideToggle("slow") // And hide any dds that are siblings of that "just shown" dd. .siblings("dd").slideUp("slow"); }); });

0 comment(s).

Permalink

jQuery - Tablesorter.

9.7.2008

Check out this table. If you've got JavaScript enabled, you'll see a highlighted row when you move your mouse over it. This is courtesy of jQuery. You'll also be able to sort the columns by clicking on a header, and the alternate row coloring will match the sorted row ordering. These additions come from a jQuery plugin, tablesorter.

Customer Date City Store ID Amount
ASH (A) 5/03/2006 Bellvue 16 508.51
BARBUR (B) 7/26/2004 Portland 13 8512.91
COUCH (C) 07/04/2006 Seattle 23 -4118.45
DIVISION (D) 07/11/2006 Tacoma 12 89.32
FLANDERS (NE) 09/22/2004 Centralia 24 480.41
HOLGATE (H) 12/2/2005 Bellvue 11 -56.15
BURNSIDE (B) 09/14/2004 Portland 17 600.64

Pay attention Hollywood folks - this method of table sorting is much better than previous implementations. The jQuery/tablesorter method resolves spacing issues, and has TONS of extra abilities. Check out my jQuery tablesorter article for a detailed discussion of the code.

0 comment(s).

Permalink

jQuery - Core Table Functionality.

8.31.2008

Check out this table. If you've got JavaScript enabled, you'll see alternating row colors and a highlight on the "hover row" - these are courtesy of jQuery.

Customer Date City Store ID Amount
ASH (A) 5/03/2006 Bellvue 16 508.51
BARBUR (B) 7/26/2004 Portland 13 8512.91
COUCH (C) 07/04/2006 Seattle 23 -4118.45
DIVISION (D) 07/11/2006 Tacoma 12 89.32
FLANDERS (NE) 09/22/2004 Centralia 24 480.41
HOLGATE (H) 12/2/2005 Bellvue 11 -56.15
BURNSIDE (B) 09/14/2004 Portland 17 600.64

This functionality is included in the core jQuery library. Check out my article for a detailed discussion.

0 comment(s).

Permalink

Remaining blogs about javascript: