반응형
반응형

Tablesort: A simple sorting component for tables

tablesort

 

tablesort.js

Tablesort is a small & simple sorting component for tables written in Javascript. It has no dependencies and should have no interference with other libraries.

Basic usage

<script src='tablesort.min.js'></script>
<script>
  new Tablesort(document.getElementById('table-id'));
</script>

Sort Types

  • strings
  • numbers
  • currency
  • Basic dates in dd/mm/yy or dd-mm-yy format. Years can be 4 digits. Days and Months can be 1 or 2 digits.

 

 

반응형
반응형

Pace: An automatic page load progress indicator

http://codevisually.com/

 

pace

 

반응형
반응형
Best jQuery Plugins of the Week [15th September-21st September]

 

Best jQuery Plugins of the Week

1. Ion.Tabs by IonDen

Ion.Tabs as the name hints is a jQuery tabs plugin that promises easy and well done tabs with many options and skin support. This jQuery plugin supports many groups of tabs at one page, generates events and call backs, is easy to set up, and features cross-browser support viz. Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+).

best-jquery-plugins

Download | Demo

2. Drag Multiple Plugin by Doug Ross

Drag Multiple is a jQueryUI plugin that enables the selection, drag and drop of multiple ui-draggable elements.

Download

3. Double by Arthur Corenzan

Ever wished to change an element’s properties, style and behavior and instantly restore to what it was before the mess? Well, that’s what Double is developed for. This jQuery plugin lets you make a double, change it and eventually recall the original without any fuss. All in all, double is a jQuery plugin for hiring doubles for your elements.

best-jquery-plugins

Download | Demo

4. InstaPIXEL by Eric Howard

InstaPIXEL is a jQuery plugin to pixelate an image on a canvas element. This plugin pixelates the attached canvas with any image.

best-jquery-plugins

Download | Demo

5. SO_Tag: Tagging system based on StackOverflows tag search

SO Tag is a jQuery Tagging system based on StackOverflows tags with descriptions. In simple words it is a simple tagging system that allows a set of tags hat that are stored in a database.

best-jquery-plugins

erfg Download | Demo

6. CLNDR by Kyle Stetz

CLNDR is a calendar plugin that uses HTML templates to enable you to write markup and styles that have access to useful calendar data.

best-jquery-plugins

Download | Demo

7. Chinese region picker for jQuery plugin

Its a best region picker plugin for jQuery in China and is based on Chineserp. The data is provided by Chinese region db.

best-jquery-plugins Download | Demo

8. aciWorker – Abstract web workers and not only

Developed by Dragos Ursu, aciWorker is a jQuery plugin that can be used to bring abstraction to web workers and allow JavaScript code execution even in their absence.

best-jquery-plugins

Download | Demo

9. Scrolld.js by Charlie Geiger

Scrolld.js is an open source plugin for jQuery. It provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values.

best-jquery-plugins

Download | Demo

10. jQuery LiveEditor by Mattias Aslund

LiveEditor is a jQuery plugin that displays input editors when the user hovers over an editable control. It allows users to edit information in detail views or tables.

Download

11. jQuery Bank by Katsuya Noguchi

As the name clearly hints Bank is a jQuery plugin with library for building bank account forms, formatting and validating inputs.

best-jquery-pluginsDownload | Demo

12. jQuery Chain

Chain is a jQuery plugin to chain async functions to execute sequentially, current function’s return value or returned deferred object resolve parameters will be transfer to next function as parameters.

best-jquery-plugins

Download | Demo

13. jQuery AjaxGetContent by Implico

AjaxGetContent is a jQuery plugin that allows to transform classic website into a dynamic, ultrafast page, based on content loading using AJAX. All content remains visible for Google, the back/forward browser buttons are working, address bar changes.

Download | Demo

14. List Item Selector Plugin by Pravin Kalekar

This is a jQuery plug-in for list items selector.You will get to see the list on the left hand side from which you can select and move the items you want to the right hand side.

Download

15. Two levels collapsable lists by Sébastien Roch

