27 New And Fresh jQuery Techniques

Simplest Spotlight Effect – jQuery

Time for some short roundup of the latest and freshest in jQuery. All the present jQuery techniques (tutorials, plugins, etc.) in this listing are released, developed or just updated during the period of April 1, 2010 until July 1, 2010. And it seems like the developers have been very active during this period – it was an unusual huge selection to choose from.

Cashrevelations.com presents a cool selection of new and fresh jQuery techniques – 25 interesting and screaming new jQuery techniques released or updated during the period of April 1, 2010 until July 1, 2010. And every single jQuery item is presented with demo.

You might also be interested of: 150 JavaScript Techniques

27 New jQuery Techniques – July 2010

1. Cufonized Fly-out Menu – jQuery And CSS3
In this tutorial you will learn how to create a full page cufonized menu – when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and slide out a description bar from the left side of the page.
View Demo

2. Content Feature Like MailChimp – jQuery
In this tutorial Ashley Ford on Papermashup will teach how to build an attractive full page content feature slider plugin (similar to the MailChimp slider) – by using the jQuery Cycle plugin which allows you to rotate, paginate or cycle a set of images.
View Demo

3. Vertical Scroll Menu – jQuery
In this tutorial with downloadable source code Kevin Liew will teach you how to create a vertical scroll menu. You will also use the jQuery.color plugin to animate the background color changes. The HTML is as simple as possible, and the jQuery and CSS do the rest.
View Demo

4. Scrollable Thumbs Menu – jQuery
In this tutorial with downloadable source code you will learn how to build a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of scrollable thumbs appear when hovering over a menu item.
View Demo

5. Real-Time Form Validation – jQuery
In this tutorial by Michal Kozak you will learn how to build a useful client side and real time form validation with the help of jQuery – you will write and build the simplest form ever possible, nice and clean, without any unnecessary tags.
View Demo

6. CSS3 Rounded Image With jQuery
In this tutorial by Nick La on WebDesignerWall you will learn how to make a stylish CSS3 rounded image with a jQuery work-around – and make the script to automatically wrap a span tag around with the original image as a background-image.
View Demo

7. Background Image Navigation – jQuery
In this tutorial we are going to create a beautiful navigation that has a background image slide effect – by using the Background-Position Animation Plugin. The main idea is to have three list items that contain the same background image but with a different position.
View Demo

8. Inline Modal Window – jQuery And CSS
In this tutorial Soh Tanaka will teach you how to build a simple and stylish inline Modal window with the help of some CSS and jQuery. According to the developer, this tutorial requires intermediate knowledge of CSS and jQuery.
View Demo

9. Photo Stack Gallery – jQuery And CSS3
This tutorial teaches how to create a gallery. The albums are showed as a slider, and when an album is chosen, the images of that album are showed as a photo stack. In photo stack view, browse through the images by putting the top images last in stack.
View Demo

10. Sleek Sliding Box Effect – jQuery
This pedagogic tutorial by Ryan Turki will teach you how to create some representative and nice sliding box effects with the help of a bit jQuery and some CSS. You can also download the source files.
View Demo

11. Elegant Accordion – jQuery And CSS3
This easy-to-follow tutorial teaches you how to create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks.
View Demo

12. BounceBox Notification Plugin With jQuery And CSS3
In this tutorial you will learn how to build a BounceBox notification plugin with some jQuery and CSS3. You can use this plugin to present notifications, or a registration form, newsletter signup or even some kind of advertisement as the content of the box div.
View Demo

13. Animated Table Sort – REGEXP Friendly
This plugin allows you to animatedly sort a table based on a particular column. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ASCII or numeric and ascending or descending.
View Demo

14. Rocking And Rolling Rounded Menu – jQuery
In this tutorial you will learn how to build a menu with little icons that will rotate when hovering – by using the rotating and scaling jQuery patch from Zachary Johnson. The different menu items will expand and reveal some menu content, like links or a search box.
View Demo

15. Sweet Pages – A jQuery Pagination Solution
In this tutorial you will learn how to build a jQuery plugin that will enable you to convert a regular unordered list of items into a SEO friendly set of easily navigatable pages. It can be used for comment threads, slideshows, or any kind of structured content.
View Demo

16. Tag Cloud Plugin – jQuery
This plugin will create an animated tag cloud out of the list of tags for your site. Includes font animation as well as tag animation in three ways (horizontal, vertical and random). The animation will stop when user mouse over, and restarts after mouse out.
View Demo

17. Latest Post Blogroll Slider – jQuery And PHP
In this tutorial you will learn how to create a blogroll slider that shows the latest post of your favorite blogs. You will be using some jQuery, PHP and XSL. The goal is to get a given RSS feed of a blog and parse the XML data with the help of PHP.
View Demo

18. Simple Banner Rotator
In this tutorial you are making a simple PHP, jQuery & MySQL banner rotator, with which you can create and randomly display banners on your site. Each of the banners features a neat jQuery animation effect, which you can customize to fit your own needs.
View Demo

19. Fancy Sliding Form – jQuery
In this easy-to-follow tutorial you will learn how to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show.
View Demo

20. Quick And Easy Font Resizer – jQuery
In this easy-to-follow tutorial you will learn how to build a JavaScript font resizer that allows you to resize some section of your text instead of everything. This tutorial focuses more on the JavaScript, so the HTML and CSS are really basic.
View Demo

21. Contextual Slideout Tips With jQuery And CSS3
In this tutorial you will learn how to build contextual slideouts with jQuery and CSS3. The slideouts are ideal for presenting only the highlights of a product, with the details neatly hidden away. You can easily incorporate images, videos, or other rich multimedia content.
View Demo

22. Smooth Vertical Or Horizontal Page Scrolling – jQuery
In this tutorial you will learn how to create a simple smooth scrolling effect with jQuery. You will create a horizontal and a vertical website layout to show the effect. You will be using the jQuery Easing Plugin and just a few lines of jQuery.
View Demo

23. Apple-Like Retina Effect With jQuery And CSS
In this tutorial Martin Angelov will teach you how to turn a static image into a functional image with “Retina effect” with only jQuery and CSS. The markup for the effect is quite straightforward – you need just a few divs and an image.
View Demo

24. Awesome Bubble Navigation – jQuery
In this tutorial you will learn how to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. You will use the jQuery Easing Plugin for a even nicer and improved effect.
View Demo

25. 5 Star Rating System – jQuery, AJAX And PHP
In this tutorial, you will learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we will also leverage the power of PHP so that you don’t need a database.
View Demo

26. Simplest Spotlight Effect – jQuery
This fairly simple tutorial by Kevin Liew on Queness will teach you how to build a cool and refreshing spotlight effect with caption – with the help of jQuery and some not at all so complicated CSS and HTML.
View Demo

27. End Of Page Slide Out Box – jQuery
In this tutorial you will learn how to create a box that slides out from the right when you are reading the last part of the article – the box shows another article from the same category. The idea is to have an element in the page that triggers the box to appear.
View Demo

The jQuery items are not in any particular order whatsoever. A jQuery item on place number 23 is not less valuable or useful in some way, than a jQuery technique on place number one – and we should show appreciation to all the developers for their efforts.