Showing posts from August, 2013

Android Pattern locker plugin - Javascript

This is my new JavaScript plugin for generating Android like Pattern locker for web applications.
This is fully customizable plugin. Don't know where it can be used.... Just developed in my own interest.... please suggest some improvements for the same..... I think the captcha can be replaced with this plugin.

I have created the plugin using raphaeljs.
DEMOFork this on GitHub How to use? Step 1: Include the  following scripts in your head section (click here to download raphaeljs , click here to download pattern.js)<script src="raphael-min.js" type="text/javascript"></script> <script src="pattern.js" type="text/javascript"></script>
Step 2: Create an instance for the pattern with your custom properties and draw the pattern within the container with instance.draw(container).
var s = new Pattern(properties); s.draw(container);
PropertiesProperty DescriptionDefault Valuedimension Dimensio…

How to change the URL without Page Reload

Before start, you have to understand the HTML5 History API,

Following code is used to change the url without page load,

window.history.popstate(state,title,url);statecan be any JSON data structure. It is passed back to the popstate event hander, which you’ll learn about in just a moment. We don’t need to track any state in this demo, so I’ve left it as null.titlecan be any string. This parameter is currently unused by major browsers. If you want to set the page title, you should store it in the state argument and set it manually in your popstatecallback. urlcan be, well, any URL. This is the URL you want to appear in the browser’s location bar.
Change Event Handler,

window.addEventListener("popstate", function(e) { //your code });
The basic methods of history object are:
window.history.length: Returns the number of entries in the joint session history.window.history.state: Returns the current state object.window.history.go(n): Goes backwards or forwards by the …

Clear Lens - JQuery Plugin

This is my New jQuery Plugin.  You can find the working example at Hope it will be useful to some one.... 
I have used "pixastic" for image processing. 
To implement the plugin you have to include the pixastic library. and call the plugin in $(window).load event, Beacuse for image processing first the image should be loaded. Hope you all know $(window).load will be triggered after all the assets are loaded.

DEMOFork this on GitHub How to use? It is very simple to implement the plugin 1. include you jQuery  2. include Pixastic Library 3. include the plugin code 4. Add attribute fitler="blur"for images that you want to apply5. on $(window).load Event call the following code
$('img').blurLens(); or
$('img').blurLens({ width: 200, height: 200, blur: 5 }); width - Width of lens
height - Height of lens
blur - Blur Amount JQuery (function ($) { $.fn.blurLens = function (lensproperty) { return $(this).e…