Archive for 2013

    Check File Size Before Form Submit with Html5 & jQuery

    Check File Size Before Form Submit with Html5 & jQuery

    Checking the file size before submitting the form has always been like a forbidden fruit to us, that’s because there was no easy way to access clients’ file system, which can return the exact size of a file before sending it to the server. Old browsers have no inbuilt capability, and Javascript won’t do it, so normally people would use flash to calculate the file size in HTML upload forms, and most of us just preferred to skip the client part, letting server handle the problem.

    But in recent years, the HTML5 is doing wonders for the web browsers. It comes with many features, including the client-side file objects manipulation (File API). Which means we can now throwaway the old methods, and adopt to this new system, which not only returns file properties, but it opens a whole new set of possibilities.

    Scrolld.js : jQuery Unique Dynamic Page Scrolling

    Scrolld.js : jQuery Unique Dynamic Page Scrolling

    Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. Scrolld.js is specifically designed to support responsive designs and turns navigating long pages into a simple task. Scrolld.js is intended for easy use and is fully deployable within minutes.

    ion.zoom : Image zoom lightbox jQuery plugin

    jQuery lightbox plugin for image zoom

    Image zoom lightbox jQuery plugin.

    Description:

    • ion.zoom — easy image lightbox jQuery plugin for small galleries. Allow to zoom images at place.
    • Supports keyboard controls with ESC, LEFT and RIGHT button.
    • Supports multiple independently operating galleries in one page.
    • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
    • Works on touch screen devices (iPhone, iPad, etc.).

    Cream Soda Responsive jQuery News Ticker

    Cream Soda Responsive jQuery News Ticker

    Cream Soda jQuery Ticker is an ultra light, responsive, plug and play component that you can drop straight into your website. jQuery Ticker looks professional, with clean styling and elegant sliding animations. This version of Cream Soda jQuery Ticker supports three modes; vertical, horizontal and mini.

    Features:

    • Responsive
    • Cross Browser Compatible
    • Light & Ultra Customisable
    • Minimal coding required
    • Three ticker types (Vertical, Horizontal & Micro)
    • Custom Animation Options
    • Custom CSS Options
    • Highlight featured items
    • Excerpt/Truncate Options
    • Navigational Buttons
    • Supports imagery
    • Auto play options
    • Smart pausing and interaction options
    • Accepts static content or XML/RSS feed content
    • Custom links from each item
    • Custom link targets
    • Manage item lengths

    jQuery Flot Animator

    jQuery Flot Animator

    Flot Animator is a free jQuery plugin that will add smooth or gradual animations to Flot charts.It will allow you to highlight and draw attention to some charts and/or series by easily adding animation to your existing charts.

    This plugin will read the original data array and will build a second array containing all the frames needed for the animation: the new array length will be equal the total animation frames.

    funcunit.js : jQuery based functional Test Suite

    funcunit.js : jQuery based functional Test Suite

    A functional test suite powered by jQuery and the test framework of your choice.FuncUnit enhances assertion libraries like QUnit and Jasmine, enabling them to simulate user actions, easily test asynchronous behavior, and support black box testing. Use it’s terse jQuery-like syntax to superpower your functional or unit tests.

    jQuery Wave Plugin

    jQuery Wave Plugin

    jQuery plugin for drawing waves using HTML5 canvas 2d.

    Autumn.js : jQuery plugin to Generates Deterministic Colors

    Autumn.js : jQuery plugin to Generates Deterministic Colors

    Autumn generates deterministic colors. It’s great for coloring tags, navigation, and icons.Autumn might look like a random color generator, but it’s not random. The demo below always generates the same colors.If you look carefully, you’ll see the sames hues being repeated (red, green, blue, orange…). Autumn is a hash function of sorts. It hashes keys into colors. In the previous two demos, the keys are based on order (0, 1, 2, 3…).

    Autumn has the following goals:

    • Colors shouldn’t interfere with text readability.
    • Colors in a sequence should be easily distinguishable, especially consecutive colors.
    • Colors should repeat infrequently.

    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.

    Blindify : jQuery Slideshow featuring a blinds effect transitioning

    Blindify : jQuery Slideshow featuring a blinds effect transitioning

    Blindify is a jQuery plugin which creates a slideshow featuring a blinds effect transitioning (either vertical or horizontal) between a list of images.

    I saw a photograph in a printed magazine which inspired me to create a JavaScript effect that would make any photo look exactly like that. After I created this effect, I altered the code into a proper transition effect to be used as a slideshow, using multiple images. I am now going to walk you through how it was built.