This is our jQuery roundup for September 2011 – This specific listing represents new jQuery techniques from mid July until now – and contains some useful and screaming fresh jQuery techniques, including a beautiful and amazing jQuery photo slider solution from WebDesignShock and a responsive image gallery tutorial by Mary Lou.

In our definition of jQuery techniques we include tutorials, plugins and similar – and in our definition of “new” we include released or updated during the actual period: and this particular time our actual period is between July 18 and September 28.

Cashrevelations.com presents a selection of new and useful jQuery techniques – 10 brand new jQuery techniques released or updated during the period of July 18 until September 28 this year. All these jQuery techniques are presented with demo.

10 New & Useful jQuery Techniques – September

1. Responsive Image Gallery with Thumbnail Carousel
In this tutorial you will learn how to create a responsive image gallery with a thumbnail carousel using Elastislide. The gallery will have a view switch that allows to view it with the thumbnail carousel or without.
View Demo

2. HTML5 File Uploads with jQuery
In this tutorial you will learn how to create a small web application called Upload Center, that will allow people to upload photos by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.
View Demo

3. Portfolio Image Navigation with jQuery
In this tutorial you will learn how to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal and vertical).
View Demo

4. Shuffle Letters Effect – jQuery Plugin
In this short tutorial you will learn how to create a jQuery plugin that will shuffle the text content of any DOM element – an interesting and stylish effect that can be used in headings, logos and slideshows.
View Demo

5. Display your Favorite Tweets – PHP & jQuery
In this pedagogical tutorial you will learn how to display your favorite tweets in a stylish CSS3 interface – with the help of jQuery and a PHP class that will fetch, cache, and display your favorite tweets.
View Demo

6. jQuery Menu Slider
In this tutorial you will learn how to create a jQuery menu slider similar to the one used in Design Chemical website mega menu navigation – The HTML is very simple. They have also a follow up article on how to add vertical animation to the slider menu.
View Demo

7. jQuery Tab Slideout Contact Form
This practical plugin allows you to easily add a sliding tab to your WebPlus project. The tab can contain just about anything. In our case we will include an iframe pointing to a generic web form.
View Demo

8. Amazing jQuery Photo Slider
In this tutorial you will learn how to create an amazing carousel vintage photo slider with PHP and jQuery – to be applied in different websites so you can showcase your work in a more original way. Source code can be downloaded.
View Demo

9. Image Zoom Tour with jQuery
In this tutorial you will learn how to create a little zoom tour script – Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view.
View Demo

10. Facebook Like jQuery Face Recognition
In this short tutorial you will learn how to detect faces in a specific photo, by using FaceDetection jQuery plugin which uses an algorithm by Liu Liu. The Source code can be downloaded from the site.
View Demo

The different jQuery items presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors.

This is an online set of user friendly tools for web developers. With this new free service you can minify and compress CSS and javascript and create Google xml sitemaps. The name of the service is Zbugs – Web developer’s toolkit, and it is still on Beta stage.

To use the service is very easy. Once you type or past your website URL inside the input field – you are provided with the download links for the compressed JS and CSS; additionally you are provided with JS and CSS that is Gzipped.

Similar Developer Tools

To give you something to compare with, we re-publish some earlier featured tools.

Javascript Compressor
This handy online tool, based on an algorithm by Dean Edwards, compresses and obfuscates Javascript code. Files are usually compressed between 50-70 percentage.

Packer – JavaScript Compressor
One of the most widely used tools to minify JavaScript code is Dean Edwards’ Packer. The packing algorithm is forgiving of all forms of JavaScript with one exception. You must correctly terminate all JavaScript statements with semi-colons.

JS Minifier
JS Minifier is a web based tool for shrinking by removing comments and unnecessary whitespace from your JavaScript code to make it as lightweight as possible.

CSS Compressor
According to the developer, this online Cascading Style Sheet compressor makes major changes to stylesheets and is still in development. This handy tool also offers quite many practical options and it is reasonably easy to use (even for a CSS newbie).

CSS Drive
Compress your Cascading Style Sheet to increase loading speed and save on bandwidth. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

Styleneat – CSS Organizer
This online tool organizes and standardizes your Cascading Style Sheet in a structure that makes it easier to define page areas and see how they relate to each other. There are some additional options like sorting CSS properties and selectors alphabetically etc.

The different online tools presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors.

• Visit Zbugs…

Image presentation is an essential part of web design. And there is a huge amount of different solutions to choose from – not least jQuery offers some beautiful and practical image slideshow and gallery solutions to enhance your website. In this article we are going to take a look at some of those jQuery solutions.

Cashrevelations.com presents a selection of 15 jQuery Image Slider & Gallery Solutions – 15 jQuery techniques to help you structuring and effectively enhance the essential image presentation on your site. All these jQuery solutions are presented with demo.

15 jQuery Image slider & Gallery Techniques

1. Fullscreen Slideshow with HTML5 Audio & jQuery
In this tutorial you will learn how to build a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.
View Demo

2. jquery.mb.bgndGallery – jQuery Plugin
With this jQuery plugin you can make suggestive slide show of images as background of your page; the images will adapt their size to the window size fitting always at the best. You can navigate the gallery with your keyboard or with a displayed control panel.
View Demo

3. Photobooth With PHP & jQuery & CSS3
In this pedagogic and fun tutorial by Martin Angelov, you will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.
View Demo

4. Animated JavaScript Slideshow
This dynamic JavaScript slideshow is feature packed and under 5KB. A few features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
View Demo

5. Supersized 3.1 jQuery Plugin
Supersized is a fullscreen background slideshow built using the jQuery library. Supersized just got rewritten from the ground up. It’s faster, with even more options, animations, and added Flickr support.
View Demo

6. Making A Flickr Powered Slideshow – jQuery
This tutorial shows you how to develop a jQuery plugin that will make it easy to create presentations from your Flickr photos – by using Flickr’s API and YQL to fetch the photos, after which it will create the markup of the slideshow and listen for events.
View Demo

7. Image Rotator With Description
Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch – with help of this tutorial by Soh Tanaka, jQuery and CSS.
View Demo

8. Image Wall With jQuery
The idea is to scatter thumbnails with different sizes on the page and make a ribbon with description slide in when we click – when clicking again on the thumbnail, the ribbon will close and open a large version of the image.
View Demo

9. BarackSlideshow
BarackSlideshow is a practical, very tiny and lightweight slideshow script, that takes the power of MorphList to easily enhance visualization and navigation of the images. With ‘transition’ option – slide or fade, or a function that returns any of those values.
View Demo

10. Sweet Thumbnails Preview Gallery – jQuery
In this nice tutorial you will learn how to create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer.
View Demo

11. Modern Gallery With Raphael & jQuery
In this simple tutorial by Marcin Dziewulski you will learn how to create a stylish and modern gallery with a very attention catching animation effect using the small Raphael library and also jQuery and some CSS.
View Demo

12. Sliding Boxes And Captions With JQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
View Demo

13. Hover Slide Effect with jQuery
In this tutorial you will learn how to create a neat hover and slide effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images.
View Demo

14. Animated Portfolio Gallery with jQuery
In this tutorial you will learn how to create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbs and a content area where we will display details about the item. The image can be enlarged by clicking, making it appear as an overlay.
View Demo

15. Fullscreen Gallery With Thumbnail Flip – jQuery
In this tutorial you create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to.
View Demo

The different jQuery items presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors.

This is our little jQuery roundup for July 2011 – This specific listing represents new jQuery techniques from late April until now – and contains some useful and screaming fresh jQuery techniques, including a beautiful and flexible gallery solution from Matteo Bicocchi and a fullscreen slideshow with HTML5 Audio & jQuery.

In our definition of jQuery techniques we include tutorials, plugins and similar – and in our definition of “new” we include released or updated during the actual period: and this particular time our actual period is between April 26 and July 19.