This jQuery plugin enables collapsing/expansion and search nested lists. The search is case insensitive and does not have to start from the beginning of the word for example ‘merica’ will match ‘America’.

best-jquery-plugins

Download | Demo

16. jQuery InstaPull by Kirk Bulis

This is plugin for jQuery users who want to pull Instagram photos according to tag and likes into a specified container without any fuss.

Download

17. jQuery ScrollWatched by Kirk Bulis

This is a jQuery plugin for triggering event handlers when an element scrolls in/out of view.

best-jquery-plugins

Download

18. jQuery Twitter Autolink by Graham Swan

This jQuery plugin automatically creates links for URLs, email addresses, @-mentions, and hashtags in embedded tweets.

best-jquery-plugins

Download

 

19. jQuery Sticky by Bruno Tarmann & Gareth Nolan

Sticky is a jQuery plugin to easily add functionality to fix elements to the top of the page on scroll.

Download

반응형
반응형

35 Stunning jQuery Tutorials For Web Developers

http://inspiretrends.com/jquery-tutorials-for-web-developers/

Make an Animated Alphabet using Keypress Events in jQuery

Animated Alphabet on Keypress

Lights Out – Dimming/Covering Background Content with jQuery

Dimming Background Content

LATERAL ON-SCROLL SLIDING WITH JQUERY

Lateral On-Scroll Slider

NATURAL LANGUAGE FORM WITH CUSTOM INPUT ELEMENTS

Natural Language Inputs

SIMPLE YOUTUBE MENU EFFECT

Simple YouTube Menu Effect

Sliding Boxes and Captions with jQuery

Sliding Box Captions

How to Create Accordion Menu (CSS3+jQuery)

Accordion Menu

Creating Android Dock Using jQuery & CSS3

CSS3+jQuery Android Dock

Creating “Next Level” Search Form Using jQuery & CSS3

Expanding Search Fields

Flyout Image Slider Using jQuery & CSS3

Flyout Image Slider

How to grab Dribbble feed with jQuery and CSS3

jQuery-Powered Dribbble Feed

Auto Moving Submenu Using jQuery

Rotating Dropdown Submenu

Stylize Your Own Checkboxes

Styled Checkboxes

How to Create a Walking Navigation

Walking Navigation

Creating Consecutive Slide Using jQuery

Consecutive Item Slider

DeviantArt API Instant Search App using Ajax & PHP

DeviantART Instant Search

Making Draggable Webpage Elements using jQuery

Draggable Page Elements

Building an Image Slideshow UI Switcher with jQuery

Image Slideshow UI Switcher

How to Build an iOS-Style Content Slider using jQuery

jquery-tutorials-1

Making Better Select Elements with jQuery and CSS3

Better Select Menus

Building A Step-By-Step Guide Using Intro.Js [Tutorial]

Guided Website Tour

Make a Jquery and CSS3 powered Lightbox Gallery

jQuery Lightbox Gallery

Web Design: Drag And Drop With JQuery UI Sortable

jQuery UI Sortable

Creating A Volume Controller With JQuery UI Slider

jQuery Volume Slider

Magnifying glass for image zoom using Jquery and CSS3

Magnifying Glass Effect

Mobile App Design/Dev: Building Navigation With JQuery

Mobile App Navigation Menu

Quick Feedback Form w/ PHP and jQuery

Quick Feedback Form

Cycle Through Images on Hover with jQuery

Auto-Cycle Images

Generating Files with JavaScript

Generate File Downloads

Mini Help System with jQuery

jQuery Help System

Making an Interactive Picture with jQuery

jQuery Interactive Picture

Mini AJAX File Upload Form

Mini-Ajax File Upload

Create a Beautiful Password Strength Meter

Password Strength Indicator

Let’s Make A Simple AJAX Note Taking App

Simple Note Taking Webapp

 

반응형
반응형

Free jQuery Slideshows and Carousels

Slideshows

Coin Slider

