Why use JPEG with polyclip.js instead of PNG? Because PNG images can’t be as small as JPEG images when you’re dealing with photographic images, and you know how an image’s file size can affect a page’s loading time. What the script does is cut points on the image using x and y values provided by the user. If you know how to create an image map then using polyclip.js should be easy for you to use.

This plugin’s practical value can be subject for debate when you’re dealing with a lot of images but if it’s only for a handful of images, it can be a huge byte-saver.

The polyclip.js is supported by most browsers, including IE7 and 8 but it’s going to require the Excanvas JavaScript library which polyfills canvas using VML for it to function properly. It weighs in at only 2kb but for IE7 and 8, there’s going to be an additional 11kb.

You can download the latest version of polyclip.js over at GitHub. To know more about this plugin/library, you can read about it here.

Incoming search terms for the article:

• html5 library

One of the coolest things about jQuery is that you can experiment with it, like with this animated robot. Here is a sample of how one can do this, based on Anthony Calzadilla’s design.

It’s easy to modify and loads fast, with the end product similar to Flash designs but with more advantages. Web designers and developers are sure to find this tutorial inspiring!

Click on the above image to see the demo.

Below are the codes for this awesome animation.

Markup

<div id="wrapper">

<div id="cloud-01">

<div id="cloud-02">

<div id="mountains-03">

<div id="ground">

<div id="full-robot">

<div id="branding"><h1>Robot Head.</h1></div>

<div id="content"><p> Robot Chest.</p></div>

<div id="sec-content"><p> Robot Pelvis.</p></div>

<div id="footer"><p> Robot Legs.</p></div>

</div>

</div>

</div>

</div>

</div>

</div>

CSS Style

h1, p { position: absolute; left: -9999px; }

div {position: relative;}

#wrapper { background: #bedfe4 url(../images/sun.png) no-repeat left -30px; border: 5px solid #402309;}

#cloud-01 { background: url(../images/clouds-01.png) no-repeat left -100px; }                                                         

#cloud-02 {                  background: url(../images/clouds-02.png) no-repeat left top; }

#mountains-03 { background: url(../images/mountain-03.png) no-repeat left bottom; }

#ground { background: url(../images/ground-05.png) no-repeat left bottom; }

#full-robot { width: 271px; }

#branding {
                    background: url(../images/robot-head.png) no-repeat center top;
                    width: 271px;
                    height: 253px;
                    z-index: 4;
                    }

#content {
                    background: url(../images/robot-torso.png) no-repeat center top;
                    width: 271px;
                    height: 164px;
                    z-index: 3;
                    margin-top: -65px;
                    }

#sec-content {
                    background: url(../images/robot-hips.png) no-repeat center top;
                    width: 271px;
                    height: 124px;
                    z-index: 2;
                    margin-top: -90px;
                    }

#footer {
                    background: url('../images/robot-legs.png') no-repeat center top;
                    width: 271px;
                    height: 244px;
                    z-index: 1;
                    margin-top: -90px;
                    }

jQuery Javascript

