Archive for jQuery
October 12, 2006 at 8:32 pm · Filed under jQuery, Javascript
Update 10/13/2006: Put in a flag to check when an image is being swapped so that the user clicks don't register until image has fully loaded. This fixed the fast-click / double-click issue (on both the thumbnails as well as the back/next links)
Also updated the mouse hover area for the thumbnail activation to be 25px from the top by default (used to be 50). This is ofcourse configurable. I will have full explanation on how to use the gallery soon.
Demo page has been updated. You may also grab a zipped up version of the whole project here: gallery.zip.
I'm been playing around with jQuery a lot lately. It's definitely not the holy grail of Javascript toolkits, but I like it. The community created plugins and the documentation are great.
Anyway, here is my second jQuery application/plugin. It's an image gallery with smooth transitions, thumbnails and pretty reflections. Of course, this is the first version (something like a beta) and definitely not ready for prime time. However, feel free to grab it and use it as you please. A link back would be appreciated.
Just so that I can display the gallery here, I've put it within an IFRAME. Visit the original page to view/grab the source.
note: the IFRAME is causing some weird effects on the mouseover on the image as the thumbnails are loading. This doesn't happen on the actual demo page.
September 26, 2006 at 5:46 pm · Filed under jQuery, Tutorials, Javascript
Update 10/17/2006: As requested, I've added two new arguments to the menu that will toggle the hide on page load (hideOnLoad) and also toggle the autohide (autoHide) when the mouse leaves the menu area. The 2nd argument is only useful when the triggerEvent is set to click or dblclick
Here is my first jQuery plugin. It is a very simple sliding menu using the effects provided by Interface (think Script.aculo.us for Prototype)
I really like jQuery. I also really like Prototype and Script.aculo.us. I've come to learn that each one has its strengths and weaknesses and you should decide which one to use based on your needs. I use them both, depending on the project at hand.
Here's an example of the menu in action (click menu label). This particular menu has the following options set: triggerEvent: 'click', hideOnLoad: false, autoHide: false
The defauly behavior of the menu is to hide after 1000ms (1 sec.) and to display when your mouse hovers over the "menu" label. The menu will also auto-hide after 1000ms when the mouse leaves the menu area. Most of these values, including the sliding effect, can be customized.
Visit this example page to view the source and see how to use the menu and customize it. I haven't provided alot of documentation on it, but the source code is pretty self explanatory.
source: rb_menu.js
January 20, 2006 at 12:50 pm · Filed under jQuery, Resources, Javascript
Javascript is becoming more and more important in today's web sites. With all the hype around web 2.0 (whatever that means), AJAX and Rich User Interfaces, developers will need better tools to work with Javascript. Here are two recent tools that I found to be extremely helpful:
jQuery
jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.
An example:
$("p.surprise").addClass("ohmy").show("slow");
The above code snippet looks for all paragraphs that have a class of 'surprise', adds the class 'ohmy' to them, then slowly reveals them.
FireBug Extension
FireBug is a new tool for Firefox that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter.