Cashrevelations.com presents a selection of new and useful jQuery techniques – 12 brand new jQuery techniques released or updated during the period of April 26 until July 19 this year. All these jQuery techniques are presented with demo.

12 New & Useful jQuery Techniques – July 2011

1. Fullscreen Slideshow with HTML5 Audio & jQuery
In this tutorial you will learn how to build a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.
View Demo

2. Floating Tweets – WordPress jQuery Plugin
This WordPress Floating Tweets plugin adds a floating, sticky tab containing a live twitter feed from any twitter account. The widget is easily set up via any widget panel and can handle multiple floating twitter feeds per page, each with a different twitter account.
View Demo

3. Page Loading Effects with jQuery
In this short and easy to follow tutorial you will learn how to implement a nice fade in page loading effect with the help of jQuery – you just paste a piece of script in the body and add your content in a div block with content hide.
View Demo

4. jquery.mb.bgndGallery – jQuery Plugin
With this jQuery plugin you can make suggestive slide show of images as background of your page; the images will adapt their size to the window size fitting always at the best. You can navigate the gallery with your keyboard or with a displayed control panel.
View Demo

5. Custom Button Icon & Data Icon – jQuery Mobile Icons
jQuery Mobile framework has built in icon sets needed for most mobile application. An icon can be added to a button by adding a data-icon attribute on the anchor specifying the icon to display.
View Demo

6. Supersized 3.1 jQuery Plugin
Supersized is a fullscreen background slideshow built using the jQuery library. Supersized just got rewritten from the ground up. It’s faster, with even more options, animations, and added Flickr support.
View Demo

7. Beautiful HTML5 Portfolio
In this tutorial you will learn how to build a beautiful, stylish HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is also fully customizable.
View Demo

8. jQuery News Scroller
In this tutorial you will learn how to build a practical news scroller with jQuery. When the user hovers over the jQuery Scroller, it will pause so they can read the abstract and click the link if they are interested.
View Demo

9. Animated Text and Icon Menu with jQuery
In this tutorial you will learn how to build a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.
View Demo

10. Social Stats, jQuery & API Goodness
In this tutorial you will learn how to build a simple tool to measure the success of your online campaign. This basic social statistics tool is built with the assistance of the APIs from Twitter, Facebook and last but not least, Vimeo.
View Demo

11. Facebook Wall – A jQuery Social Media Plugin
This Facebook Wall jQuery plugin allows you to display the Facebook wall of a user, a page or an app on your own website. The design of the wall derives from the Facebook design and can be easily customized with some CSS.
View Demo

12. Image Wall With jQuery
The idea is to scatter thumbnails with different sizes on the page and make a ribbon with description slide in when we click – when clicking again on the thumbnail, the ribbon will close and open a large version of the image.
View Demo

The different jQuery items presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors.

This is the jQuery roundup for April 2011 – the first JavaScript listing we have done since 200 AJAX & JavaScript Techniques in February. This specific listing represents new jQuery techniques from middle February until now – and contains fresh jQuery solutions, including a practical menu solution for WordPress and a fun but yet useful photobooth.

jQuery: The twelfth maintenance release for jQuery UI 1.8 is out. This update brings bug fixes for Autocomplete, Datepicker, Dialog, Progressbar, Resizable and more.

In our definition of jQuery techniques we include tutorials, plugins and similar – and in our definition of “new” we include released or updated during the actual period: and this time our actual period is between February 15 and April 26.

Cashrevelations.com presents a selection of new and useful jQuery techniques – 11 brand new jQuery techniques released or updated during the period of February 15 until April 26 this year (2011). All these jQuery techniques are presented with demo.

11 New & Useful jQuery Techniques – April 2011

1. Photobooth With PHP & jQuery & CSS3
In this pedagogic and fun tutorial by Martin Angelov, you will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.
View Demo

2. Moving Boxes Content With jQuery
This tutorial will teach you how to create a template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area.
View Demo

3. diagonalFade – jQuery Plugin
This is a jQuery plugin (by jonobr1) allowing you to easily specify direction, fade-in and fade-out, and a host of other options to a grouping of elements – great for inventory or anything with a large amount of items ordered in a grid.
View Demo

4. Constrained Stickies With jQuery
Siddharth shows you how to use the StickyFloat jQuery plugin (smart sticky floating box) to create a sticky menu for your website – it will follow and stay in focus as you scroll, but only within its parent. The source code can be downloaded.
View Demo

5. Better Check Boxes With jQuery & CSS
In this short tutorial, you will learn how to create a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.
View Demo

6. jQuery Animated Error Messages & Form Validation
This tutorial by Design Chemical shows you how to use jQuery animation to create more interesting and engaging form validation errors for a user registration form – and with an additional code snippet to check that the user’s password re-entry matches.
View Demo

7. Expanding Image Menu With jQuery
This tutorial will teach you how to create a stylish expanding image menu with jQuery and CSS. The main idea is to have some columns with black and white image slices that will make a content area slide out when we click on them.
View Demo

8. Making A Flickr Powered Slideshow – jQuery
This tutorial shows you how to develop a jQuery plugin that will make it easy to create presentations from your Flickr photos – by using Flickr’s API and YQL to fetch the photos, after which it will create the markup of the slideshow and listen for events.
View Demo

9. Custom Vertical Mega Menu For WordPress – jQuery
This tutorial by Design Chemical will teach you how to use the jQuery Vertical Mega Menu Plugin to build a customized WP menu – you will achieve that result by using the plugins built in CSS classes combined with the inherent WordPress menu classes.
View Demo

10. markItUp! Universal Markup jQuery Editor
This is a plugin built with jQuery and it allows you to turn any text area into a markup editor. HTML, Textile, Wiki Syntax, Markdown, BBcode or your own Markup system can easily be implemented. Version 1.1.10 – update on February 20 2011.
View Demo

11. Animated Content Menu With jQuery
This tutorial shows you how to create a slick animated content menu with jQuery and CSS for a restaurant theme or something similar – the menu items will be animated and when they are clicked, a content area with more information will appear.
View Demo

The different jQuery items presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors.

It is about time for our almost traditional early year huge AJAX and JavaScript roundup. The techniques represented in this list are jQuery, MooTools, Prototype, script.aculo.us and some others – but the most commonly represented is the popular jQuery library. And as usual we have tried hard to categorize them in an easy and practical searchable way.

This is an update of our last big roundup of JS techniques, 150 JavaScript Techniques, that we released in January last year, but with many replacements and also, of course, with new and fresh JavaScript techniques. We can conclude that JavaScript developers had a productive period during this last year. Especially the jQuery folks come up with some stunningly impressive results.

Wikipedia: Ajax is a group of interrelated web development methods used to create interactive web applications – they can retrieve data from the server asynchronously in the background without interfering with the behavior of the existing page.

Cashrevelations.com presents 200 impressive and useful AJAX and JavaScript techniques together with demos – for inspiration and also as a knowledge resource for JavaScript and AJAX newbies as well as advanced web developers.

LIST CONTENT

• Tabs & Accordion
• General Navigation
• Traditional Menus
• Forms And Auto-Complete
• Form Validation And Hints
• File Upload
• Tables
• Tool Tips & Boxes & Panels
• Calendars And Timelines
• Image Previewing And Galleries
• Slideshow
• Lightbox
• Image Effects
• Image Cropping
• Content Sliders
• Interactivity And Communication
• Maps & Searching
• Media Players
• Font And Text
• Miscellaneous

Since this is an update of an earlier listing, we tried to remove all obsolete techniques from the listing – but we would appreciate if you notify us if we by accident have missed to remove some duplicate, outdated or non working link.

Navigation

Tabs & Accordion

1. 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

2. Easy Accordion – jQuery Plugin
The Easy Accordion plugin by Andrea Cima Serniotti will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still. You can download the source files for this plugin.
View Demo

3. TN34 Timetabs – jQuery Plugin
This jQuery plugin by Mario Alves creates tab container that switches automatically every cycle (or interval) to next tab – the plugin is compatible with most modern browsers. The site is in German – you can also download the plugin from HERE.
View Demo

