Fun with jQuery clone() and animate()
[tweetmeme]While going through the jQuery API documention, I realised that I have not tried my hands at many of its wonderful functions. So I thought of doing something creative with clone() and animate() functions. Here are the list of things I am going to do…
- Capture the user’s keypress event as they type and get the key value
- Create a clone of a hidden DIV element and change its text to the keypress value
- Place the new DIV elements one after the other and provide some random background color for each DIV element
- Provide a touch of animation to make it look nice 🙂
OK, here we go…
First lets create a simple CSS class for our DIV element.
.letter { font-weight: bold; color: #fff; border: 1px solid #000; padding: 5px; width: 20px; height: 20px; left: 0; float: left; }
This will create a simple box of dimension 20 x 20 pixels with a black border.
Next, we will jump in to the jQuery code…
var newDiv = ""; var oldDiv = ""; $(document).ready(function() { oldDiv = $("div.letter"); oldDiv.hide(); }).keypress(function(e) { if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25) || (97 <= e.which && e.which <= 97 + 25)) { //Create a random RGB value var rgb = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; //Get the actual value of the key var c = String.fromCharCode(e.which); //Create a clone of the existing DIV and place the clone next to it. newDiv = oldDiv.clone().insertAfter(oldDiv); //Provide the new DIV with the Key value and use animate function to apply the bg color(rgb) newDiv.html(c) .animate({ backgroundColor: rgb }, 5000) .show(); //Set the new DIV as the last DIV of the chain. oldDiv = newDiv; } });
That should do it! Here is the complete code…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQ Show Hide</title> <style type="text/css"> .letter { font-weight: bold; color: #fff; border: 1px solid #000; padding: 5px; width: 20px; height: 20px; left: 0; float: left; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); google.load("jqueryui", "1.5.2"); </script> <script type="text/javascript"> var newDiv = ""; var oldDiv = ""; $(document).ready(function() { oldDiv = $("div.letter"); oldDiv.hide(); }).keypress(function(e) { if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25) || (97 <= e.which && e.which <= 97 + 25)) { var rgb = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; var c = String.fromCharCode(e.which); newDiv = oldDiv.clone().insertAfter(oldDiv); newDiv.html(document.createTextNode(c)) .animate({ backgroundColor: rgb }, 5000) .show(); oldDiv = newDiv; } }); </script> </head> <body> <div class="letter" /> </body> </html>
If you run the code, here is what you will see…
Let me know what you think 🙂
[…] creative with clone() and animate() functions. Here are the list of things I am going to do… View Article Tags: jQuery Share this […]
Thanks for this post, I am a big big fan of this site would like to continue updated.
Nice