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 may download a copy of the light version here or the full version here.

Below are snippets of the plugin:

CSS

#magazine{

width:800px;

height:400px;

}

#magazine .turn-page{

width:400px;

height:400px;

background-color:#ccc;

}

HTML

<div id='magazine'>

<div> Page   1 </div>

<div> Page   2 </div>

<div> Page   3 </div>

</div>

jQuery

$('#magazine').turn();

That’s it! The plugin requires jQuery 1.7 or later and only weighs in at 15K. It also works on tablets and smartphones.

Incoming search terms for the article:

• jquery multi book flip
• html5 design effect
• jquery book
• animated page flip demo in jquery
• turn js flip turning
• pageflip mootools
• page flip effect html5
• jquery page flip demo
• jquery book flip
• jquery

Click on the image for the demo.

Download the zip file.

CSS

.slider.default

{

background-color: #D2DBEC;

border: 1px solid #299BC9;

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;

width: 200px;

height: 4px;

background-image: -o-linear-gradient(#ADC7EB, #D2DBEC);

}

.inner.default

{

background: #299BC9;

-moz-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;

-webkit-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;

}

.draghandle.default

{

width: 8px;

height: 20px;

background-color: #299BC9;

}

.draghandle.default.selected

{

background-color: #ADC7EB;

}

The above code is for the default theme, and you can change it into your theme name. Aside from the default theme, you can choose from the following theme colors: simple, blue, steel, green, dark-green, orange and red.

When your theme is all set, you can use it like so:

$('#my-slider').jqslider({theme:'YOUR THEME NAME HERE'});

Add the following in the head section of your HTML file

1. Add a reference to latest jQuery script
2. Add a reference to jqslider.js
3. Add a reference to jqslider.css

Add block element (div) within body of HTML and assign id and call jqslider initialize function.

<div id="jqslider"></div>

<script type="text/javascript">

$(document).ready(function() {

$('#jqslider').jqslider({ theme:'steel' });

});

</script>

Incoming search terms for the article:

• blogger jQuery
• jquery chart fillcolor
• jquery multi range slider
• jquery multi slider range
• jquery range slider -ui

In the meantime, you can check out the working demo here and you can download the AnchorCloud script so you can follow the instructions below and incorporate the plugin into your site immediately.

First thing you need to do is include the following script in your HTML to call the necessary functions in your .js file:

So your basic HTML structure will look like this:

Plugin Theme Options

Considering that this is still in its early stages and with limited media content support, I have to say that I personally enjoyed trying it out. That said, I can’t wait for the next release to arrive!

Incoming search terms for the article:

• anchorCloud js
• jquery anchor plugin

You can check out the full tutorial HERE.

Incoming search terms for the article:

• interactive jquery map
• jquery interactive map
• jvectormap tutorial
• jvectormap
• javascript heat map
• extra maps for jvectormap
• jqurery interactive map
• jvectormap automatic color
• jvectormap converter
• jvectormap database

Download the development version and production version zip files.

HTML

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″>

<title>tinyTips 1.0</title>

<link rel=”stylesheet” type=”text/css” media=”screen” href=”/path/to/yourStyleSheet.css” />

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>

<script type=”text/javascript” src=”/path/to/jquery.tinyTips.js”></script>

<script type=”text/javascript”>

$(document).ready(function() {

$(‘a.tTip’).tinyTips(‘light’, ‘title’);

});

</script>

</head>

<body>

<div id=”global_wrapper”>

<h1>Testing tinyTips</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<a class=”tTip” href=”#” title=”This tooltip is using the title of this anchor tag.”>Aenean ut nunc metus</a>, gravida tincidunt libero.

Proin molestie risus at odio luctus condimentum. Sed molestie bibendum orci a faucibus. Vivamus vel lorem ut augue laoreet cursus.

Maecenas vestibulum nibh non nibh viverra posuere. Sed <a href=”#” title=”This one is also using the title.”>tristique eleifend</a> elit sit amet varius.</p>

</div>

</body>

</html>

jQuery/Javascript

Place the following at the head of your page as you include the TinyTips and jQuery.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>

<script type=”text/javascript” src=”/path/to/jquery.tinyTips.js”></script>

To add tooltips, use the following:

<script type=”text/javascript”>

$(document).ready(function() {

$(‘a.tTip’).tinyTips(‘light’, ‘title’);

});

</script>

Do provide a tooltip style and content attribute.

Add the following to the stylesheet. You can create your own style by naming the class .yournameTip and use your name as the tip style. By using the dev version, you can also modify the markup for tooltips.

.lightTip                       { width: 342px; }

.lightTip .content              { width: 310px; padding: 10px; border: 6px solid #e2e2e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #ffffff; color: #020202; }

.lightTip .bottom               { height: 14px; background: url(../images/notch-white.png) top center no-repeat; }

.yellowTip                      { width: 342px; }

.yellowTip .content             { width: 310px; padding: 10px; border: 6px solid #f9e98e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbf7aa; color: #020202; }

.yellowTip .bottom              { height: 14px; background: url(../images/notch-yellow.png) top center no-repeat; }

.orangeTip                      { width: 342px; }

.orangeTip .content             { width: 310px; padding: 10px; border: 6px solid #f9cd8e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbe3aa; color: #020202; }

.orangeTip .bottom              { height: 14px; background: url(../images/notch-orange.png) top center no-repeat; }

.redTip                         { width: 342px; }

.redTip .content                { width: 310px; padding: 10px; border: 6px solid #ce6f6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #f79992; color: #020202; }

.redTip .bottom                 { height: 14px; background: url(../images/notch-red.png) top center no-repeat; }

.greenTip                       { width: 342px; }

.greenTip .content              { width: 310px; padding: 10px; border: 6px solid #a9db66; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #cae8a2; color: #020202; }

.greenTip .bottom               { height: 14px; background: url(../images/notch-green.png) top center no-repeat; }

.blueTip                        { width: 342px; }

.blueTip .content               { width: 310px; padding: 10px; border: 6px solid #36a4d9; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #90d8f0; color: #020202; }

.blueTip .bottom                { height: 14px; background: url(../images/notch-blue.png) top center no-repeat; }

.purpleTip                      { width: 342px; }

.purpleTip .content             { width: 310px; padding: 10px; border: 6px solid #8671de; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #a290f0; color: #020202; }

.purpleTip .bottom              { height: 14px; background: url(../images/notch-purple.png) top center no-repeat; }

.darkTip                        { width: 342px; }

.darkTip .content               { width: 310px; padding: 10px; border: 6px solid #303030; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #505050; color: #f8f8f8; }

.darkTip .bottom                { height: 14px; background: url(../images/notch-dark.png) top center no-repeat; }

Incoming search terms for the article:

• jquery light menu
• tinytips plugin
• path app tooltip jquery
• popup jquery TEXT IMAGE
• TinyTips document
• googleapis jquery
• tinytips js explorer 9
• tinytips js
• TinyTips jQuery Plugin
• tinytips jquery

Download the ZIP FILE.

HTML (star_rating.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JQuery-Star Comment Rating</title>

<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/star_rating.js"></script>

<style type="text/css">

#rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}

#rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; width: 0px; height: 21px; position: relative; z-index: 50; top: -21px; }

#rated { display: none; width: 138px; padding: 3px 0px 3px 2px; height: 23px; background-color: #1E1D1C; height: 17px;font-size: 11px;color: #FFC910;}

#rated div { display: block; float: left; }

#rating { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFC910; padding-left: 3px; width: 22px; }

#small_stars { height: 11px; width: 69px; background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line-height: 11px; margin-top:3px; }

#rate_edit { line-height: 17px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFF; padding-left: 9px; cursor: pointer; }

#rate_edit:hover { text-decoration: underline; }

#rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}

#rating_btns ul, #rating_btns li { padding: 0; margin: 0; }

#rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1E1D1C;

}

</style>

</head>

<body>

<div id="rating_cont">

<div id="rating_btns">

<ul>

<li>0.5</li>

<li>1.0</li>

<li>1.5</li>

<li>2.0</li>

<li>2.5</li>

<li>3.0</li>

<li>3.5</li>

<li>4.0</li>

<li>4.5</li>

<li>5.0</li>

</ul>

</div>

<div id="rating_on" >&nbsp;</div>

<div id="rated">

<div id="rating" style="height: 17px; line-height: 17px;">not rated</div>

<div> &#8211; &nbsp;</div>

<div id="small_stars">&nbsp;</div>

<div id="rate_edit">edit</div>

</div>

</div>

<input type="hidden" id="rating_output" name="rating_output" />

</body>

</html>

jQuery/Jvascript (star_rating.js)

/*

* Written by eligeske

* downloaded from eligeske.com

* have fun. nerd.

*/

$(document).ready(function(){

// hover

$('#rating_btns li').hover(function(){

$rating = $(this).text();

$('#rating_on').css('width', rateWidth($rating));

});

// mouseout

$('#rating_btns li').mouseout(function(){

$rating = $('#rating').text();

if($rating == "not rated"){

$('#rating_on').css('width', "0px");

}

else{

$('#rating_on').css('width', rateWidth($rating));

}

});

//click

$('#rating_btns li').click(function(){

$rating = $(this).text();

$('#rating').text($rating);

$('#rating_output').val($rating);

$pos = starSprite($rating);

$('#small_stars').css('background-position', "0px " + $pos );

$('#rating_btns').hide();

$('#rating_on').hide();

$('#rated').fadeIn();

});

//edit

$('#rate_edit').click(function(){

$('#rated').hide();

$('#rating_btns').fadeIn();

$('#rating_on').fadeIn();

});

function rateWidth($rating){

$rating = parseFloat($rating);

switch ($rating){

case 0.5: $width = "14px"; break;

case 1.0: $width = "28px"; break;

case 1.5: $width = "42px"; break;

case 2.0: $width = "56px"; break;

case 2.5: $width = "70px"; break;

case 3.0: $width = "84px"; break;

case 3.5: $width = "98px"; break;

case 4.0: $width = "112px"; break;

case 4.5: $width = "126px"; break;

case 5.0: $width = "140px"; break;

default: $width = "84px";

}

return $width;

}

function starSprite($rating){

$rating = parseFloat($rating);

switch ($rating){

case 0.5: $pos = "-11px"; break;

case 1.0: $pos = "-22px"; break;

case 1.5: $pos = "-33px"; break;

case 2.0: $pos = "-44px"; break;

case 2.5: $pos = "-55px"; break;

case 3.0: $pos = "-66px"; break;

case 3.5: $pos = "-77px"; break;

case 4.0: $pos = "-88px"; break;

case 4.5: $pos = "-99px"; break;

case 5.0: $pos = "-110px"; break;

default: $pos = "-77px";

}

return $pos;

}

});

Incoming search terms for the article:

• jquery rating
• 5 star vote jquery
• rating jquery
• jquery stars background
• jquery star rating
• jquery ratings
• jquery rating tool
• jquery rating system with comments
• jquery rating system
• jquery rating script

Check out the live demo here or take a look at its code here.

First thing you need to do is reference the necessary jQuery file and plugin by inserting this into your code:

You can use this plugin for the textbox element; all you need to do is to set the case which you want to implement by setting the “caseValue” property to upper, lower, title, or pascal. (NOTE: All values are in lower case).

Your code should then look like one of the following:

Upper case:

Lower case:

Title case: Only the very first letter of the entire text is capitalized.

Pascal case: Every first letter of the word is capitalized.

Below is the code for the plugin, which takes advantage of the keypress and blur method:

Hope you enjoy trying this plugin out on your site. Cheers!

Incoming search terms for the article:

• setcase jquery
• $(this) val =
• jquery convert case
• jquery convert text to link
• jquery plugin setcase
• light menu using jquery

This is where Design Chemical’s Data Heat Map can help. When you’re dealing with hierarchical and/or numeric data, or data with a maximum and minimum value, the heat map adds varying shades of a particular color, making it easier for the viewer to quickly spot the highest and lowest value. It can be a nice alternative for sorting data in ascending or descending order because you eliminate the user’s need to click on a button just to rearrange the data in a particular column.

The two main objectives of this tutorial are:

• To capture and statistically analyze all data points
• To provide a method of grouping the data and be able to identify what formatting should be applied

Let’s start with the usual basic HTML markup. We’ll just keep the code short by only including one row of data with the CSS classes but feel free to add as many rows as you like  if you want to make it look like the one in the demo page or the image sample above:

HTML

Let’s go over the code first part by part.

First thing we’ll do is capture and analyze the data, meaning we have to find out the largest value within the range. We do this by creating an array of all the data points and then returning the maximum value:

Next is to group the data points. We’ll be using the percentage (%) of each value from the max value to find exactly where the data point is positioned on a scale of 1-100.

This is critical to create the heat map as this scale is what we’ll use to dynamically generate the CSS style. You can adjust the max number (100) to suit your data and style of heat map. In addition, we only want to use integers so we also include the rounding off of the results.

The above code is still incomplete since we still have to add the actual formatting into the same loop.

To create the heat map effect we are basically going to use background color.

Technically there is no restriction on how you apply the styles, and background color is only one option. The code is fairly flexible and some minor adjustments can be applied to font size, container size, background image, etc.

Color is easy because we can directly calculate each color value between 2 defined colous – our start point and the end point, which across 100 points should create a gradient style effect.

To calculate color we need to use the RGB values, which are 0 to 255 for Red, Blue and Green.

Finally we apply the new RGB value (heat map style) to each data point by setting the background colour of the table cell.

Below are the combined parts of the code to create the complete heat map function.

Complete jQuery code

If you want to completely change the look (i.e. the colors of the cells) of the heat map, all you have to do is change the start and end color RGB values. Have fun experimenting with the values and customizing the look of your tables!

Download Source Files

Incoming search terms for the article:

• jquery heat map
• heat map javascript table
• jquery heatmap
• jquery heat map plugin
• ascending and descending order in jquery and mootools
• jquery image heatmap
• jquery map sample
• rgb code table
• table heat map jquery
• jquery flexible table