Blogs about jquery:
jQuery - Vertical Show / Hide Issues.
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.
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.
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.
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
jQuery - A Library.
I've been experimenting with jQuery, a JavaScript library, lately. And, with one exception, I've been quite impressed by it's elegance and simplicity.
It took me a while to come to terms with the concept that using any JavaScript library might be acceptable. Libraries and frameworks do have costs - there's the user downloaded file size, and your ability to grok the new system to consider. Writing the code from scratch so that I completely grokked it allowed me to polish, support and extend it. But certain web pages absolutely had to have that special bling-a-ding-ding. Coding many of those special effects (fading, animations, shrinking) is way beyond my skill level. Why not leverage existing technology that's been developed, vetted and browser tested by experts?
I investigated a couple of different JavaScript libraries before selecting jQuery as the one to learn. But jQuery provided a wealth of documentation, a variety of features, and suitable browser support. When I started working with jQuery, it was dead simple to learn. And I'm most impressed that jQuery can access any elements I can identify with CSS - this allows me to add JavaScript functionality in a non-obtrusive manner; generally without changing my markup at all.