Features:

  • Unique transition effects
  • Flexible configuration
  • Linking images
  • Compatible with Android and iPhone
  • Auto slide
  • Lightweight (8Kb)
  • Fully customizable using CSS
Coin Slider

Download

Anything Slider

Features:

  • Slides are HTML content (can be anything)
  • Navigation tabs are built and added dynamically (any number of slides)
  • Optional custom function for formatting navigation text
  • Auto-play (optional feature, can start playing or stopped)
  • Infinite/continuous sliding
  • Pauses auto-play on hover (option)
Anything Slider

Download

WOW Slider

Features:

  • Awesome and unique transitions
  • Fully responsive
  • Graceful degradation to CSS-only slider
  • All browsers, all devices
  • Search engine friendly
  • Lightweight – 4-12Kb
WOW Slider

Download

Camera

Camera slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing http://gsgd.co.uk/sandbox/jquery/easing/ and a customized version of jQuery Mobile http://jquerymobile.com/ to use Camera with mobile devices. These plugins are included in the zip download, but do check the links for newer versions.

Camera

Download

SlidesJS

Features:

  • Responsive: create dynamic slideshows that adapt to any screen
  • CSS3 transitions: animations that run smoothly on modern devices
  • Touch: swipe support that tracks touch movements on supported devices
  • Easy setup: get going fast with the easy-to-use examples
SlidesJS

Download

iView Slider

Features:

  • Responsive down to mobile (applies for slider area and images)
  • Touch gestures navigation for iOS, Android and other touch devices
  • Highly flexible and customizable
  • 35 transition effects available
  • Animated HTML captions with custom effects (fade, move top, move right…)
  • Extremely simple configuration
  • Easily customizable via CSS file
iView Slider

Download

FlexSlider

Features:

  • Simple, semantic markup
  • Supported in all major browsers
  • Horizontal/vertical slide and fade animations
  • Multiple slider support, Callback API, and more
  • Harware accelerated touch swipe support
  • Custom navigation options
  • Compatible with the latest version of jQuery
FlexSlider

Download

Slidorion

A combination of an image slider and an accorion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion is a great alternative to the traditional jQuery slider.

Slidorion

Download

jQuery Slidershock

Slidershock is the most complete and responsive jQuery/WordPress slider on the web. It is currently available for WordPress as a plugin and a jQuery code for non-WordPress environments. Slidershock can be used to slide images and text, and allows the addition of captions to slides. The free version has 10 of the 31 available effects in the premium version.

Download

Simple jQuery Fullscreen Image Gallery

This is actually a tutorial, but the work files are available and the end result is a beautiful gallery that was too nice to leave out of this round up.

Simple jQuery Fullscreen Image Gallery

Download

Supersized

Features:

  • Resizes images to fill the browser while maintaining image dimension ratio
  • Navigation controls with keyboard support
  • Integration with Flickr – pull photos by user, set or group
  • Cycles background via slideshow with transitions and dynamic preloading
  • Core version available for those that just want background resizing
Supersized

Download

Sideways

Sideways image gallery is made by implementing some scripts and tutorials and some CSS3. It utilizes the jQuery UI, jQuery Easing and jQuery mousewheel plugin.

Sideways

Download

AD Gallery

Features:

  • Choose effect: slide in, fade in, etc
  • Keyboard navigation arrows
  • Images are preloaded, and if they aren’t finished loading, a loading image will appear
  • Callbacks on different events that have access to the internal object, so you can access all internal methods
  • Permalink to a specific image, either by index or id
AD Gallery

Download

Flux Slider

Flux slider is a CSS3 animation based image transition framework.

Flux Slider

Download

Responsly.js

Features:

  • Works from large monitors to laptops, to tablets to mobiles
  • Pure CSS styling
  • CSS3 based transitions (hardware accelerated where possible)
  • Animations work on all modern browsers including mobile
  • Simple lightweight design, adds little to your download size
  • Can be heavily customized by editing CSS
Responsly.js

Download

Carousels

jCoverflip

