10 jQuery Transition Effects: Moving Elements with Style

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 Brilliant techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website. 1. Learn how to create a menu that appears like a standard menu bar in it’s default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display. 2. Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. 3. A simple image slider using HTML/CSS/Javascript. 4. jQuery Quicksand Plugin With Quicksand you can reorder and filter items with a nice shuffling animation. 1. 5. jQuery Magic Line Sliding Style Navigation 6. 7. jDiv: A jQuery navigation menu alternative 8. 9. 10. Author: Noura Yehia

AutoSuggest: An AJAX auto-complete text field : CSS . XHTML . Javascript . DOM, Development : Brand Spanking New kk said Jeffrey Ropp said Nicely done. For some reason, my results dont appear within a scroll area? I copied most of your CSS and still can't get it to work. I've also found that my results aren't always qualified by the first character provided. Try an "S" first. Any thoughts would be appreciated! Thanks, Jeff Robert said Very interesting. peter said Hi, is it possible to submit the form after clicking on some of the results? Josh said I tried that, I can't seem to get it to respond right. in order for the dropdown to be clickable you must change the code above from: this.fld.addEventListener('blur',function () { pointer.clearSuggestions() },false); to this.fld.addEventListener('blur',function () { setTimeout(function () { pointer.clearSuggestions() }, 300) },false); I figured out how to make the autosuggest show on when focused and clear when the field loses focus. replace line 24: this.toID = setTimeout(function () { pointer.clearSuggestions() }, this.oP.timeout); with return element; } Enjoy

40 Useful jQuery Techniques and Plugins - Smashing Magazine Over the last year, Smashing Magazine has evolved. We’ve been publishing fewer lists and more in-depth articles about design and Web development. We have invited professionals and high-profile developers to write for us. We’ve tried our best to fuel the growing appetite of our readers for more advanced articles, but recently we’ve been receiving more requests for carefully selected, useful round-ups. In this post, we present 40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites. TipTip jQuery PluginTipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. Contextual Slideout Tips With jQuery and CSS31A set of contextual slideout tips with jQuery and CSS3, which are ideal for product pages and online tours. jQuery Slider plugin (Safari style) 3jQuery Slider is easy to use and multifunctional jQuery plugin. jQuery MegaMenu Plugin8 Forms Link Slideshows and Galleries Link

jQuery Before/After Plugin About a month ago I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Pretty slick no? Download Go to the Before/After download page What’s So Great About this Plugin? Slick effect, no Flash neededIt’s just 7K (4K compressed)Reusable on multiple containersDegradable. How to Use First, your before and after images must be the same size. All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers. That’s it! Options Enjoy! Demos Related

Tipped - The Javascript Tooltip Framework Tipped allows you to easily create beautiful tooltips using the jQuery Javascript library. Evolved from the popular Prototip library, Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips. Canvas graphics The entire skin of the tooltip, from shadow to loading icon, is drawn using Canvas. This means that tooltip styles can easily be changed without having to create any images. Canvas based tooltips also have the advantage that they look great in every browser, even in IE6! Javascript API With the powerful API provided by Tipped it's possible to quickly create and control tooltips customized to your site, all it takes is a few lines of Javascript. And more... Check out the demonstrations below or head over to the documentation to discover more awesome features.