4. jQuery Smooth Tabs Plugin
jQuery Smooth Tabs is an easy to use plugin, which allows you to display your content with some nice effects, for better user experience. All you need is a single container for your desired tabs and content, some appropriate CSS and images.
View Demo

5. Sweet AJAX Tabs With jQuery 1.4 And CSS3
In this tutorial you will learn how to create a colorful AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery. The downloadable source code is easily modifiable and adding new tabs is as easy as adding new properties to the Tabs object.
View Demo

6. Fresh Content Accordion
A simple, yet very eye-catching and colorful accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects. This handy script delivered by Martin Angelov is both easily modifiable end embeddable.
View Demo

7. 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

8. Yetii – Yet (E)Another JavaScript Tab Interface
With lightweight, object-oriented code that degrades gracefully in browsers without JavaScript-support. You can have many independent tab interfaces on a page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation and more.
View Demo

9. Collapser – jQuery Plugin
JQuery Collapser is a very light-weight multi purpose collapser plugin made for expanding and collapsing elements, and it can collapse any element within a document. It can also create accordions and more by adding a single additional line.
View Demo

Top

General Navigation

10. Overlay Effect Menu with jQuery
In this easy to follow tutorial you will learn how to create a simple but yet practical menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand.
View Demo

11. Thumbnails Navigation Gallery – jQuery
In this tutorial you are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. The idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked.
View Demo

12. Halftone Navigation Menu – jQuery And CSS3
In this tutorial you will learn how to make a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
View Demo

13. One Page Navigation – jQuery Plugin
This is a practical navigation plugin by Trevor Davis that lets you scroll smoothly when the navigation is clicked – this plugin is built upon the jQuery ScrollTo plugin by Ariel Flesler. The plugin is also available on Github.
View Demo

14. 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

15. 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

16. Elastic Thumbnail Menu – jQuery And CSS
In this tutorial Sam Dunn on Build Internet will teach you how to make a good looking and elastic thumbnail menu. The menu magnifies menu items when they are hovered over and the different menu items expand upwards.
View Demo

17. 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

18. 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

19. Filterable Portfolio with jQuery
In this nice tutorial Trevor Davis will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery and some CSS – and how to use it for to build a stylish portfolio broken down into 5 categories.
View Demo

20. jQuery ListNav Plugin
This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable nav bar appears above the list, showing the user the letters from A and all the way to Z.
View Demo

21. Ext Accordion
The Accordion widget and its InfoPanel are components that use the Ext JS Library. It can be used for page navigation, tool windows, hide-able details, log-in forms, options dialogs, sticky notes and more.
View Demo

22. Apple Style Menu Improved With jQuery
How to create a similar main navigation like the one of kriesi.at – a so called kwicks menu. Build an Apple-flavored Leopard-text-indent style menu from scratch in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
View Demo

23. Morph Effect On Mouseenter And Mouseleave With Mootools
In this tutorial, you will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools – and turn it into something fun to click.
View Demo

24. jPaginate – Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo

25. Thumbnail Hover Effect Using Mootools
Image is splitting in the middle using two instances of the same image. One instance goes toward left while second image goes right, in effect giving a beautiful illusion that image is gracefully splitting in the middle.
View Demo

26. 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

27. Outside The Box – Navigation
Just about every website uses the regular navigation concepts we’re all used to. After a while this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
View Demo

28. Powerful Product Highlighter With MooTools
This tutorial will help you to create a flexible tool for highlighting your sites products or services using the MooTools JavaScript framework – a clever rollover mechanism that works well as a product highlighter.
View Demo

29. 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

30. Scrolling To The Top And Bottom – jQuery
Scroll to the Top and Bottom of your website with a simple click with the help of the jQuery powered Special Scroll Events by James Padolsey, and some few extra lines of jQuery – appearing like two buttons with fixed position on the bottom left of the page.
View Demo

31. jQuery Panel Magic – Panel Layout For Small Websites
jQuery Panel Magic plugin is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. The plugin provides you with a unique way to “panelize” a website.
View Demo

Top

Traditional Menus

32. Slide Down Box Menu – jQuery & CSS3
In this tutorial you will learn how to create a cool and unique sliding box navigation (with submenu box with further links). The main idea is to make a box with the menu item slide out, while a thumbnail pops up in the top of the menu.
View Demo

33. 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

34. Apple-Style Icon Slide Out Navigation – CSS And jQuery
In this tutorial you will learn how to create an Apple-style navigation menu with a twist – it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element.
View Demo

35. Lava-Lamp Style Navigation Menu – jQuery
In this logically done tutorial Jeffrey Way of Nettuts+ will teach you how to build a neat looking lava-lamp style navigation menu for your site using jQuery and CSS. As usual you can download the complete source files.
View Demo

36. Mega Drop Down Menus – CSS And jQuery
In this tutorial Soh Tanaka will teach you how to make an awesome and also highly useful Mega Drop Down Menu with the help of some CSS, jQuery and the Hover Intent jQuery plugin by Brian Cherne from Cherne.net.
View Demo

37. Awesomeness-Filled Navigation Menu
In this tutorial you will learn how to create a navigation menu inspired by Dragon Interactive. CSS sprites can dramatically increase a websites performance and with jQuery you will implement awesome transition effects easily.
View Demo

38. Bottom Slide Out Menu With jQuery
In this tutorial we will create a bottom slide out menu. This large menu will contain some title and a description of the menu item. You use some CSS3 properties for some shadow effects and jQuery for the interaction. The source files are available for download.
View Demo

39. jQuery Context Menu Plug-In
A context menu plugin for jQuery that features easy implementation, keyboard shortcuts, CSS styling, and control methods. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.
View Demo

40. Grungy Random Rotation Menu With jQuery And CSS3
In this tutorial we are going to create a nice menu with each item positioned differently and with some content area that slides out. The menu items are going to have a random rotation using the CSS3 property “transform”. The source files are available for download.
View Demo

41. Smooth Animated Menu With jQuery
In this relatively easy to follow tutorial Zach Dunn will teach you how to build a nice jQuery menu with a smooth transition animation effect. The menu has such a smooth animation because of a thing called “easing”.
View Demo

42. Fading Menu – Replacing Content
When a menu item is selected, its graphic is shown at full opacity and its corresponding content area is also shown, while the other menu items are faded and their content areas discretely hidden. Tutorial by Chris Coyier.
View Demo

43. Fixed Fade Out Menu
This tutorial has the aim to teach you to build a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.
View Demo

44. A Different Top Navigation
In this easy to follow tutorial by Connor Zwick you will use jQuery to create a stylish and refreshingly different multi-layered horizontal navigation system that is still intuitive and easy enough for anyone to use for the first time.
View Demo

45. Image Menu
A horizontal menu that reveals more of the image as you rollover it. Features 2 optional onClick events (open and close), href passed to onClick events, stays open when clicked, closes when clicked and selects item to pre-open.
View Demo

46. Proto.Menu – Prototype Based Context Menu
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page. Plays nice with JS turned off and menu styling can be easily defined in external stylesheet.
View Demo

Top

Forms And Tables

Forms And Auto-Complete

47. Animated Form Switching – jQuery
In this easy-to-follow tutorial you will learn how to create a simple and stylish animated form switch with three very common forms. The main idea is not to leave the page when changing to another form, and make the new form appear within the same container.
View Demo

48. Cross-Browser HTML5 Forms
In this pedagogical tutorial, you are going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.
View Demo

49. 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

50. Changing Form Input Styles On Focus With jQuery
This short tutorial by Sam Dunn will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery and some CSS.
View Demo

51. FancyForm
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.
View Demo

52. Incredible Login Form With jQuery
Easily makes your content accessible on every page and keeps it discretely hidden until it is needed – by making a top panel that when clicked, will reveal itself and its content. This is yet another tutorial for Nettuts by Connor Zwick
View Demo

