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

2008 - Looking back - II

Events/Experiences
. The year began with a trip to the temple of our deity in Sholingar and later to one of greatest temples in India - Tirupathi. While Sholingar was a physically intense experience as always - you have to climb almost 2000 steps in all - , Tirupathi was a different experience. We experienced enormous crowds, took part in a kalyanotsavam, had a footboard ride with my dad to a nearby place and overall enjoyed the trip.
Sholingar




Tirupathi:


. IPL fever gripped the country in the month of February and I was also thrilled to see the IPL live, in person.

. Travel and friendship took a giant leap this year. I became free at work for a while and we conveniently arranged for a north India trip, in the pretext of attending our friend's marriage in Patna. The trip was amazing.. From long train journeys to exploring the attractions of Delhi to roaming the streets of Delhi on foot and shopping for goodies to traveling in the Delhi metro, Delhi showed us why it's the capital of India. In Agra, our first view of the Taj was breathtaking. One has to see it in person to realise why it is given adjectives like PURE, DIVINE, BEAUTIFUL and so on. The first sight of the Taj justified all those adjectives. The trip also bonded our friendship strongly and we realised that college friendship has certainly changed, after 3 years of corporate life. The trip also brought out the accountant it me :)

Raju's marriage and North India Trip

The north India trip wasn't the end of my travel. I also travelled to Hyderabad and good ol Bangalore on official purpose. It would have been nice if I had stayed a little longer in Hyd. Bangalore was......




. Bangalore was a pleasant experience. I made new friends and also caught up with my old friends working in Bangalore. Even watched back to back films in PVR. Most of all, I discovered a lost part of me and did things I also wanted to do - like the 8 queens and 21 card trick puzzles. I think the discovery was basically due to very little travel (relatively) and because of near-zero distractions. Towards the end of the year, that part of me went missing :(







. Diwali was the biggest festival of the year, as always. We had loads of fun, burst crackers (more of fancy stuff this year) like never before and caught up with old friends from college.



. The year also showed us that mother nature is above all. We had rain water coming into our house, we rescued two enormously cute kittens from the clutches of death and felt gifted to having rescued them. They gave us company during the zero-electricity days :)








. Work went well this year with good technological scope. Finally got a chance to put jquery to use at work in the JavaScript area, also worked on java as usual and towards the end learnt a couple of bpm tools - Intalio and Tibco. Also completed the evasive SCJP exam for java 5 and was glad to learn and appreciate the new features of java 5, though I believe I won't be using java 5 or higher anytime soon in my current line of work :p
. Looking forward to 09, the year holds a lot of promise at work. Personally, it is a watershed and a very important year.
Wishing you all a happy and prosperous new year 2009. Meow!

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