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

    qpScroll : jQuery Quick Parallax Scroll Plugin

    qpScroll : jQuery Quick Parallax Scroll Plugin

    qpScroll is a jQuery plugin that creates a super quick way of putting together a simple parallax background for a page, all using css background-images.

    I have kept it super simple – the three major settings are: – how much faster/slower do images move compared to the scroll speed – how much faster/slower does each image scroll compared to one before it – how much does each image cover the one before it

    CSS3 Progress Button Styles

    CSS3 Progress Button Styles

    Today we’d like to share some progress button styles with you. You surely know “Ladda” by Hakim El Hattab, a UI concept that indicates progress directly on the button that invokes a loading action. Some of the buttons have a built-in progress bar and today we’d like to explore that idea with some creative progress button styles. Using perspective will allow us to create some fun 3D effects besides the flat “filling” styles

    Cube Portfolio : Responsive jQuery Grid Plugin

    Cube Portfolio : Responsive jQuery Grid Plugin

    Cube Portfolio is a powerful jQuery plugin that provides beautiful animated filtering, custom captions and it’s perfect for portfolios, galleries, team members, blog posts or any other ordered content.It plays nice with your existing HTML and CSS, making it a great choice for dynamic and responsive layouts.

    Features:

    • Responsive & centering layout
    • Fully customizable: more than 20+ options
    • You can add unlimited number of items
    • You can add items usign AJAX
    • Responsive built-in lightbox with support for images, youtube and vimeo.
    • Built-in single ajax page with support for any HTML
    • 6 starter templates
    • 10 animations for item grids
    • Filter by categories: group your entries by categories
    • Support for dropdown filtering
    • Lazy Loading function
    • Using CSS Animation with fallBack to jQuery
    • Powerfull API : init, destroy, filter, appendItems, showCounter
    • Adjustable speed, transition, easing and effects for each caption