2LeggedSpider

Fun with jQuery clone() and animate()

Posted in CSS, jquery by Sumit Thomas on December 29, 2009

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…

  1. Capture the user’s keypress event as they type and get the key value
  2. Create a clone of a hidden DIV element and change its text to the keypress value
  3. Place the new DIV elements one after the other and provide some random background color for each DIV element
  4. 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…

jQuery Animation

Let me know what you think :)

About these ads

3 Responses

Subscribe to comments with RSS.

  1. […] creative with clone() and animate() functions. Here are the list of things I am going to do… View Article Tags: jQuery Share this […]

  2. graphic packaging said, on February 12, 2011 at 5:47 am

    Thanks for this post, I am a big big fan of this site would like to continue updated.

  3. jayendra said, on November 17, 2011 at 3:40 pm

    Nice


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: