jQuery Adaptive Backgrounds Plugin

jQuery Adaptive Backgrounds Plugin

A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.

Exploding Blocks with CSS and Javascript

Exploding Blocks with CSS and Javascript

Ever wanted to make your HTML blocks explode when it’s clicked or touched? Well I did, and today I’m going to show you how I went about doing it. We’re mainly using CSS, but that’s all being run by Javascript just for ease. Read on to learn how it was done!

So I was kind of inspired by this little gif I saw that had a block explode when it was clicked, and I thought that was really cool. So I started thinking, how would you do that with CSS and maybe some Javascript? Well I figured it out using a bit of math, and it functions as a pretty cool delete button.

DictAndList : jQuery plugin for editable Dict and List html

DictAndList : jQuery plugin for editable Dict and List html

It is a plugin for editable Dict and List html, their values can be attached into form as stringified JSON when processing jQuery post.

Infographic Charts and Graphics HTML Tags Library

Infographic Charts and Graphics HTML Tags Library

This custom JS charting library created by PSDDude from 0 implements custom HTML tags which allow creating charts and graphs for infographics.

It is a light-weight, pure JavaScript charting library (NO jQuery or other libraries required) which makes use of HTML5 technologies and works on all modern browsers including IE, Chrome, Firefox, Opera, Safari.To use it you do not need to know any JavaScript, as all the charts are added as HTML tags. You can follow the very straight forward documentation which also contains examples.

The library allows creating: – Piecharts and doughnuts – Shape graphs – you can transform any image(PNG) into a graph – Shape bar graphs – use any image (PNG) to construct a bar chart – Line graphs – Barchart graphs

jQuery Draggable Background Plugin

jQuery Draggable Background Plugin

A jQuery plugin to make background images draggable.

Facebook Style Search Friends using jQuery

Facebook Style Search Friends using jQuery

In this tutorial I have used jQuery to search friends like facebook style. With just a few lines of jQuery code and a small text input box you can add a search members / users / friends to any web projects.Previously I published the tutorial like live text search using jQuery.

Also I have used javascript RegExp function to performs case insensitive search.

The jQuery code for this trick is really easy and all we are doing is basically getting the input text value from the search box & checking that value against our list of friends in the “friendslist” div and showing those friends matches the searched keyword. The count of the number of matched friends is then displayed in our “result_area” div tag.

jQuery Handwriting Plugin

jQuery Handwriting Plugin

This is a javascript based tool that uses the canvas object to draw symbols. Each symbol is defined using multiple curves and each curve consists of start, end and control point. The tool comes with two sets of curves with limited number of symbols, but more symbols and more sets can be created and added to the tool in the future. The tool allows decoration of the curves with images defined by user. While the tool features more than 20 options to customize it can be used in a simple configuration.

Features:

  • two sets of symbols The tool features two sets of symbols – one similar to Verdana font, and another one with more calligraphic look.
  • 85 symbols in each set These are A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 . , ! ? ( ) [ ] ; : @ $ % & * = + – / ’ ” > <
  • size of animated symbols Can be set using a scale parameter.
  • size of line height
  • color of text
  • stroke width
  • top/left offset
  • text alignment
  • curves speed drawing.
  • Pen can use different image set by user. Pen ball must be in top/left corner of pen image. Pen can be hidden.
  • images Images can be used in the animation and are managed with several parameters.
  • stroke above image.
  • pause
  • replay.
  • finish effect.
  • overall speed.
  • complete/

jQuery Waypoints

jQuery Waypoints

Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

lattice : jQuery 2-dimensional HTML grid slider plugin

lattice : jQuery 2-dimensional HTML grid slider plugin

A jQuery plugin that creates a 2-dimensional HTML grid slider from cell elements in a container.

Features:

  • Navigate slides in two dimensions.
  • Generates a map of thumbnails representing each slide to navigate.
  • Specify thumbnail images for each slide. Thumbnails can be resized.
  • Restrict paths that can be followed.
  • The slider and the slides themselves are responsive
  • Use crop settings to crop to one of 9 areas of a slide as the slider decreases in width/height
  • Can dynamically generate thumbnails via a canvas screenshot of a slide. Thanks @niklasvh for the html2canvas project!

jQuery Responsive Tabs Plugin

jQuery Responsive Tabs Plugin

jQuery plugin for creating responsive tabs. The controls behave like regular tabs above a specified screen width (defined by an editable media query in the associated css file), and behave like an accordion on screens below that width.

Features:

  • Progressive enhancement – uses semantic heading/content markup – tabs and accordion are created entirely with jQuery
  • Uses Aria attributes and roles to aid screen reader accessibility
  • Tabs and their content are fully accessible via keyboard
  • Supports multiple sets of tabs on same page