Category: jQuery

Google Maps from Semantic Markup – jMapping jQuery Plugin

/ 0 Comments / Category: jQuery/

jMapping jQuery plugin – for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.

jMapping plugin tries to allow as much graceful degradation as possible by having the HTML be as semantic as possible.

The plugin allows you to customize the map settings, use an object or a function for category options, to update map after Ajax call, on-page pagination, and more.

View basic DEMO

Photo Stack Gallery with jQuery, CSS3 & PHP Tutorial

/ 0 Comments / Category: jQuery/Tags: Gallery

Beautiful Photo Stack Gallery – Tutorial (with source code) on how to create a nice and fresh image gallery using jQuery, PHP & CSS3, with multiple albums support.

The idea is to show the albums as a slider, and when an album is chosen, images are shown in the photo stack view with a slick animation and reflection (reflections only work in Webkit browsers, Google Chrome or Apple Safari).

View DEMO

PHP is used for getting the images for each album from albums folders.

Photo Stack Gallery is fully functional in all latest browsers like Firefox and IE, just without some beautiful properties supported only by Chrome and Safari.

Attractive Dual Animated Slider – DualSlider jQuery Plugin

/ 0 Comments / Category: jQuery/Tags: Gallery

dualSlider – jQuery Plugin aims to provide jQuery users with attractive Dual Animated Slider. Easily highlight recent articles, images, or even a video … basically anything you need.

Sliding content can either be static or come out of a database. If it’s out of a database, the paging is built dynamically by the plugin. View DEMO.

DualSlider comes with all standard options like auto sliding -true/false, autoDelay, durationCarousel and more.

Simple and Lightweight Star Rating Plugin – jQuery Raty

/ 2 Comments / Category: jQuery/Tags: Rating Systems

jQuery Raty - simple, powerful and lightweight (3.1Kb minified) Star Rating jQuery plugin with various options.

With custom icons you can easily create all kinds of rating boxes, set up number of stars, a hint information for every star, onClick function that enable a callback when a star is clicked, and more.

Animated table sort jQuery Plugin

/ 0 Comments / Category: jQuery/Tags: Tables

Animated table sort – jQuery plugin allows you to sort a table based on a particular column with a fly effect.

The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches.

Table sort plugin cleans up after itself, and what you’re left with is a legitimate table with each <td> containing the value it visually appears to.

You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Custom Retweet Buttons – jQuery Plugin

/ 0 Comments / Category: jQuery/Tags: Twitter

Custom Retweet Buttons – a jQuery Plugin that allows you to build your own Custom Retweet Buttons and style it however you like with CSS from the ground up.

Plugin works by using two APIs, it goes to topsy to get the tweet count of the url and then it goes to bit.ly to get a shortened link.

When creating the templates for the button markup and default retweet text, there are a number of variables available like:

count – The total number of tweets the url has.
title – The title of the page (can be overridden in the settings)
url – The full url of the page (can be overridden in the settings)
account – The twitter account to use in the retweetTemplate.
shortURL – The bit.ly shortened version of the full url.
allTweetsURL – The link to all tweets of the url on topsy.

jQuery MegaMenu Plugin ver.2

/ 0 Comments / Category: jQuery/Tags: Menus

jQuery MegaMenu 2 of the popular jQuery MegaMenu Plugin, with quiet a lot of changes in the code base and usability, with a completely revamped JS and CSS code-base.

View DEMO

Features:

Customizable menu show and hide effects, with three available options of slideDown/slideUp, fadeIn/fadeOut and simple.
You can choose to activate the menu by click or by mouseover.
HoverIntent like feature embedded into the code-base so that we have smooth navigation by default without any external libraries.
Automatic alignment of the menu content according to the width of the parent menu container.
Variable width of the menu contents.
Non obtrusive and easier to understand CSS.

JQuery Tooltip Plugin – ChillTip

/ 1 Comment / Category: jQuery/Tags: Tooltips

ChillTip is a simple and lightweight (0.8Kb gzipped) jQuery Tooltip Plugin that allows you to have a custom designed tooltip for your website.

Via CSS, you can easily change the tooltip background color, border color, tooltips width, and font size.

It can be used for span, img, anchor attributes and anything else that uses the title attribute. ChillTip has been tested and working in IE6+, Firefox, Google Chrome, Opera and Safari.

Fancy Sliding Form with jQuery

/ 0 Comments / Category: jQuery/Tags: Forms

Fancy Sliding Form – tutorial on how to create a fancy sliding form with jQuery that shows some validation feedback to the user after each step.

This form saves a lot of space and is easy to access – it works like a slide show, just that we have fieldsets of a form instead of images.

View DEMO

Sliding Checkbox Actions Menu with jQuery

/ 0 Comments / Category: jQuery/Tags: Menus

Sliding Checkbox Actions Menu – great tutorial on how to create sliding and draggable actions menu with jQuery, that appears when checkboxes are selected.

A very helpful UI property, especially when creating user interfaces with a long lists of check boxes, since you don’t force the user to scroll up or down to the place where the actions are – they just appear whenever the user needs them.

View DEMO

Additionally, the user can drag the actions box to the place that is more practical for him, and the box will always follow when the user scrolls the page. It will also show a count of how many check boxes were selected.

This tutorial got inspired by a similar feature in the mobile version of Gmail.