53. Quick Feedback Form – jQuery & PHP
In this tutorial by Martin Angelov you will learn how to create a solution for receiving quick feedback from your users – powered by jQuery, PHP and the PHPMailer class, this stylish form sends the users suggestions directly to your mailbox.
View Demo

Top

Form Validation And Hints

54. 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

55. Custom Form Elements
This CFE script enhances form elements including radio buttons, checkboxes, file upload, textfield, textarea, images and the select and more. The intention is to create the one Javascript form replacement script, which may be used with mootools as well as jQuery.
View Demo

Top

File Upload

56. FancyUpload – Swiff Meets Ajax
FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup and styleable via CSS and XHTML and uses MooTools to work in all modern browsers.
View Demo

57. Uploadify – JQuery File Upload Plugin Script
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
View Demo

Top

Tables

58. 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

59. Clickable Table Row
If an HTML table row contains only one <a> link, it can be useful to make the entire row clickable and make it activate that link. This tutorial shows how to make the entire row clickable so that clicking anywhere in the row is the same as clicking that link.
View Demo

60. TinyTable JavaScript Table Sorter
Easy to use JavaScript table-sorting script. Features column highlighting, optional pagination, support for links, date/link parsing, alternate row highlighting, header class toggling, auto data type recognition and selective column sorting.
View Demo

61. JavaScript Tabifier
Automatically creates an HTML tab interface using plug-and-play JavaScript. Does not require you to set up a list of links, or anchors for the tabs, and you can use CSS to customize the appearance of the tabs.
View Demo

62. TableGear
TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.
View Demo

Top

Tool Tips & Boxes & Panels

63. Pull Out Content Panel with jQuery
In this tutorial you will create a content panel that slides out at a predefined scrolling position. It will reveal a teaser with related content and it can be expanded to full page size to show more. A custom slider allows to scroll through items in the panel.
View Demo

64. jQuery Confirm Dialog Replacement
In this tutorial by Martin Angelov you will learn how to create a stylish cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.
View Demo

65. Simple Tooltip – jQuery & CSS
In this tutorial by Soh Tanaka you will learn how to create simple tooltip with jQuery and an incredibly simple styling with CSS. The only known issue with this tooltip is if the tooltip is wrapped in a container which has a relative position, the tooltip will be off.
View Demo

66. 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

67. Annotation Overlay Effect with jQuery
In this tutorial you will learn how to create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio. Just like with all the other Tympanus tutorials we present, also this tutorials source files can be downloaded.
View Demo

68. Colortip Tooltip Plugin – jQuery
In this tutorial you will learn how to write a simple jQuery tooltip plugin. The plugin is going to convert the title attributes of elements withing your web page, into a series of colorful and stylish tooltips. Six different color themes are available.
View Demo

69. 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

70. qTip – The jQuery Tooltip Plugin
qTip is an advanced tooltip plugin for the jQuery JavaScript framework. Built from the ground up to be user friendly, feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips.
View Demo

71. 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

72. MooTooltips – JavaScript Tooltips With MooTools
MooTooltips can display tooltip messages from HTML elements, Ajax calls or text added manually. Tooltip parameters can be passed either when instantiating the class or on the rel element parameter.
View Demo

73. 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

74. Coda Popup Bubbles
In this tutorial you will learn how to create Coda’s ‘puff’ pop-up bubbles, shown when you mouse over a downloadable image. This effect can be perfected by changing the initial reset code to read from the trigger element and approximate it’s position.
View Demo

75. 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

76. Prototip 2
Prototip allows you to easily create both simple and complex tooltips using the Prototype JavaScript framework. You can easily customize it, control the tool tip position and get configurable rounded corners (with no PNG images required).
View Demo

77. Better Tooltip With JQuery
Browsers will automatically display a tooltip when you provide a title attribute. In this tutorial Jon Cazier is going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.
View Demo

78. MoreCSS
An easy to use, lightweight and fast JavaScript toolkit/library with CSS syntax for common things. With only 8 KB and it’s CSS like syntax MoreCSS is perfect for all the daily JavaScript things: popups, tabs, tooltips and more.
View Demo

79. Facebook-Style Modal Box Using MooTools
Facebook’s Modal box is one the best modal box around. It’s lightweight, subtle, and very stylish. David Walsh has taken Facebook’s imagery and CSS and combined it with MooTools awesome functionality to duplicate the effect.
View Demo

80. SlideNote – jQuery Plugin For Sliding Notifications
SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. SlideNote offers a set of five options that allow you to modify the behavior and content of the script.
View Demo

81. Snippet – jQuery Syntax Highlighter
Snippet is a cool jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet jQuery plugin provides a quick and easy way of highlighting source code passages in HTML documents.
View Demo

82. Step By Step – Show And Explain Visitors What Your Page Has For Them
You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.
View Demo

Top

Calendars And Timelines

83. Advanced Event Timeline
In this tutorial you will learn how to make an Advanced Event Timeline with the help of PHP, MySQL, CSS and jQuery, that will display a pretty time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.
View Demo

84. FullCalendar – jQuery Plugin
FullCalendar is a jQuery plugin that provides a full-sized drag and drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).
View Demo

85. Unobtrusive Date-Picker Widget
This unobtrusive datePicker (calendar), which is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/XHTML+XML.
View Demo

86. JQuery Interactive Date Range Picker With Shortcuts
Date Range Picker plugin uses jQuery UI 1.7 and the new jQuery UI CSS Framework. This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges.
View Demo

87. Calendar – A JavaScript Class For Mootools
Calendar is a JavaScript class that adds accessible and unobtrusive date-pickers to your form elements. Features highly configurable inputs and selects, multi-calendar support, variable navigation options and multi-lingual and fancy date formatting.
View Demo

88. Scrollable Timelines
Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.
View Demo

Top

Image Handling And Sliders

Image Previewing And Galleries

89. Sweet Thumbnails Preview Gallery – jQuery
In this nice tutorial you will learn how to create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer.
View Demo

90. Modern Gallery With Raphael & jQuery
In this simple tutorial by Marcin Dziewulski you will learn how to create a stylish and modern gallery with a very attention catching animation effect using the small Raphael library and also jQuery and some CSS.
View Demo

91. Animated Portfolio Gallery with jQuery
In this tutorial you will learn how to create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbs and a content area where we will display details about the item. The image can be enlarged by clicking, making it appear as an overlay.
View Demo

92. Single Page Applications With jQuery’s Best Friends
In this pedagogical tutorial you will learn how to build a single page application supporting graceful degradation using some of jQuery’s Best friends; DocumentCloud’s Backbone.js, Underscore.js, LAB.js and jQuery templating.
View Demo

93. Bubbleriffic Image Gallery with jQuery
In this tutorial you will learn how to create a bubbly image gallery that shows images in a unique way. The thumbnails shows in a rounded fashion and you can simply scroll them automatically by moving the mouse. Clicking will zoom in a big circle with the full image.
View Demo

94. 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

95. Fancy Thumbnail Hover Effect With JQuery
This is a beautiful thumbnail hover effect jQuery and CSS tutorial by Soh Tanaka. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.
View Demo

96. 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

97. Full Page Image Gallery with jQuery
In this tutorial you will learn how to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse.
View Demo

98. FancyZoom Meet Prototype
FancyZoom uses Apple’s rounded corners and supports pretty much any HTML you can throw in a div (images, text, Flash, etc.). It was built using script.aculo.us and Prototype – it now works with any HTML already included on the page.
View Demo

99. Fullscreen Gallery With Thumbnail Flip – jQuery
In this tutorial you create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to.
View Demo

100. Exposure – jQuery Image Gallery Plugin
Exposure is a jQuery plugin for rich and smart photo viewing that can handle very large amounts of photos and has flexible configuration that allows custom transition effects and similar – and also smart image preloading and support for photo meta data.
View Demo

