There are a ton of jQuery selectors to get at just about any data imaginable on a page. Between actual selectors (such as ID and attribute selectors) and pseudo-selectors (such as :first and :checked), the bulk of HTML element selection is trivial. There are, however, a few selectors I’ve had a need for but aren’t in jQuery currently – for instance, there is a next adjacent selector, but there is no analogous ‘previous adjacent’ selector baked in. How does one get around this? Let’s find out, after the jump.
Tag Archives: jQuery
jQuery Image Overlay 1.3 Released
There have been a distinct lack of updates recently on FerretArmy.com – chock it up to having to do a lot of work-induced overtime over the past few months. Either way, in order to usher in some fresher content, I’ve updated my Image Overlay plugin to version 1.3. Changes are that you no longer need to specify image width and height, as well as being able to specify different animation speeds for the ‘in’ and ‘out’ animations. Hope you enjoy!
jQuery 1.4 Preview
I just found this preview of jQuery 1.4. I read some of this stuff at the jQuery site, but this is a nice explanation of the proposed functionality of the next major version of jQuery.
I think the new ‘live’ event handlers are going to be great. I can’t stress how much the ‘live’ method has helped my JavaScript development – it makes event binding much less of a chore when dynamically creating page content (especially for trivial things, like bindings for button hover behavior). One of the things I’ve disliked, though, is the change event of dropdowns isn’t able to be live captured, which has led me to use Live Query for those purposes. With 1.4, it can be done with jQuery alone.
It will certainly be interesting to see if the Lazy Load code is included, for on-the-fly .css and .js includes. By conditionally loading javascript and css, a lot of bandwidth could be conserved by choosing to defer file retrieval for little-used site features.
Some of the other cool new features will undoubtedly be radio classes and the offset get/set methods – I can see using those to save a few lines of code. I’m betting that there will also be some performance increases with 1.4, so I’m excited about the release, even if it’s release is still a few months off yet.
jQuery UI Image Carousel
I’ve just released my latest plugin, the jQuery UI Image Carousel! The plugin is a standard-fare image carousel, and it’s also fully compatible with jQuery UI. It’s got a few options that make it fairly versatile – from a minimal look all the way to a collapsible version with a custom header.
The JavaScript itself wasn’t that daunting – version 1.0 clocks in at around 180 lines. Most of it is presentation management as well – making sure that the correct jQuery UI classes are applied to the markup, and so forth. In total, it was a bit of a longer exercise – there was a lot of work to insure compatibility with older versions of IE, for instance. I hope you enjoy, and if you use it, please take a sec to leave a comment with your page URL.
Disabling Button Clicks The Better Way
Most of the time when you want to cancel an action on a web page, such as a button click, you’d return false in the client-side button event handler, as such:
<a href="blah..." onclick="return DoAction();">Link</a>
...
function DoAction() { /*Do Something */ return false; };
However, there’s a better way, using the event.preventDefault() method. I had the need to use this recently, when I was fixing a trivial issue with the Filament Group jQuery UI buttons – my ‘a href’ styled buttons were still clickable when they were disabled. An easy solution to this problem is to capture the click and prevent the default action. I hooked this action to all disabled buttons, as such.
$(".ui-state-disabled").click(function(event) { event.preventDefault(); });
This code isn’t that robust – if you were to add or remove the ui-state-disabled class after page load (which I didn’t have to), you’d want to make sure to handle it appropriately. Either way, preventDefault() is definitely an elegant solution to disabling a click action.
jQuery Image Overlay 1.2
I’ve updated my image overlay plugin yet again, to version 1.2. Again, it was a fairly minor enhancement – I added the ability to turn off the animation via an option. The translucent image overlay effect is popping up all over the web nowadays, and I want to make sure that my plugin implementation offers as much as any other technique to achieve the overlay effect.
In other development, I’ve been trying to learn how to implement iPhone style gesture controls via JavaScript. I’ve been seriously spinning my wheels on this – my demo is turning out to be a dud, of sorts. It’s frustrating (especially the testing, which I can only do on my iPhone currently), but hopefully it comes together sooner or later.
jQuery Image Overlay Plugin 1.1
A quick note – I’ve updated my jQuery Image Overlay Plugin to version 1.1. This version adds support for pinning the overlay so it is always viewable (not just when you mouse over the image). There were no other changes, so you should be able to upgrade without worry.
jQuery Image Overlay Plugin
I’ve created my first jQuery plugin this week – it’s an image overlay plugin (the static pic above doesn’t do the plugin justice, so click through to see it in action).
Creating a jQuery plugin isn’t that big a stretch for a competent JavaScript developer. There are quite a few tutorials out there where you can grab a template and start working very quickly. In addition to writing my plugin, I also made sure that it supported the metadata plugin, so that you can dynamically change properties on individual galleries and images, which should go a long way towards usefulness.
If you end up using this plugin, drop a line in the comments with a link so we can check out your work. Hope you enjoy!
Full Screen Canvas Particle Demo
I created a new version of my particle demo using the HTML5 <canvas>. This version is full screen, inspired by this amazing canvas demo at Iteration Six. I’d seen their demo prior to my starting to tinker with the canvas tag, but I never really tore it apart and looked inside. From what it appears, my code and their code were achieving a lot of the same things, so I decided to update mine to take advantage of some of the exciting features in their demo, including the full screen mode and the mouse interactions.
This demo uses a bit more jQuery than the previous one to handle mouse events. The canvas is much larger than the previous one, so I had to make some small changes to increase performance. Most notably, I had to halve the framerate – this demo runs at 10fps rather than 20. I sped up the particle speed so they cover distance quicker as well.
HTML5 Canvas Particle Example
Here’s a cool particle demonstration of the HTML5 <canvas> tag. It’s a tremendously small amount of JavaScript code that is responsible for pushing some radial gradient particles around a canvas. You can check out the source code to see how things are done – it uses jQuery a bit and the demo itself uses a free color picker control.
The demo works best in Firefox. Chrome has some ugly rendering artifacts when the gradients cross over one another and Safari can’t push a lot of particles on the screen without dying, but Firefox can render several hundred particles with ease (Internet Explorer doesn’t support <canvas> at all). If the computation for this demo were to be done on a GPU rather than a CPU, you’d probably be able to pump out thousands of particles with no issues.