jQuery Suckerfish Menu

Posted on by

I think we all have heard of or used Suckerfish CSS Menu’s before, written by Pattrick Griffiths and Dan Webb for A List Apart. If not, it’s a cool way to make drop down menu’s using standards based semantic HTML and CSS. Unfortunately, with IE still dominating the browser marketplace we still need a way to handle the hover state in IE. To do that we need a little bit of JavaScript to attach mouseover and mouseout events to HTML elements.

Myles Angell decided to rewrite Suckerfish’s JavaScript with jQuery. Myles uses jQuery’s Basic Effects to show and hide the submenus and jQuery’s BaseStyle Base module methods to highlight the current moused over menu item. Pretty slick.

Check out some of Myles other experiments with jQuery. For the jQuery beginner these are good examples to start out with. The treeview is another experiment that caught my eye.

3d Universe with jQuery

Posted on by

Universe Screenshot

Will Jessup has just release a great demo of what’s possible with jQuery (and Javascript in general): A 3d model of the universe. Try moving your mouse vertically around the screen to see the universe at different angles, horizontally to make it rotate faster. All the images are courtesy of NASA.

Will used a lot of techniques to really simulate the 3d experience correctly:

  • He adjusts the opacity and z-index of the images based upon the depth of the element.
  • The height and width are also adjusted dynamically – but are all laid out using fontSize and EMs, allowing you to also simulate depth-of-field with text (in addition to static images or elements).
  • The background moves based upon the speed, and direction, of rotation.

Also, take a look at his code for specific caching optimizations used (like saving a reference to a single jQuery object and calling it over and over, rather than re-querying on every rotation).

Be sure to digg this up as it’s a really great example of the power of jQuery.

Aptana IDE now includes jQuery

Posted on by

Aptana latest release of their Web 2.0 IDE software now includes the ability to import jQuery’s JavaScript library into a web project. The project sets itself up with an included sample page that was created by Cody Lindley that demonstrates how to use jQuery.

“You can now quickly access Code Assist on your favorite AJAX JavaScript libraries by creating an AJAX library project. Currently, Aptana supports creating projects based on the AFLAX, Dojo, JQuery, MochiKit, Prototype, Rico, script.aculo.us, and Yahoo UI libraries.” –Aptana Weblog

Aptana is a IDE for developing Web 2.0 web sites quickly and easily. The key is to see what you are doing as you do it in the preview pane. Aptana requires JRE v1.4.2 and can be installed on Windows, Mac and Linux. It is also available as a Eclipse plugin with other IDEs to come.

“Aptana is a robust Integrated Development Environment (IDE) designed specifically for web developers who use (X)HTML, CSS, and JavaScript. Aptana includes the following features:

  • Full Code Assist on all Core and DOM JavaScript functionality, as well as your own JavaScript functions
  • Code structure outliner for (X)HTML, CSS, and JavaScript (even all at the same time)
  • Errors and warnings across all 3 languages (code validation)
  • Ability to extend the IDE via JavaScript with new ‘Actions’ and new ‘Views’
  • Support for Mac (Universal Binary) and Windows with Linux coming soon
  • Free and open source ” — Aptana FAQ

John Resig has been working with Aptana to improve the jQuery docs such that they’ll work better with their autocomplete api, so look for that in the near future.

jQuery International

Posted on by

If there’s anything that’s apparent from watching the jQuery mailing list and jQuery-related blog posts on Technorati, it’s that there’s a huge international audience for the library.

As I’ve been working on the new version of the web site (to be released together with the upcoming version 1.0 of jQuery) I’ve had a number of offers from users to translate documentation and blog posts into their native language. I cannot express how pleased I am by this.

I have two questions for all the jQuery users out there: If you are fluent in language other than English, would you be willing to help translate alternate versions of blog posts or documentation? If you are, please respond to this post so that I can get a feel for everyone who is interested and what languages are represented.

Secondly, if you speak a language other than English (but may, or may not, be able to help translate), please let me know what language you would like to see the jQuery site in:

Which language should jQuery Documentation be in? (Besides English)


Thank you, everyone, for your input – it’s greatly appreciated.

(by the way, the Internationalization module for Drupal is very cool)

Dev Tip: Faster Selects w/Tag Name

Posted on by

jQuery provides an extremely versatile DOM query mechanism. If you’re wondering what’s happening under the covers, and if there are less- and more-performant ways to formulate your query . . . the answer is YES. In many cases you can help jQuery by specifying a tag name, i.e.:


is faster than:


. . . with the difference being that the query engine can narrow by tag name first. It’s smart like that.

So, you shoud be in the habit of specifying a tag name. The only exception: getting by ID. If you’re getting by ID, do not include a tag name, or anything else besides the ID selector.

Note that the second example here (with the class selector only) is perfectly valid, and if you need to query for multiple element types, by all means go ahead — jQuery will still return the correct results.