101. Pikachoose jQuery Image Gallery
Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed and easy to setup.
View Demo

102. PiroBox – jQuery Plugin For Fast Performing Photo Galleries
jQuery PiroBox plugin is a lightbox with jQuery (image or content viewer for web sites). There is a choice between three different styles – shadow, white and black. It is able to open any kind of files, from inLine content to the SWF files, from simple images to PDF files.
View Demo

103. Photo Zoom Out Effect With jQuery
In this tutorial you will learn how to create a simple image zoom out effect with jQuery. The idea is to show some images which are zoomed in initially and when hovering over an image it gets zoomed out. You can also download the source files.
View Demo

104. Sliding Boxes And Captions With JQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
View Demo

105. Galleriffic – jQuery Plugin For Photo Galleries
Galleriffic is a jQuery plugin that provides a rich, post-back free experience, optimized to handle high volumes of photos while conserving bandwidth. Note: there is more demos inside the article.
View Demo

106. Sponsor Flip Wall With jQuery And CSS
In this relatively easy-to-follow tutorial Martin Angelov will teach you how to code a good looking and effective sponsors page with PHP, CSS and jQuery together with the jQuery Flip plug-in by Luca Manno. You can download the source files.
View Demo

107. Polaroid Photo Viewer – jQuery And CSS3
In this tutorial you will learn how to create a Polaroid Photo Viewer using jQuery and CSS3. You can drag the images around, rotate them by combining the CSS3 Box Shadow and Rotate properties – the jQuery inject the CSS3, keeping the CSS file clean.
View Demo

108. AD Gallery – jQuery Plugin
A highly customizable image gallery plugin with a list of thumbnails below the image. Not quite like Lightbox or Thickbox, but more of a showcase type of gallery. First released in 2009 and updated on July 15, 2010. Demo on the download page.
View Demo

109. Hover Slide Effect with jQuery
In this tutorial you will learn how to create a neat hover and slide effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images.
View Demo

Top

Slideshow

110. Portfolio Zoom Slider – jQuery
This tutorial explains how to create some nice effects for a portfolio or similar website with jQuery – a tiny slider will be integrated with the amazing Cloud Zoom plugin and also the very elegant Fancybox plugin.
View Demo

111. Supersized – jQuery Plugin
This nice plugin resizes images to fill browser while maintaining image dimension ratio and cycles Images or backgrounds via slideshow with transitions and preloading. There is a few more demos on the plugin download page.
View Demo

112. Moving Boxes
A nice and practical jQuery slider by Chris Coyier with buttons to change panels – which grows up the current box when it’s in focus (image, title and text) and back down when it’s not in focus.
View Demo

113. Tiny Carousel – jQuery Plugin
Tiny Carousel is a lightweight carousel for sliding HTML based content – it was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface. Can slide vertical or horizontal.
View Demo

114. Mosaic Slideshow With jQuery And CSS
This tutorial teaches you how to create a jQuery and CSS mosaic gallery. The effect is achieved by dividing the original image into smaller parts. These tiles are sequentially hidden from view, which causes the effect. The source files are available for download.
View Demo

115. Animated JavaScript Slideshow
This dynamic JavaScript slideshow is feature packed and under 5KB. A few features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
View Demo

116. Easy Slider 1.7 – JQuery Plugin
JQuery plugin for sliding images and content. Easy Skider features include: auto-slide, continuous sliding, “Go to first” and “Go to last” buttons, hiding controls, optional wrapping markup for control buttons, vertical sliding, multiple sliders on one page.
View Demo

117. Image Rotator With Description
Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch – with help of this tutorial by Soh Tanaka, jQuery and CSS.
View Demo

118. BarackSlideshow
BarackSlideshow is a practical, very tiny and lightweight slideshow script, that takes the power of MorphList to easily enhance visualization and navigation of the images. With ‘transition’ option – slide or fade, or a function that returns any of those values.
View Demo

