Best jQuery Core Java Script Plugins & Tutorials with Demo

    iWantHue : Generate palettes of Colors

    iWantHue : Generate palettes of colors

    iWantHue allows you to generate palettes of colors. It is about mastering the properties of a palette by setting a range of Hue, Chroma (unbiased saturation) and Lightness. You can generate palettes of any size or just get the generator for a javascript project. The algorithm optimizes the perceptive distance in the color subspace, ensuring an optimal readability.

    How it works:

    1. K-means or force vector repulsion algorithms ensure an even distribution of colors
    2. The CIE Lab color space is used for computation, since it fits human perception
    3. The Hue/Chroma/Lightness color space is used to set constraints, since it is user-friendly

    intention.js : A library for intentionally dealing with responsive design

    intention.js : A library for intentionally dealing with responsive design

    Intention.js is a lightweight tool for responsive design developed at Dow Jones that manipulates the DOM via HTML attributes. The methods for manipulation are placed with the elements themselves, so flexible layouts don’t have to be so abstract and messy.

    What should an element’s classes be on mobile vs tablet? Where should advertising markup be placed when viewed on a desktop browser? Does the page require an alternate slideshow widget on touch-enabled devices? These are all scenarios that Intention.js can handle, altering the page based onusers’ devices. Context.js creates a set of common page contexts for width thresholds, touch devices, high-res displays and a fallback.

    Device.js : Write Device based conditional CSS and JavaScript

    Device.js : Write Device based conditional CSS and JavaScript

    Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).

    HTML5 Drag And Drop To Create A Shopping Cart

    HTML5 Drag And Drop To Create A Shopping Cart

    The release of HTML5 introduced native Drag and Drop functionality to modern web-browsers. This means it is now possible to have movable elements on screen without the aid of frameworks like jQuery. This week we’ll be taking advantage of the drag and drop functionality to create a basic shopping cart. The basic functionality we’ll cover, will be adding an item to the cart and if it already exists updating the quantity and totals.

    Animated Checkboxes and Radio Buttons with SVG

    Animated Checkboxes and Radio Buttons with SVG

    By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected.

    Matrix Effect Using HTML5 and Javascript

    Matrix Effect Using HTML5 and Javascript

    Now a days I am playing around with HTML5 Canvas API and Java Script. It’s an amazing option to create animations.

    This weekend I saw The Matrix movie.This film known for it’s visual effect.
    I wrote one Matrix function In which I am filling canvas with “Matrix” word at random locations using Canvas fillText method. And I am calling that function using Javascript setInterval Method.

    Megazoom Image Viewer with JavaScript & CSS3

    Megazoom Image Viewer with JavaScript & CSS3

    Megazoom plugin is a powerful, versatile, easy to use and customize image navigator for displaying large images prepared for showcasing products (high resolution product images, e.g. clothes, cars, technical schemes etc), displaying maps, and any other images, with its zooming, panning, dragging, navigation controls, scrollbar, zoom buttons,and highly customizable markers.It has a responsive layout making it perfect for any type of page layout.

    Features:

    • Tons of options (check them out in our live previews).
    • Easy to use and install.
    • Fully Responsive & Mobile Optimized (Smartphones & Tablets).
    • Fast CSS3 & JavaScript engine with fall back on CSS1 for older browsers like IE7 or IE8 (exceptional performance!).
    • Responsive layout.
    • Three dispay types: responsive, fullscreen and lightbox.
    • Support for large image resolution, we have made successful tests with images up to 6000px width and/or height.
    • The zoom factor(maximum zoom level) and start/initial zoom factor (initial zoom level) can be specified.
    • The animation zoom speed and animation pan speed. can be set.
    • Double clik zoom and double clik zoom factor (optional).
    • Mouse wheel support on desktop.
    • Mouse drag on desktop or touch drag on mobile.
    • Gestures event support on mobile, the image can be zoomed with two fingers!.
    • Keyboard support (optional).
    • Animated preloader, the preloader text can be modified.
    • Navigator window (optional).
    • Complete control buttons bar with buttons.

    Animated Border Menus with CSS3 & JavaScript

    Animated Border Menus with CSS3 & JavaScript

    A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples.

    Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. Safari and Mobile Safari).

    HTML5 JavaScript Gem Game With Saved Scoreboard

    HTML5 JavaScript Gem Game With Saved Scoreboard

    Everyone is talking about HTML5 games and how they are the future of mobile gaming, but where do you start? What is it you need to do to create a game? In short the answer is actually “not much”, everything that I will be using in todays tutorial I’ve already covered in various different guises in my previous tutorials. We’ll be using only pure JavaScript and CSS in this tutorial and the images.

    Flipload.js : Flipping HTML elements to show a loading indicator easily

    Flipload.js : Flipping HTML elements to show a loading indicator easily

    Flipping HTML elements to show a loading indicator easily.

    It’s compatible with:

    • Chrome
    • Firefox
    • Safari