Fun with jQuery clone() and animate()
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