119. s3Slider – jQuery plugin
s3Slider is a plugin built in jQuery for cross-fading slideshow, with inspiration from the JD`s Smooth Slide Show script. Realatively easy to install and use.
View Demo

120. bgStretcher – jQuery Plugin
Background Stretcher is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize them to fill the entire window area. It will work as a slideshow if multiple images mode is used.
View Demo

121. Rotating Image Slideshow with jQuery and CSS3
In this pedagogical tutorial you will learn how to create a nice rotating image slideshow to spice up your web sites – and to achieve that you take a little bit of help from jQuery and CSS3 rotations (and the useful jQuery rotate plugin by Louis-Rémi Babé).
View Demo

Top

Lightbox

122. PrettyPhoto – jQuery Lightbox
PrettyPhoto is a jQuery based lightbox clone. It supports images and has also support for videos, flash, YouTube, iFrames. The setup is relatively easy and quick, plus the script is compatible in every major browser.
View Demo

123. Bumpbox – Mootools Lightbox
Bumpbox is another lightbox – with support for PDF, FLV, SWF, audio, images, inline HTML and also remote HTML files. The integration and implementation on your own site is pretty simple – and it automatically detects what kind of filetype you wish to show.
View Demo

124. Lightview – Overlay Anything With Style
Lightview was built to change the way you overlay content on a website. Designed to complement your content, and features include: smart image preloading, customization without CSS, adjustable rounded corners and more.
View Demo

125. Shadowbox Media Viewer
Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Written entirely in JavaScript and CSS and is highly customizable.
View Demo

126. TopUp – JavaScript Pop Up
TopUp is an easy to use JavaScript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness. Beta release.
View Demo

127. ColorBox – Customizable Lightbox Plugin
A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4 – supports photos, photo groups, slideshow, ajax, inline and iframed content. Less than 9KB of JavaScript. Note: there is more demos inside the article.
View Demo

128. YoxView – jQuery Image Viewer Plugin
YoxView is a jQuery image viewer plugin – it is inspired by Lokesh Dhakar’s Lightbox. Like it, YoxView displays images above the website’s content, as a separate layer. You can easily integrate your images from external sources like Flickr or Picasa into your website.
View Demo

129. Image Highlighting & Preview – jQuery
In this tutorial you will learn how to highlight and preview images that are integrated in an article or spread over a page. The images are highlighted on a delayed hover and offer a preview mode which will enlarge and center the bigger version of the image.
View Demo

130. imgZoom – jQuery Plugin
imgZoom is a jQuery plugin that implements a smooth zoom effect on images. It uses vector graphics (SVG or VML) to create a graceful transition between the thumbnail and the full-sized image.
View Demo

Top

Image Effects

131. Attractive Before & After Photo Effect With jQuery
In this easy to follow tutorial by Kevin Liew you will learn how to create a beautiful and smooth Before and After photo effect with help of jQuery and CSS – and how to convert it to plugins (tested on all major browsers).
View Demo

132. jQuery Image Zoom Plugin
jQuery plugin to handle image zooming, like you find on many e-commerce sites. Uses an asynchronously loaded full size image to create a “magnifying glass” effect on a scaled image with the HTML5 canvas element.
View Demo

133. MobilyBlocks – jQuery Plugin
This is yet another lightweight (as little as 2KB) and easily configurable jQuery plugin by Marcin Dziewulski. MobilyBlocks plugin allows you to simply create an unordered list as an impressive and stylish animated circle.
View Demo

134. 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

135. 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

136. Custom Animation Banner with jQuery
In this tutorial you will learn how to create a custom animation banner with jQuery by using the jQuery Easing Plugin and the jQuery 2D Transform Plugin. The idea is to have different elements in a banner that will animate step-wise in a custom way.
View Demo

137. jParallax
jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse.
View Demo

138. Blockster Transition Effect – jQuery
Blockster is a transition effect designed for ‘featured content’ rotators or slideshows. Its underlying concept is to transition between one element to the next block by block – and it is highly customizable. Demos are located on the download page.
View Demo

139. Jquery Fade In And Fade Out
A fade in fade out effect – the effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website whatever it be an image, text, a link or even a div.
View Demo

140. Flash-like Color And Pattern Morphing Effect With jQuery
In this tutorial you will learn how to create a Flash-like effect with a few lines of jQuery and a transparent PNG as mask. Dynamically change the color of the logo, and add patterns as you wish and even animate them. You can also download the source files.
View Demo

141. Rotating Billboard System With jQuery And CSS
In this tutorial you will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one appear.
View Demo

142. 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

143. Interactive Picture With jQuery
In this tutorial you will learn how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. The original inspiration for this tutorial came from the IKEA website.
View Demo

144. Nifty Dynamic Shadow With jQuery
In this logical and relatively easy-to-follow tutorial Daniel Kurdoghlian will teach you how to create a nifty looking dynamic shadow with a bit of jQuery, CSS and some transparent PNG’s as base – and you can also download the source files to this effect.
View Demo

145. Day And Night – Scenery Animation
How to with jQuery and CSS create an amazing animated scenery with just a few lines of jQuery and some absolute positioned elements with images. Note: This will not work in any IE version.
View Demo

146. Awesome Image Preloader – jQuery
In this pedagogical tutorial you will learn how to create a graceful image preloader plugin (that works in all major browsers), to boost the performance of your website. First a small loading icon appears, and then self the image fades in gracefully.
View Demo

Top

Image Cropping

147. imgAreaSelect – jQuery Plugin
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes. Note: more demos Here.
View Demo

148. CropZoom – jQuery Plugin
CropZoom is a plugin that let you select an area of an image to crop, whit this plugin you can zoom in or zoom out, drag and also rotate. The CropZoom plugin needs ui.droppable, ui.resizable, ui.slider from JQuery UI.
View Demo

149. UvumiTools Crop
This simplified tool gives your users the ability to create a selection area that can be used to crop an image live on your web site. This is an extremely useful tool for any site that provides image hosting, for example.
View Demo

150. Jcrop – The jQuery Image Cropping Plugin
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
View Demo

Top

Content Sliders

151. Mootools Slider With Two Knobs
Mootools slider with two knobs (double pinned slider) with range indicator. You can easily change the look and feel of the range indicator, slider knob, the slider track by modifying the slider.css.
View Demo

152. 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

153. jPaginate – Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo

154. AnythingSlider – JQuery Plugin
This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders Chris Coyier created and adding new features. In other words, to create a really “full featured” slider that could be widely useful.
View Demo

155. A Bullet-Proof Content Viewer
In this tutorial, we’re going to look at how we can create an attractive and space-saving content viewer which even works with JavaScript disabled. Styled with basic CSS and some use of jQuery to add further enhancements in the form of transition animations.
View Demo

Top

Interactivity And Communication

156. RSS Reader With jQuery Mobile
In this easy to follow tutorial by Jeffrey Way you will learn how to create a simple but stylish RSS reader for your iPhone or Android phone, just by using some PHP and jQuery Mobile. You can also download the source files.
View Demo

157. 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

158. Star Rating – CSS Sprite And jQuery
In this easy to follow tutorial from Web Developer Juice you will learn how to create nice and discrete star rating with the help of CSS Sprite and jQuery – AJAX Call is used to store the voting value.
View Demo

159. Starbox – Rating Stars For Prototype
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype JavaScript framework. For some extra effects you can add Scriptaculous as well.
View Demo

160. Animated Sharing Bar
Encourage your visitors to share your content on the networks by using pure JavaScript with the jQuery framework, to make an animated sharing bar, which will enable your website visitors to share posts on a number of social networks.
View Demo

161. OpenSocial jQuery Mixi Platform
OpenSocial jQuery is a jQuery based concise JavaScript Library for rapid OpenSocial Applications development – The jQuery mixi Platform is a plugin to use the extension of mixi specifically.
View Demo

162. Digg-Style Post Sharing Tool With JQuery
Kevin Liew will show you how to create a social bookmarking tool that looks similar to digg’s. He also includes the komodomedia’s social bookmarking icons and a long list of submission URL for one click bookmark.
View Demo

163. Ajax IM
Ajax im is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. Demo usernames are “test”, and “test (1 to 4)”. Password is “test”.
View Demo

164. jFeedback – Minimal jQuery Notification Plugin
A minimal way to notify users of success or error, based on Twitter’s bar and jBar. The notification consists of a simple “OK” or “Error” icon which the user can decide to click if he is interested in the details of the notification.
View Demo

165. Compact News Previewer with jQuery
In this tutorial you will learn how to create a news previewer that lets you show your latest articles or news in a compact way. The previewer will show some list of articles on the left side and the preview of the article with a longer description on the right.
View Demo

166. 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

167. Better Blogroll – Dynamic Fun With SimplePie And JQuery
A traditional blogroll is a simple list of other sites, often in the sidebar. Let’s improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them, and using some fun jQuery animation.
View Demo

168. Twitter Trackbacks Widget – jQuery Plugin
Highly customizable Twitter trackbacks widget to integrate tweets that mention your post into your blog. Each tweet comes with reply and retweet links to get more readers engaged in your story conversation.
View Demo

169. Twitter Friends And Followers Widget – JQuery Plugin
Here is a jQuery plugin by More Tech Tips that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and even their latest tweets if you like.
View Demo

170. jQuery Twitter Ticker
In this tutorial you will learn how to create a jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases.
View Demo

171. Realtime Related Tweets Bar – JQuery Plugin
A real-time tweets bar related to your posts from your twitter timeline or from anybody or even limit it by a geocode coordinates. Features; show realtime related tweets based on your post tags, show your twitter timeline and more.
View Demo

172. Sleek Feed Widget With jQuery, YQL And CSS3
In this tutorial you will learn how to create a sleek feed widget, that will fetch any feed and display it in your blog sidebar. You could for example set it up to show the latest posts from the different categories of your blog. You can also download the source files.
View Demo

173. Interactive Image Vamp Up With jQuery, CSS3 And PHP
In this tutorial you will create an online application for giving some funny touches to an image. You use jQuery and jQuery UI for dragging and resizing little bling elements like mustaches, glasses and lips. The source files are available for download.
View Demo

174. jsDraw2D – 2D Graphics Library For JavaScript
This is a pure JavaScript library to draw 2D graphics on web pages inside web browser without using SVG or VML. JavaScript developers, web developers can take advantage of the library to add graphics drawing functionality to web applications.
View Demo

175. Related Posts Slide Out Boxes – jQuery & CSS3
In this tutorial you are going to learn how to create a little widget that can be used to show related posts in any page. When the visitor hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo.
View Demo

Top

Maps & Searching

176. Interactive Map With Raphael
In this tutorial by Marcin Dziewulski you are going to learn how to create an interactive map from scratch with the help of Raphael – Raphael is a small JavaScript library that should simplify your work with vector graphics on the web.
View Demo

177. MobilyMap – jQuery Plugin
This is a lightweight (only 5KB) and fully and easily configurable jQuery plugin by Marcin Dziewulski that converts a simple image into a functional and practical map – a nice solution for your websites map presentation needs.
View Demo

178. POI Map – jQuery & Google Maps
In this tutorial by Bogdan Pop from WebRaptor you will learn how to build a useful (when you urgently need to present important locations to your visitors) but fairly simple POI map with jQuery, Google maps and some not so complicated CSS.
View Demo

179. jQuery Plugin For Zoomable And Interactive Maps
A very practical and useful jQuery plugin for zoomable and interactive maps – the map was made to be as appealing as possible by using crisp graphics and smooth animations. The source code can be downloaded from the site.
View Demo

180. Easy To Use jQuery & Ajax Autosuggest Plugin
Extensible and light-weight (3.2kb minified) jQuery plugin – this plugin has the usual autosuggest functionality, but with extra flexibility: multiple instances, passing custom parameters, the ID and the value are returned, keyboard-controlled, and more.
View Demo

181. Google Powered Site Search With jQuery
In this logical tutorial you will learn how to create a branded custom search engine simply by using Google’s AJAX Search API, with which you can search for images and video and news items on your site – and you can also get general web results.
View Demo

182. Search And Share
Search and Share makes highlighting text to a more functional action. More specifically, it attempts to understand the intention of a user’s text selection and presents a variety of options accordingly.
View Demo

183. Web 2.0 Document Search Site
In this tutorial we will create a document searching site with jQuery. This site will be used to search documents by specifying an extension (file type). The data is then filtered and sent to Google.
View Demo

Top

Media Players

184. Minimalist YouTube Player – jQuery
In this tutorial you will learn how to create a minimalistic YouTube player with the help of jQuery YouTube TubePlayer Plugin by Nirvana Tikku and SWFObjects. All the source files of the project can be downloaded.
View Demo

185. Custom YouTube Video Player – jQuery
In this tutorial you will create a jQuery plugin which uses YouTube’s chromeless player, and creates our own set of minimalistic controls. The supported controls include a Play, Pause and Replay button – and also a clickable progress bar.
View Demo

186. Music Player In JQuery
In this tutorial you create an amazing music player coded in xHTML and jQuery that made use of mouse gestures and hotkeys. You can click and drag with mouse to interact with interface’s music player or use directional keys and spacebar instead of mouse.
View Demo

Top

Font And Text

187. 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

188. Typeface.js – Rendering Text With JavaScript, <canvas>, And VML
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
View Demo

189. Lettering – jQuery Typography Plugin
Lettering by Dave Rupert is an easy to use and lightweight jQuery plugin for radical web typography. This is an elegant solution to create for example typographical CSS3 posters, or for really custom type headings, while keeping the text selectable.
View Demo

190. jQSlickWrap – Slick Text Wrapping For jQuery
jQSlickWrap is a plugin for jQuery which allows you to wrap content around irregularly shaped images, easily. Use float and padding CSS styles to specify how the wrapping will work. Written with Progressive Enhancement in mind.
View Demo

191. FontEffect – JQuery Plugin
Font effect is a jQuery plugin that adds some effect to html text. The available effects are Outline, Shadow, Gradient and Mirror. No images are used for these effects and no additional CSS is necessary.
View Demo

192. Pull Quotes With MooTools
Chris Coyier authored a post titled Don’t Repeat Markup a while back. In his post he created nice pull quotes without repeating any content — instead he uses jQuery to dynamically create the quotes. The following is the MooTools method for doing so.
View Demo

193. Columnizer – jQuery Plugin
The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. Note: there is more demos inside the article.
View Demo

Top

Miscellaneous

194. Isotope jQuery Layout Plugin
Interesting and exquisite jQuery plugin by David DeSandro for magical layouts. Enables filtering, sorting, and dynamic layouts – reveals and hides items with filtering, reorders items with sorting, dynamic layouts, captivating animations and more.
View Demo

195. Giveaway Randomizer App – jQuery
In this tutorial you will learn how to create a dedicated randomizer jQuery application – especially for choosing winners in competitions and giveaways. The goal is to get a randomly selected list of contestants and their prizes.
View Demo

196. Dynamic FAQ Section – jQuery & YQL & Google Docs
In this tutorial you will learn how to create dynamic FAQ section – with the help of jQuery and YQL, which pull the contents of a shared spreadsheet in your Google Docs, and use the data to populate your FAQ section with questions and answers.
View Demo

197. Easy List Splitter – jQuery Plugin
The Easy List Splitter plugin will get your list, wrap it into a container div, generate as many lists as the number of columns you require and evenly split the list items into the different list elements. It generates a valid HTML code that you can style as you wish.
View Demo

198. Skype-Style Buttons Using MooTools
JQuery expert Janko Jovanovic dropped a sweet tutorial showing you how to create a Skype-like button using jQuery. David Walsh was impressed by Janko’s article so he decided to port the effect to MooTools.
View Demo

199. Folder Collapser For Dynamic Content
How to create a group of collapsible folders using pure JavaScript and some JQuery added to the final product to give it a little bit of flare. The code will be structured in such a way that allows for implementation into a dynamic page.
View Demo

200. MooTools Drag Opacity
In this tutorial David Walsh will learn you how to make a “drag opacity and fading” effect with the help of some MooTools. The code itself is quite simple — Drag.Move’s onStart and onComplete events to begin and end the fading.
View Demo

201. Twitter-Like Load More Widget
You click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, JavaScript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.
View Demo

202. Retro Animated Flip-Down Clock
In this tutorial, you will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, Alexandru Pitea tried to replicate the flip action of the pads and make it as lifelike as possible.
View Demo

203. GlassBox
GlassBox is a lightweight JavaScript User Interface (UI) library, which uses Prototype and Script.aculo.us for some effects. GlassBox lets you easily build lucent borders, colorful layouts and “Flash-like” effects.
View Demo

204. Fast And Simple Toggle View Content
This script is using the UL list and allows user to toggle to display the content of LI items. This is a useful user interface feature that helps designers to save space and build a less complicated user interface.
View Demo

Top

The different JavaScript and AJAX resources are not in any particular order except for the categorizing – and the site Cashrevelations.com is not affiliated with any of the authors.

On January 5 the new Cloud 9 IDE version 0.2.0 was released. This new release includes new features, bug-fixes and improvements to Cloud9 – some of the most important are support and syntax highlighting for Python and PHP files and improved work-flow.

Amongst other news and updates are:

• Smarter smart tab handling
• PHP and Python syntax modes
• IE and Opera fixes
• Properly handle empty documents
• Add PHP and Python file types
• Add hotkey for the console (Shift-Escape)
• Add live update support to the debugger
• Improve console styling
• Allow multiple concurrent sessions to the same workspace

Note: this is not the full change log – for full change log and other documentation and download, please visit Github or the Cloud9 Integrated Development Environment website.

Click here to view the embedded video.

According to the developers, this IDE aims to bring all great features from other IDE’s and source code editors like Eclipse, Netbeans, Textmate, and many others together, bundled as plugins – Cloud9′s focus is on Javascript development and they consequently promote the product as the JavaScript IDE for JavaScripters by JavaScripters.

• Download Cloud9 version 0.2.0
• Visit Cloud9 Website

In this December jQuery roundup, the last one for this year, we present some interesting and refreshing objects. For example a nice hover slide image effect tutorial, the cool little MobilyBlocks plugin by Marcin Dziewulski and many more. This December listing represents new jQuery techniques from late October until now.

In our definition of jQuery techniques we include tutorials, plugins and similar – and in our definition of “new” we include released or updated during the actual period. This roundup involves new jQuery techniques during the period of October 25 until December 14.

Cashrevelations.com presents a selection of advanced jQuery techniques – 12 brand new jQuery techniques released or updated during the period of October 25 until December 14 this year (2010). All these marvelous jQuery techniques are presented with demo.

12 New & Advanced jQuery Techniques – December

1. Bubbleriffic Image Gallery with jQuery
In this tutorial you will learn how to create a bubbly image gallery that shows images in a unique way. The thumbnails shows in a rounded fashion and you can simply scroll them automatically by moving the mouse. Clicking will zoom in a big circle with the full image.
View Demo

2. MobilyMap – jQuery Plugin
This is a lightweight (only 5KB) and fully and easily configurable jQuery plugin by Marcin Dziewulski that converts a simple image into a functional and practical map – a nice solution for your websites map presentation needs.
View Demo

3. jQuery Confirm Dialog Replacement
In this tutorial by Martin Angelov you will learn how to create a stylish cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.
View Demo

4. Hover Slide Effect with jQuery
In this tutorial you will learn how to create a neat hover and slide effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images.
View Demo

5. Supersized – jQuery Plugin
This nice plugin resizes images to fill browser while maintaining image dimension ratio and cycles Images or backgrounds via slideshow with transitions and preloading. There is a few more demos on the plugin download page.
View Demo

6. Overlay Effect Menu with jQuery
In this easy to follow tutorial you will learn how to create a simple but yet practical menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand.
View Demo

7. MobilyBlocks – jQuery Plugin
This is yet another lightweight (as little as 2KB) and easily configurable jQuery plugin by Marcin Dziewulski. MobilyBlocks plugin allows you to simply create an unordered list as an impressive and stylish animated circle.
View Demo

8. Animated Portfolio Gallery with jQuery
In this tutorial you will learn how to create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbs and a content area where we will display details about the item. The image can be enlarged by clicking, making it appear as an overlay.
View Demo

9. Awesome Image Preloader – jQuery
In this pedagogical tutorial you will learn how to create a graceful image preloader plugin (that works in all major browsers), to boost the performance of your website. First a small loading icon appears, and then self the image fades in gracefully.
View Demo

10. Rotating Image Slideshow with jQuery and CSS3
In this pedagogical tutorial you will learn how to create a nice rotating image slideshow to spice up your web sites – and to achieve that you take a little bit of help from jQuery and CSS3 rotations (and the useful jQuery rotate plugin by Louis-Rémi Babé).
View Demo

11. Pull Out Content Panel with jQuery
In this tutorial you will create a content panel that slides out at a predefined scrolling position. It will reveal a teaser with related content and it can be expanded to full page size to show more. A custom slider allows to scroll through items in the panel.
View Demo

12. MB.VerticalSlider – jQuery Plugin
MB.VerticalSlider by Matteo Bicocchi allows you to show long list of elements managing pagination, it can work with elements already in the DOM of your page or loading them via AJAX when needed. And it works with mouse wheel of course.
View Demo

The different jQuery items presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors.

We don’t do jQuery roundups every month because we prefer to wait a longer period to get a better selection, more to choose from – anyway, this is October months roundup for jQuery techniques. This listing represents new techniques from late August until now.

Our definition of jQuery techniques includes tutorials, plugins and similar useful items of educational or captivating wisdom – and in our definition of “new” we include released or updated during actual period (we don’t like to write “new” if it isn’t). This listing involves new jQuery techniques during the period of August 20 until October 25 this year (2010).

Note: jQuery Mobile Alpha 1 was released on October 16. jQuery Mobile is a user interface framework, built on top of jQuery. For more info, please visit jQuery Mobile.

Cashrevelations.com presents a selection of new and fresh jQuery techniques – 20 new jQuery techniques released or updated during the period of August 20 until October 25 this year (2010). All these jQuery techniques are presented with demo.

20 Fresh & New jQuery Techniques – October 2010

1. Custom Animation Banner with jQuery
In this tutorial you will learn how to create a custom animation banner with jQuery by using the jQuery Easing Plugin and the jQuery 2D Transform Plugin. The idea is to have different elements in a banner that will animate step-wise in a custom way.
View Demo

2. Quick Feedback Form – jQuery & PHP
In this tutorial by Martin Angelov you will learn how to create a solution for receiving quick feedback from your users – powered by jQuery, PHP and the PHPMailer class, this stylish form sends the users suggestions directly to your mailbox.
View Demo

3. Wijmo – jQuery UI Widgets
Wijmo is a set of jQuery UI widgets for building web applications – a complete kit of over 30 jQuery UI Widgets. According to the developers, it is a mixture of jQuery, CSS3, SVG, and HTML5. Still in Beta – open to everyone who wants to participate.
View Demo

4. One Page Navigation – jQuery Plugin
This is a practical navigation plugin by Trevor Davis that lets you scroll smoothly when the navigation is clicked – this plugin is built upon the jQuery ScrollTo plugin by Ariel Flesler. The plugin is also available on Github.
View Demo

5. RSS Reader With jQuery Mobile
In this easy to follow tutorial by Jeffrey Way you will learn how to create a simple but stylish RSS reader for your iPhone or Android phone, just by using some PHP and jQuery Mobile. You can also download the source files.
View Demo

6. Easy Accordion – jQuery Plugin
The Easy Accordion plugin by Andrea Cima Serniotti will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still. You can download the source files for this plugin.
View Demo

7. Lettering – jQuery Typography Plugin
Lettering by Dave Rupert is an easy to use and lightweight jQuery plugin for radical web typography. This is an elegant solution to create for example typographical CSS3 posters, or for really custom type headings, while keeping the text selectable.
View Demo

8. Annotation Overlay Effect with jQuery
In this tutorial you will learn how to create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio. Just like with all the other Tympanus tutorials we present, also this tutorials source files can be downloaded.
View Demo

9. Snippet – jQuery Syntax Highlighter
Snippet is a cool jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet jQuery plugin provides a quick and easy way of highlighting source code passages in HTML documents.
View Demo

10. Google Powered Site Search With jQuery
In this logical tutorial you will learn how to create a branded custom search engine simply by using Google’s AJAX Search API, with which you can search for images and video and news items on your site – and you can also get general web results.
View Demo

11. Simple Tooltip – jQuery & CSS
In this tutorial by Soh Tanaka you will learn how to create simple tooltip with jQuery and an incredibly simple styling with CSS. The only known issue with this tooltip is if the tooltip is wrapped in a container which has a relative position, the tooltip will be off.
View Demo

12. Compact News Previewer with jQuery
In this tutorial you will learn how to create a news previewer that lets you show your latest articles or news in a compact way. The previewer will show some list of articles on the left side and the preview of the article with a longer description on the right.
View Demo

13. Exposure jQuery Plugin
Exposure is an image viewing plugin for the jQuery JavaScript library. It is designed for creating rich, fully customizable viewing experiences, and can handle very large amounts of images without pushing your bandwidth through the roof.
View Demo

14. Giveaway Randomizer App – jQuery
In this tutorial you will learn how to create a dedicated randomizer jQuery application – especially for choosing winners in competitions and giveaways. The goal is to get a randomly selected list of contestants and their prizes.
View Demo

15. jQuery Smooth Tabs Plugin
jQuery Smooth Tabs is an easy to use plugin, which allows you to display your content with some nice effects, for better user experience. All you need is a single container for your desired tabs and content, some appropriate CSS and images.
View Demo

16. TN34 Timetabs – jQuery Plugin
This jQuery plugin by Mario Alves creates tab container that switches automatically every cycle (or interval) to next tab – the plugin is compatible with most modern browsers. The site is in German – you can also download the plugin from HERE.
View Demo

17. Full Page Image Gallery with jQuery
In this tutorial you will learn how to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse.
View Demo

18. bgStretcher – jQuery Plugin
Background Stretcher is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize them to fill the entire window area. It will work as a slideshow if multiple images mode is used.
View Demo

19. SlideNote – jQuery Plugin For Sliding Notifications
SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. SlideNote offers a set of five options that allow you to modify the behavior and content of the script.
View Demo

20. Easy List Splitter – jQuery Plugin
The Easy List Splitter plugin will get your list, wrap it into a container div, generate as many lists as the number of columns you require and evenly split the list items into the different list elements. It generates a valid HTML code that you can style as you wish.
View Demo

The different jQuery items presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors.

Newly released (November 22nd) Wijmo is a set of jQuery UI widgets for building web applications. This interesting set contains a complete kit of over 30 jQuery UI Widgets – and according to the developers, it is a mixture of jQuery, CSS3, HTML5 and SVG.

There are two sets of widgets, Wijmo Open and Wijmo Complete. Wijmo Open is free and open source and Wijmo Complete is a commercial offering. Wijmo jQuery UI Widgets is still in Beta – but open to everyone who might be interested to participate.

In case you are interested, there is online demos of Wijmo Open (the free set) and they are available HERE. And you could also visit Wijmo’s Twitter account.

The people behind Wijmo, Pittsburgh (USA) based ComponentOne, has been providing the widest range of Microsoft Visual Studio components, IDE platform development tools, and applications for over 23 years. The company was formed by the merger of APEX Software Corporation and VideoSoft.

• Visit Wijmo