Slideshow This slideshow uses a few amazing photos found on Flickr. You can find links to them below. This is only the example page. 10 Fresh and Useful jQuery Plugins When it comes to adding JavaScript functionality to a website, jQuery has become the solution of choice for web designers and developers. With it’s ease of use and ever-growing selection of plugins, there’s really no point to look elsewhere. Awesome jQuery plugins are popping up everyday, and we’re always on the look out. So for this post, I’ve gathered 10 fresh plugins that you should find very useful. Cute Balloon Cute Balloon is a jQuery script that allow you to easy make a beauty tool tip balloon, also with ajax content. Captify Captify is a plugin that displays simple, pretty image captions that appear on rollover. gvChart gvChart is a plugin for jQuery, that uses Google Charts to create interactive visualization by using data from the HTML table tag. jmapping This plugin is designed for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML. jQuery.validity Animated table sort Flare Video Coin Slider Blockster Colortip shares
multiselect2side (multiple select double side) plugin: documentation and demo page Demo Search - Full demo select multiple double side with search option true (1000 elements) Select multiple="multiple" modified by multiselect2side Click here to test the select above Result of a php print_r() function: Click here to hide/show original select This is the javascript code to launch multiselect2side to #searchable select: Demo 1 - Full demo select multiple double side This is the javascript code to launch multiselect2side to #first select: Demo 2 - select multiple double side - moveOptions: false, autoSort: true Move buttons are disabled but is enable autoSort. This is the javascript code to launch multiselect2side to #second select: Demo 3 - select multiple double side - selectedPosition: 'left' Elements selected are in the left, label of move buttoms are modified. This is the javascript code to launch multiselect2side to #third select: Demo 4 - Select multiple double side with limited number of selectionable options Documentation To use this jquery plugin: Options: Methods: Download
DataTables (table plug-in for jQuery) QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler jQuery QuickFlip 2 jQuery QuickFlip takes any piece of HTML markup and flips it over like a card. The effect is similar to the UI animation on the iPhone Click to flip panel I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back. Download QuickFlip 2 for jQuery Read the QuickFlip documentation QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. What’s new in QuickFlip 2? QuickFlip 2 is now even easier to implement. Additionally, QuickFlip’s new version makes triggering the flip effect much simpler due to a new flip function that can be attached to any jQuery selector.
Slider A little while back I did a tutorial on a Featured Content Slider. It was neat, but a little limited in customization possibility. The two most requested features were being able to add/remove "panels" and a stop/start button. I'm happy to say I was able to accommodate a bit with this new slider. It's not a plugin, so it's not as easy as it possibly could be, but it's much easier. The HTML Markup The markup is extremely light. Notice there is no markup for a stop button. <div id="slider"><div id="mover"><div id="slide-1" class="slide"><h1>Garden Rack</h1><p>Donec gravida posuere arcu. The CSS Not much to talk about here, much of this is merely presentational choices. The jQuery JavaScript 90% of what we are doing here is specific to jQuery. At the top of our startstop-slider.js file, is a single self-explanitory variable var delayLength = 4000; Then we'll begin our manipulation, after the DOM is ready of course. $(function() { $("#slider").append('Stop'); }); The "Auto Play" How To Customize
19 Unique jQuery Tutorials for Web Developers | Tutorials jQuery is the premier library for coding JavaScript page effects. Most popular content management packages run jQuery for both admin and frontend design effects. As a web developer jQuery can be a fun library to spend some time learning and offers tremendous design potential. It seems there are so many references and guides out there it’s easy to get lost. Below we’ve compiled 19 unique jQuery tutorials to help develop your skills as a frontend developer. Form validation from scratch Develop a simple and powerful jQuery script for common HTML form validation. Incredible jQuery Login Form Learn how to code a structural jQuery login form with sliding animation. Creating a Digg Style Signup Form Digg has been an innovator for web apps for years. Color jQuery & CSS3 Sliders Here you are taught about using jQuery and the new transformation features brought by CSS3 to create a dynamic slider effect. Working with Events – Part 1 Part 1 of a detailed series teaching about events in jQuery. 629 shares
Poshy Tip jQuery Plugin Demo Page Usage Examples The default browser tooltip that displays the value of the title attribute is replaced with a "poshier" version: Hover for a tooltip Styles (Classes) Using different tooltip classes is easy. .tip-yellow .tip-violet View plain code .tip-darkgray .tip-skyblue .tip-yellowsimple (no background-image used for the tooltip body) .tip-twitter (ala Twitter) .tip-green Form Tooltips (with varying positioning) Adding form input field tooltips is simple. Asynchronous Loading of the Content Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. Simple Example Update content after 1 second Loading Flickr Feeds A more complicated example of loading some Flickr images by tags: flowers, closeup, sunset, architecture, Plovdiv, old, town, Nesebar, depeche Following the Mouse Cursor Hover for a tooltip that follows the cursor API Example - Triggering the Tooltip Manually Using Live Events Options className String