Technorati Using jQuery

Posted on by

Just today Technorati pushed a new redesign live. Amongst other changes, it now uses jQuery as its primary Javascript code base. This is huge news as another big web site chooses jQuery as their Javascript library of choice.

If I had to guess, as to why they chose it, I’d say that they appreciated the bandwidth savings that jQuery afforded them, while still providing a number of useful usability improvements. I’ll see if I can hunt down who was in charge of the Javascript for the redesign to get their actual thoughts.

jQuery plugin goodness

Posted on by

There is a lot of good plugin development going on for jQuery. Here are two which have come up on the list lately:

HighlightFade by Blair Mitchelmore is a very thorough jQuery implementation of the “yellow fade” technique. Options include the type of fade (linear, sinusoidal, exponential), the duration, and a function to call on completion. The plugin weighs in at 3.5K (uncompressed, so it could be made smaller), and should handle all your yellow-fading needs.

Tablesorter by Christian Bach is browser-side table sorter (click on a column heading to sort the table accordingly). It’s fast (in the demo, sorts 400 rows in about .3 seconds), and it auto-detects the column type to provide the appropriate kind of sorting. For example, it automatically recognizes date vs. text vs. URL contents, and sorts accordingly. For URLs, it disregards the http/https/ftp/file prefix for sorting purposes, which is more likely to give you the sort you actually want. You can also define your own auto-detects, which usually involves 5-10 lines of code. The plugin is about 10.5K uncompressed.

Did you know there are lots more jQuery plugins listed on the wiki at http://proj.jquery.com/plugins/? Note that the URL to the wiki will change when jQuery goes 1.0.

jQuery Color Picker

Posted on by

Steven Wittens of Drupal fame has released a nifty jQuery plugin of his own called Farbtastic. So what does it do, you ask?

Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.

With Farbtastic, a simple form input box turns into an auto-updated hex code whose background color changes accordingly with the clickable color wheel and block added by the 8kb Javascript file. Click the color, drag the chooser or enter in a hex code manually.

Just include the farbtastic.js file along with the farbtastic.css stylesheet and create a placeholder div along with a form element for the hex code like so:

    <input type="text" ... />
<div id="colorpicker"></div>

And then include the one line jQuery code:


That’s all there is to it! You should now have a color picker widget on your page.

To see a working demo as well as more in depth instructions on using the plugin, visit the Farbtastic page. Farbtastic is protected by the GPL.

Inline Editing with jQuery

Posted on by

We’ve all heard of in-line editing. Flickr uses it for many things such as changing the title or description of one of your pictures.

For those of you who dont know, in-line editing is when you can just click on text, and it becomes a text box which the user can then edit. When the user hits enter, the edited text is sent to a script, which can do some magic, like submitting the text to a database.

Now, thanks to Dylan Verheul, doing this with jQuery could never be easier. He has created a plugin called Editable, which makes it possible to create in-line editing fields with one simple line of code.

$(element).editable(url, options);

The source code, along with a (broken fixed) demo can be seen here. I have put together a simple working demo on my website, here.

Bloggers Wanted

Posted on by

On the road up to 1.0 there is one thing, that we’ve been lacking in, that we need more of: Lots of jQuery bloggers!

With my commitment to squishing bugs in the jQuery core, adding new features, writing documentation – I just don’t have time to keep the blog updated with all the hot new projects that are coming out.

So, here is what I’d like: I’d like to turn the jQuery blog into a group blog, discussing jQuery, Javascript, jQuery Plugins/Projects/Apps, AJAX – anything that relates back to jQuery or Javascript. The blog currently has around 800-900 readers – which is decent, considering that I haven’t put much time into it (It’s also ranked in the top 6000 on Technorati).

I see this as being a great opportunity for different members of the diverse jQuery audience to really come together – especially for those who don’t feel confident committing code changes.

Here are some of the ideas that I’ve come up with, for blogging “positions”:

  • jQuery on the Web (find people writing and building with jQuery,
    and talk about it)
  • jQuery on the List (collect and talk about all the projects and
    news that take place on the mailing list)
  • Weekly List Recap (Recap the important events/discussions of the
    mailing list every week)
  • jQuery News (Project Announcements, bug fixes, etc – this will
    probably be done by me)
  • jQuery Hacks (Cool things that you can do with jQuery – compare
    with other libraries)
  • Javascript News (Report on new techniques, libraries, hacks – whatever)
  • jQuery International (The jQuery user base is all over the globe –
    having articles/sections in other languages would be fantastic!)

If we can get even half of this up and running, we will definitely become a top blog for Javascript news – which would be good in so many ways.

If this project interests you, please reply to this post, or email me personally. I’d also like to see a sample of your code and/or writing (if I haven’t seen it already). If you have any ideas, feel free to bring them up, I’m all ears!