Features:

  • Easy to use: Drag or click to showcase featured content
  • Flexible Integration: The widget can be run as a Drupal moule or as a standalone widget for your website
  • Easy Installation: Simply download, configure and push content to the jCoverflip widget
  • Ready to Use: Out-of-the-box, the widget utilizes a clean default style
  • Customizable: Control the number of items, colors, fonts and styles through CSS
  • Open Source: Distributed using the GNU General Public License and built using jQuery and jQuery UI
jCoverflip

Download

Cloud Carousel

Features:

  • Works with most browsers – tested on IE6-IE9, Firefox, Chrome, Opera, Safari
  • Accurate 3D perspective
  • Optional auto reflections – no need to modify your images or add server code
  • Easy integration with basic valid HTML and a tiny bit of JavaScript
  • Small 5Kb (minified) script
  • Degrades gracefully with JavaScript turned off
  • Fully accessible with no CSS or text only browsers
  • Works with other plugins such as Slimbox, and preserves your links and mouse events
  • Optional mouse wheel support
Cloud Carousel

Download

carouFredSel

Features:

  • Fully customizable and skinnable, filled with loads of custom events and options
  • Scrolls automatically or by using buttons, keys, the mousewheel or by dragging and swiping
  • Optionally responsible/fluid/liquid out of the box
  • Supports variable item-sizes (also with a variable number of visible items)
  • Built in keyboard- and mouse-navigation and pagination
  • 9 built in effects such as scroll, fade, crossfade, cover and uncover
  • Capable of using CSS3 transitions
  • Align (left/center/right) items inside the available width/height
  • Dynamically add and remove items to/from the carousel
  • GET and (re)SET the configuration options after creation
carouFredSel

Download

jQuery Liquid Carousel Plugin

Liquid carousel is a jQuery plugin intended for liquid designs. Every time the container of the carousel gets resized, the number of items in the list change to fit the new width.

jQuery Liquid Carousel Plugin

Download

Agile Carousel

Agile Carousel is highly customizable so youu can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS.

Agile Carousel

Download

jQuery Infinite Carousel Plugin

Features:

  • Just 11Kb compressed
  • Displays images and videos
  • Captions and links
  • Thumbnail options
  • Circular ring timer
  • Keyboard navigation
  • Callback functions
  • Works in all major browsers
jQuery Infinite Carousel Plugin

Download

Circular Content Carousel

A simple circular content carousel. Click on the ‘more’ link to move the items to the left and a content area will slide out. Navigate through the carousel where each step will reveal the next or previous content box with its expanded content.

Circular Content Carousel

Download

Elastislide

Elastislide is a responsive jQuery image carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

Elastislide

Download

Tiny Carousel

Features:

  • Can slide vertically or horizonally
  • Supports navigation by button or paging
  • Animation time can be set in milliseconds or to ‘instant’
  • Easily customizable
  • Supports all current browsers (Firefox, Internet Explorer 6+, Safari, Opera, Chrome)
  • Lightweight – only 100 lines of code, 2.29Kb
Tiny Carousel

Download

jQuery Feature Carousel

Features:

  • Arrange divs of content in a 3D rotating carousel
  • Currently supports one flanking ‘feature’ on either side of center feature
  • Show clickable indicators (blips) of what feature is currently at the center
  • Display text overlay on bottom of feature
  • Speed, effects, locations and more are all changeable
  • Works in Chrome, Firefox, Safari and IE6+
  • Automatically preloads images before firing up the carousel
jQuery Feature Carousel

Download

jQuery Cycle Plugin

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. The plugin provides a method called ‘cycle’ which is invoked on a container element. Each child element of the container becomes a ‘slide’. Options control how and when the slides are transitioned.

jQuery Cycle Plugin

Download

 

반응형
반응형

TogetherJS: Easy collaboration for your website

 

TogetherJS is an open source plugin from Mozilla for adding collaboration tools and features to your website. It makes it simple to let your users collaborate right on your site in real time.

togetherjs

반응형

+ Recent posts