jQuery cookies - set, get and delete

jQuery can be used to play around with cookies..
As simple as:
Set a cookie: $.cookie('the_cookie', 'the_value');
Get a cookie: $.cookie('the_cookie');
Delete a cookie: $.cookie('the_cookie', null);

There is also :
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });

See it below in action :)

Please enter your name

Welcome

jQuery chess board

Inspired by the excellent jQuery table striping tutorial by Jack Born and the 8 queens puzzle, I have done a chess board with jQuery, html and css.
The basic logic was this:
Every ODD ROW will start with a white square followed by a black square, then a white square and so on.
Like so:

8

8

Likewise, each EVEN row will start with a black square and alternates with a white square.
Simply put,
ODD ROW + ODD ELEMENT = white
ODD ROW + EVEN ELEMENT = black
EVEN ROW + ODD ELEMENT = white
EVEN ROW + EVEN ELEMENT = black

All this, achieved with a little CSS

.white {
background-color: #FFCE9E;
width: 60px;
height: 60px;
}
.black {
background-color: #D18B47;
width: 60px;
height: 60px;
}

and FOUR LINES of jQuery!

$("#board tr:odd td:odd").addClass("white");
$("#board tr:odd td:even").addClass("black");
$("#board tr:even td:odd").addClass("white");
$("#board tr:even td:even").addClass("black");

Here it is -- my own jQuery chess board:)

	a	b	c	d	e	f	g	h
8									8
7									7
6									6
5									5
4									4
3									3
2									2
1									1
	a	b	c	d	e	f	g	h

jQuery password strength meter

jQuery has been quite impressive right from the word go, even though I did nothing "real world" with it.
I stumbled across a password strength meter done using normal javascript and CSS.
I instantly decided to jQuery it -- without the password rules and in fact, even without the password field!.
All you have to do is enter a "percentage" of how strong the password is and the meter will be displayed.
Since this is of the "Get a percent, display it as a meter" kind, it can be used for stuff OTHER THAN password meters too.. Like a "You have used xx% of your mailbox" or something similar..

Without much ado, here's my attempt and the source code:

Demo -- Enter a number (zero or more) and click Change:

Code:

<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#changemeterpercentbutton").click(function() { //Assign a callback function to the "change" button
var iPercent = $("#meterpercent").val(); //Get the percent value from the textbox
var percent = iPercent + "%"; //Just add a "%" sign to it -- to be used in CSS

iPercent = parseInt(iPercent); //Get the numeric form of the percentage -- for comparisons
if(iPercent > 100) { // Cap the percentage to a max of 100
iPercent = 100;
percent = "100%";
}
$("#meterdescription").html(percent); // Display the percentage (with the % sign) below the meter

// Handle the styles for the meter for different percentage ranges
if(iPercent <= 20) {
$("#meter").css({width: percent, background: "#56e500"});
} else if(iPercent <= 40) {
$("#meter").css({width: percent, background: "#399800"});
} else if(iPercent <= 60) {
$("#meter").css({width: percent, background: "yellow"});
} else if(iPercent <= 80) {
$("#meter").css({width: percent, background: "#ff5f5f"});
} else if(iPercent > 80) {
$("#meter").css({width: percent, background: "#ff0000"});
}
}).click(); //Programatically call the click function on page load so that the percentage meter is displayed on page load (using the default text box value)
});

</script>

<style>

.metercontainer {
width: 150px;
}
#meter {
height: 10px;
}
</style>


<input type="text" name="meterpercent" id="meterpercent" value="40">
<input type="button" name="changemeterpercentbutton" id="changemeterpercentbutton" value="Change">
<br>
<div class="metercontainer">
<div id="meter" class="grey"></div>
<div id="meterdescription"></div>
</div>

To jQuery or not to jQuery?

Its interesting to see how one handles multiple jQuery includes.
If jQuery is already included in a page and you dont want to include "your own" jQuery file too, you have to do a bit of woodoo, as below..

You have to basically check if javascript thinks the variable "jQuery" is present or not.. Check here if this page has jQuery or not

< script type="text/javascript" >
if (typeof jQuery == 'undefined') {
console.log("Including jQuery dynamically");
document.write('< SCRIPT LANGUAGE="JavaScript1.1" SRC="jquery-latest.pack.js">');
document.write('<\/script>');
} else {
console.log("jQuery already present. Not including");
}
< /script >

< script >
$(document).ready(function() {
alert("jQuery");
$('span').hide("slow");
});
< /script >

Hello world

inline span

Hoo

jQuery Effects: slideDown, slideUp and slideToggle

jQuery slideDown, slideUp and slideToggle method demo

Slide down  Slide down (slow)  

Slide up  Slide up (slow)  

Toggle slide  Toggle slide (slow)  

jQuery Effects: show, hide and toggle

jQuery show, hide and toggle method demo

show  hide  toggle show/hide