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
CSS Card Flip using Webkit Transitions | Technology Webkit brought a lot of enhancements to the formerly dull browser based user interfaces, with transform and transition properties being among the most useful for user interaction. In this tutorial we will learn how to use both to create a product card that flips to reveal more information with a fallback for browsers that don’t support Webkit transitions and transform. CSS Card Flip Demos There are three examples for this tutorial, each one with its own advantages. Card flip triggered by click Card flip triggered on mouse over Card flip triggered by disjoint button The first two are the most basic: you have to either click on the card or roll your mouse over it to trigger the effect. The main difference between the “click to flip” example and the other two is that you can’t have a link within the faces unless you deal with event propagation and it’s not the focus of this tutorial. What about Firefox, Opera or the one browser whose name is written in the Black Speech of Mordor? A Card Flip?
DataTables (table plug-in for jQuery) 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