$(document).ready(function(){
$('#cloud-01').css({backgroundPosition: '0 -80px'});
$('#cloud-02').css({backgroundPosition: '0 -30px'});
$('#mountains-03').css({backgroundPosition: '0 50px'});
$('#trees-04').css({backgroundPosition: '0 50px'});
$('#ground').css({backgroundPosition: 'left bottom'});
$('#branding').css({backgroundPosition: 'center 0'});
$('#content').css({backgroundPosition: 'center 0'});
$('#sec-content').css({backgroundPosition: 'center 0'});
$('#footer').css({backgroundPosition: 'center 0'});
$('#wrapper').css({overflow: "hidden"});

                    $('#klicker').click(function(){
                                         $('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 20000);
                                         $('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 20000);
                                         $('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 20000);
                                         $('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 20000);

                    startHim();

                    $("#full-robot").animate({left:"50%",marginLeft:"-150px"}, 2000);
                    setTimeout("leaveScreen()",15000);
                    });

});

var num = 1;

function startHim(){
                    num++;
                    $("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
                    $("#content,#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num+"px"},150);
                    if(num<4){
                                         setTimeout("startHim()",300);
                    } else {
                                         setTimeout("bounceHim()",300);
                    }
}

function bounceHim(){
                    $("#sec-content,#branding").animate({top:"-=4px"},150).animate({top:"+=4px"},150);
                                         $("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150);
                    setTimeout("bounceHim()",300);
}

function leaveScreen(){
                    $("#full-robot").animate({left:"100%",marginLeft:"0px"}, 2000);
}

Incoming search terms for the article:

• $(#content) animate margin-right
• animated pictures
• any simple cartoon borders
• html5 jquery animation robot
• png cartoon
• robotics animation jquery

You can check out the full tutorial HERE.

Incoming search terms for the article:

• interactive jquery map
• jquery interactive map
• javascript heat map
• jvectormap tutorial
• jvectormap
• jvectormap automatic color
• jvectormap converter
• heat map tutorial
• jvectormap database
• jvectormap maker

Let’s being with the HTML markup:

As you can see, the code is pretty much straightforward. We have the input element “button” to create the sticky notes, and a container <div> with an id (“board”) in which to place them. This also includes the reference tags to the CSS style sheets and the JavaScript file.

The HTML for our posticks will be as follows:

Each postick <div> will have a subdiv called “toolbar” so we will have a place for us to put a close (x) button in. We’ll also have another subdiv called “editable” with an HTML5 attribute “contenteditable”; this will contain the text that the user will input in the sticky note.

And now for the CSS part, which is a lengthy one:

Like the HTML code, the CSS code is also straightforward. We first reset the body tag, then we stylize the button (input) that creates the posticks, and then stylize the postick itself and the elements inside it (i.e. the delete button, toolbar, etc.).

And now for the JavaScript:

I believe the JavaScript is pretty much self-explanatory since it also already contains some notes about each part of the code, and especially if you already know enough about JavaScript.

Anyway, you can check the demo of the tutorial here. Also, you can get the full source code (.zip) here. I hope you enjoy creating and using your posticks!

Incoming search terms for the article:

• jquery sticky notes
• sticky div jquery
• sticky notes windows with html5 and css3
• ajax sticky notes script
• jquery html5 lightbox
• sticky notes using jquery with storing facility
• php script sticky notes
• node js file uploader html5
• jquery sticky notes script
• jquery sticky note script

Paper.js is based on and largely compatible with Scriptographer, a scripting environment for Adobe Illustrator with an active community of scripters and more than 10 years of development.

Requirements: -
Demo: http://paperjs.org/examples/
License: MIT License

Incoming search terms for the article:

• paper js editor
• paper js
• paperjs
• scriptographer
• Scriptographer art
• paper js charts
• Paper js maps
• paper js graphs
• paper js examples
• paper js graph

Guiders can be attached to an element on your web page, or they can be centered on their own.  Attaching a guider to an element on your page is as simple as using the appropriate jQuery selector and a position value 1-12.  The position value determines which direction the guider attaches to the element, according to the numbers on an analog clock.

Requirements:
Demo: http://blog.optimizely.com/introducing-guidersjs-an-open-source-guider
License: Other License

Incoming search terms for the article:

• guiders js
• javascript guiders
• guiders javascript
• own dialog box java
• Guiders js demo
• Guiders-JS
• Guiders-JS demo
• guider js
• demo Guiders js
• js library

Micro-frameworks  is a website which is a directory of tiny (<5kb) JavaScript libraries and frameworks. Micro-framework does one thing and one thing only —and does it well. No cruft, no featuritis, no feature creep, no excess anywhere.

Microjs.com helps you discover the most compact-but-powerful microframeworks,
and makes it easy for you to pick one that’ll work for you.

Requirements: -
Demo: http://microjs.com/
License: MIT License

Incoming search terms for the article:

• javascript microframeworks
• javascript micro framework
• microframeworks javascript
• php micro libraries
• javascript libs
• microframework js
• javascript micro library
• micro php libraries
• micro php framework
• microframework javascript

CamanJS is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which is only growing as the community makes more plugins. It has a powerful layering system, much like the one present in Photoshop and GIMP, that makes the sky the limit for your creativity.

Using CamanJS is extremely simple, but also very flexible. All of the functionality is accessed by calling the Caman() function.

One very important thing to note: due to browser security restrictions, CamanJS can only modify images that come from the same domain as the page in which it’s loaded unless you specify a proxy.

Requirements:
Demo: http://camanjs.com/examples
License: Other License

Incoming search terms for the article:

• html5 image manipulation
• javascript image manipulation library
• photo manipulation with js and html5
• camanjs examples
• javascript image manipulation
• javascript library photo color manipulation
• javascript library manipulate
• javascript photo editing library
• javascript library images
• javascript library image edit

Incoming search terms for the article:

• guiders js like mootools
• guiders js mootools
• mootools plugins 15