Posts filed under ‘Javascript’

Create a Multi-step Register Form with jQuery

<![CDATA[

Post Source

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and
jQuery. To spice up things a bit, we will include progress bar with the form, so the users
will be able to see the percentage of form completion.

You can take a look at the working demo if you click on the image below:

Create A Multi-Step Signup Form With CSS3 and jQuery DEMO

We will create four steps in our form:

1. username and password fields

2. first and last name and email address

3. age, gender and country

4. summary

HTML Code

First thing to do is to create the html structure. We need a box container with four divs,
one for each step. The basic HTML code is the following:

<div id="container">
    <form action="#" method="post">

        <div id="first_step">

        <div id="second_step">
        <div id="third_step">
        <div id="fourth_step">

    </form>
</div>

Inside each box container we will put the fields and a simple helpfull label. You can see
the code inside the first box in the code below:

<!-- #first_step -->
<div id="first_step">
    <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

    <div class="form">
        <input type="text" name="username" id="username" value="username" />

        <label for="username">At least 4 characters. Uppercase letters, lowercase letters and
numbers only.</label>

        <input type="password" name="password" id="password" value="password" />

        <label for="password">At least 4 characters. Use a mix of upper and lowercase for a
strong password.</label>

        <input type="password" name="cpassword" id="cpassword" value="password" />

        <label for="cpassword">If your passwords aren’t equal, you won’t be able to continue
with signup.</label>
    </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix
-->
    <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />

</div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix
-->

We have used three input fields: username, password and confirm password and at the end of
the box, an input submit for the next step. The other boxes work in the same way.

Create A Multi-Step Signup Form With CSS3 and jQuery

At the end of the container box you can see a simple progress bar. This is the necessary
code:

<div id="progress_bar">

    <div id="progress"></div>
    <div id="progress_text">0% Complete</div>
</div>

The complete HTML code is the following:


        <div id="container">
        <form action="#" method="post">

            <!-- #first_step -->
            <div id="first_step">

                <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

                <div class="form">
                    <input type="text" name="username" id="username" value="username" />

                    <label for="username">At least 4 characters. Uppercase letters, lowercase
letters and numbers only.</label>

                    <input type="password" name="password" id="password" value="password" />

                    <label for="password">At least 4 characters. Use a mix of upper and
lowercase for a strong password.</label>

                    <input type="password" name="cpassword" id="cpassword" value="password"
/>

                    <label for="cpassword">If your passwords aren’t equal, you won’t be able
to continue with signup.</label>
                </div>      <!-- clearfix --><div
class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_first" id="submit_first"
value="" />

            </div>      <!-- clearfix --><div class="clear"></div><!--
/clearfix -->

            <!-- #second_step -->
            <div id="second_step">

                <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

                <div class="form">
                    <input type="text" name="firstname" id="firstname" value="first name" />

                    <label for="firstname">Your First Name. </label>
                    <input type="text" name="lastname" id="lastname" value="last name" />

                    <label for="lastname">Your Last Name. </label>
                    <input type="text" name="email" id="email" value="email address" />

                    <label for="email">Your email address. We send important administration
notices to this address</label>
                </div>      <!-- clearfix --><div
class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_second" id="submit_second"
value="" />

            </div>      <!-- clearfix --><div class="clear"></div><!--
/clearfix -->

            <!-- #third_step -->
            <div id="third_step">

                <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

                <div class="form">
                    <select id="age" name="age">

                        <option> 0 - 17</option>
                        <option>18 - 25</option>
                        <option>26 - 40</option>
                        <option>40+</option>

                    </select>
                    <label for="age">Your age range. </label> <!-- clearfix
--><div class="clear"></div><!-- /clearfix -->

                    <select id="gender" name="gender">

                        <option>Male</option>
                        <option>Female</option>
                    </select>
                    <label for="gender">Your Gender. </label> <!-- clearfix
--><div class="clear"></div><!-- /clearfix -->

                    <select id="country" name="country">
                        <option>United States</option>
                        <option>United Kingdom</option>

                        <option>Canada</option>
                        <option>Serbia</option>
                        <option>Italy</option>
                    </select>

                    <label for="country">Your country. </label> <!-- clearfix
--><div class="clear"></div><!-- /clearfix -->

                </div>      <!-- clearfix --><div
class="clear"></div><!-- /clearfix -->

                <input class="submit" type="submit" name="submit_third" id="submit_third"
value="" />

            </div>      <!-- clearfix --><div class="clear"></div><!--
/clearfix -->

            <!-- #fourth_step -->
            <div id="fourth_step">

                <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

                <div class="form">
                    <h2>Summary</h2>

                    <table>
                        <tr><td>Username</td><td></td></tr>
                        <tr><td>Password</td><td></td></tr>

                        <tr><td>Email</td><td></td></tr>
                        <tr><td>Name</td><td></td></tr>

                        <tr><td>Age</td><td></td></tr>
                        <tr><td>Gender</td><td></td></tr>

                        <tr><td>Country</td><td></td></tr>
                    </table>
                </div>      <!-- clearfix --><div
class="clear"></div><!-- /clearfix -->

                <input class="send submit" type="submit" name="submit_fourth" id="submit_fourth"
value="" />

            </div>

        </form>
        </div>
        <div id="progress_bar">
            <div id="progress"></div>

            <div id="progress_text">0% Complete</div>
        </div>

As you can see, in the fourth step the table is empty. We fill it with the information
entered by the users using jQuery.

CSS Code

Now we need to add the style on the form. First, we use the @fontface rule for using a
custom font. Ive used the Cantarell
font
. The complete CSS Code is listed below:

/* CSS Reset (Eric Meyer) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

@font-face {
   font-family: 'Cantarell';
   src: url(../fonts/Cantarell-Regular.eot);
   src: local('Cantarell'), url('../fonts/Cantarell-Regular.ttf') format('truetype');
}

body {
    background-color: #f9f9f9;
    color: #222;
    font-family: Cantarell, Verdana, sans-serif;
    font-size: 12px;
}

input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; }
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }

#container {
    background: url('../images/container.png') no-repeat;
    width: 754px;
    height: 370px;
    margin: 20px auto;
    padding: 50px 0;
    overflow: hidden;
    position: relative;
}
    #container #first_step, #second_step, #third_step, #fourth_step { display: none; }
    #container #first_step { display: block; }

    #container .form { margin: 66px 72px 0 72px; }

    #container h1, #container h2 {
        font-size: Cantarell, Verdana, sans-serif;
        text-align: center;
        font-size: 24px;
        text-shadow: 1px 1px 2px #222;
    }
        #container h1 span { color: #a90329; }

    #container h2 {
        color: #888;
        font-size: 20px;
        text-align: left;
        text-shadow: none;
    }

    #container table {
        margin: 20px 40px;
        font-size: 14px;
        font-weight: bold;
    }
        #container table td {
            padding: 5px 10px;
        }
            #container table td:nth-child(2) {
                color: #a90329;
            }

    #container input, #container select {
        background: url('../images/input.png') no-repeat;
        color: #888;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        height: 35px;
        padding: 0 25px;
        margin: 20px 0;
        float: left;

        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
    }
        #container input.submit {
            background: url('../images/button.png') no-repeat;
            border: none;
            cursor: pointer;
            width: 85px;
            height: 38px;
            position: relative;
            bottom: 2px;
            left: 655px;
        }
            #container input.submit:focus { border: none; }

        #container input.send{ background: url('../images/send.png') no-repeat; }

        #container input.error { border: 1px solid red; }
        #container input.valid { border: 1px solid #1FFF00; }

        #container input:focus, #container select:focus {
            border: 1px solid #a90329;
            color: #a90329;
        }

    #container select { padding: 5px 0 5px 25px; }
        #container option { padding: 0 15px; }

    #container label {
        color: #666;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        float: right;
        margin: 23px -25px;
        width: 270px;
    }

#progress_bar {
    background: url('../images/progress_bar.png') no-repeat;
    width: 339px;
    height: 24px;
    margin: 0 auto;
    position: relative;
}

#progress {
    background: url('../images/progress.png') repeat-x;
    width: 0px;
    height: 23px;

    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}
#progress_text {
    position: relative;
    line-height: 21px;
    text-align: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px #222;
    width: 339px;
    height: 24px;
    top: -23px;
    left: 0;
}

Create A Multi-Step Signup Form With CSS3 and jQuery

jQuery Code

Were going to use jQuery for:

– slide the steps

– check if the data are valid

– change the completion percentage of progress bar

Create A Multi-Step Signup Form With CSS3 and jQuery

We need load jQuery library inside the page and then to use two plugins:

jQuery UI,
the most famous plugin used to extend the jQuery functionality.

jQuery
inputfocus
, my jQuery plugin used to manage focus and blur events of the form.

Our jQuery code is listed below:

$(function(){
    //original field values
    var field_values = {
            //id        :  value
            'username'  : 'username',
            'password'  : 'password',
            'cpassword' : 'password',
            'firstname'  : 'first name',
            'lastname'  : 'last name',
            'email'  : 'email address'
    };

    //inputfocus
    $('input#username').inputfocus({ value: field_values['username'] });
    $('input#password').inputfocus({ value: field_values['password'] });
    $('input#cpassword').inputfocus({ value: field_values['cpassword'] });
    $('input#lastname').inputfocus({ value: field_values['lastname'] });
    $('input#firstname').inputfocus({ value: field_values['firstname'] });
    $('input#email').inputfocus({ value: field_values['email'] });

    //reset progress bar
    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');

    //first_step
    $('form').submit(function(){ return false; });
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var fields = $('#first_step input[type=text], #first_step input[type=password]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<4 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
            if( $('#password').val() != $('#cpassword').val() ) {
                    $('#first_step input[type=password]').each(function(){
                        $(this).removeClass('valid').addClass('error');
                        $(this).effect("shake", { times:3 }, 50);
                    });

                    return false;
            } else {
                //update progress bar
                $('#progress_text').html('33% Complete');
                $('#progress').css('width','113px');

                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();
            }
        } else return false;
    });

    $('#submit_second').click(function(){
        //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');

        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
        var fields = $('#second_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] || (
$(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
                //update progress bar
                $('#progress_text').html('66% Complete');
                $('#progress').css('width','226px');

                //slide steps
                $('#second_step').slideUp();
                $('#third_step').slideDown();
        } else return false;

    });

    $('#submit_third').click(function(){
        //update progress bar
        $('#progress_text').html('100% Complete');
        $('#progress').css('width','339px');

        //prepare the fourth step
        var fields = new Array(
            $('#username').val(),
            $('#password').val(),
            $('#email').val(),
            $('#firstname').val() + ' ' + $('#lastname').val(),
            $('#age').val(),
            $('#gender').val(),
            $('#country').val()
        );
        var tr = $('#fourth_step tr');
        tr.each(function(){
            //alert( fields[$(this).index()] )
            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
        });

        //slide steps
        $('#third_step').slideUp();
        $('#fourth_step').slideDown();
    });

    $('#submit_fourth').click(function(){
        //send information to server
        alert('Data sent');
    });

});

The code from row 3 to 20 activate the inputfocus plugin to each input
field. The code from row 27 to 64 check the validity of the data entered by the user (if
username and password length is greather than 4 characters, if the password and confirm
password fields are equal), then update the progress bar value and then slide to second
step.

The code from row 71 to 100 check the data integrity for the second step (if first and last
name arent empty and if the email address is valid). The rest is similar to the previous
code.

Create A Multi-Step Signup Form With CSS3 and jQuery

Conclusions and Download

We have seen how simple its to create a multistep signup form. This is only an example so I
omitted some features as back button, and more others. Anyway the example is ready to use
and it needs only to change the form action with the link of your php file used to store
data and to edit the jQuery line 125 to: $(form).submit();. You can also decide to
use an AJAX calls to send the informations to server, and again its very easy to implement.

To see form in action click on the image below:

Create A Multi-Step Signup Form With CSS3 and jQuery DEMO

and if you like the final result download form files using the below button.

Download Files

]]>

27,11,2010 at 2:09 2 yorum

Create a Simple Image Preloader Jquery Plugin

<![CDATA[

Post Source

Download Source FilesSee the Demo

How often do you find that images in a website load gracefully; the kind where a loading icon first appears, and the image then fades in, once loaded? This technique can greatly boost the performance of your website. If you’re not already familiar with this method, you’re in luck! Today, we’ll create a preloader plugin for your projects. Intrigued? Let’s get started!


Step 1:
Setting Up Your Workspace

First, we are going to setup the project folder for this tutorial. We’ll need:

  • Our main HTML file
  • CSS folder for our stylesheet and loading icon ( in ‘i’ folder)
  • JS folder for jQuery and our plugin
  • IMAGES

Step 2:
The HTML

We’re going to start off with the HTML code.

<DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>Image Preloader</title>

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.preloader.js"></script>

<link rel="stylesheet" href="css/preloader.css" type="text/css" />

</head>

<body>

<div id="container">
    <h2>Preloader - Load images with style</h2>

    <ul id="gallery" class="clearfix">
        <li><p><a href="#"><img src="images/1.jpg" /></a></p></li>
        <li><p><a href="#"><img src="images/2.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/3.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/4.jpg" /></a></p></li>
        <li><p><a href="#"><img src="images/5.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/6.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/7.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/8.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/9.jpg" /></a></p> </li>
    </ul>

</div>

Nothing fancy here: just plain HTML code for a simple gallery. We have imported jQuery, our plugin jquery.preloader.js
(currently blank), and our preloader’s stylesheet. To finish up, we’ll add an unordered list, which will contain list items as images wrapped by an anchor tag (usually done in a website for opening a lightbox or linking to a site).

Note that the extra p
tag wrapping each anchor is used for the purpose of styling the image; they are not explicitly required.


Step 3:
The CSS

Now, we’re going to create a preloader.css
stylesheet in the css
folder, and, inside that, create a subfolder i
in which we will keep our preloader icon. Preloaders.net
have a nice collection of loading icons that you can choose from. Add the following code to your stylesheet:

* { margin:0; padding:0; }

body { background:url(i/bg.jpg); }

#container { width:960px; margin:0px auto; }

h2 { font-weight:100; text-shadow:#ffffff 1px 1px 0px; text-align:center; padding:20px; font-size:32px;  color:#555555; border-bottom:1px dashed #ccc; margin-bottom:30px;  font-family: Georgia, "Times New Roman", Times, serif ;  }

First, we have created a 960px
centered container, and have added a background to the page. Additionally, we’ve added some basic styling to the title ( h2
tag ).

Styling the Gallery

Next, we’ll style the gallery and, while we are at it, throw in some CSS3 goodness.

#gallery {
list-style:none;
}

#gallery li {
background:#e8e8e8;
float:left;
display:block;
border:1px solid #d7d7d7;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:1px 1px 6px #ddd;
-moz-box-shadow:1px 1px 6px #ddd;
box-shadow:1px 1px 6px #ddd;
margin:15px 56px;
padding:0;
}

#gallery li p {
border:1px solid #fff;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
margin:0;
padding:7px;
}

#gallery li a {
display:block;
color:#fff;
text-decoration:none;
padding:0;
}

#gallery img {
width:315px;
height:210px;
margin:0;
padding:0;
}

At this point, our gallery should look like so:

image1

Setting up the Preloader Class

Let’s create a preloader
class that will be responsible for showing the loading icon, while images are loading.

.preloader {
   background:url(i/89.gif) center center no-repeat #ffffff;
   display:inline-block;
}

The preloader element’s display
property must be set to block
or inline block; otherwise, the loading icon won’t show.


Step 4:
Writing the Plugin

Let’s begin by creating the plugin structure and options.

Allowing for customization options makes a plugin far more flexible for the user.

We start off with the base structure:

$.fn.preloader = function(options){

	var defaults = {
		 delay:200,
		 preload_parent:"a",
		 check_timer:300,
		 ondone:function(){ },
		 oneachload:function(image){  },
		fadein:500
	};

	// variables declaration and precaching images and parent container
	 var options = $.extend(defaults, options),

     }

Our Options

  • delay
    – Successive delay between fading in images
  • preload_parent
    – Add preload class to the parent mentioned. If not found, the image is wrapped within an anchor tag
  • ondone
    – Callback to be executed when all the images are loaded
  • oneachload
    – Called when each image is loaded with image as the parameter
  • fadein
    – Fade in animation duration

Step 5:
Variables

Next, we declare and precache the variables that we will be using in the rest of the plugin.

	var defaults = {
		 delay:200,
		 preload_parent:"a",
		 check_timer:300,
		 ondone:function(){ },
		 oneachload:function(image){  },
		fadein:500
	};

	// variables declaration and precaching images and parent container
	 var options = $.extend(defaults, options),
	       root = $(this),
               images = root.find("img").css( {"visibility":"hidden", opacity:0} ),
               timer,
               counter = 0,
               i=0 ,
              checkFlag = [],
              delaySum = options.delay;

First, we precache the root element (always a best practice), then find the images (also making them hidden), and finally declare the variables which will be explained in greater detail as we counter them.

There are two things worth noting here: you might initially think the easiest solution is to hide the images, and then fade them in, rather than jumping through all of this code. However, the problem is that, if we hide the images, the browser marks the space they used to occupy as empty, and thus the layout, itself, is messed up when they’re eventually faded in. Okay, well what if we used opacity
to “show” and “hide” the images? That’s a better practice, though, some versions of IE doesn’t like this method.

Step 6:
Adding Preloader Class

We now will iterate over each image element, and check if its parent is the one mentioned in the option. If so, we add our preloader class to it; else, we wrap the image within an anchor tag with a class of preloader.

images.each(function(){
	var $this = $(this);
	if( $this.parent( options.preload_parent ).length==0 ) {
	   $this.wrap("<a class='preloader' />");
        } else {
	   $this.parent().addClass("preloader");
       }

      checkFlag[i++] = false;
});
images = $.makeArray(images);

Here, we are using an array checkFlag, and are setting each array’s item value to false. Its use will be made clear as you move along.


Step 7:
Bringing it All Together

We’ll now implement what actually happens behind the scenes. There is a boolean
property, called complete, associated with the image object. When the image has been loaded completely, this boolean is set to true. So, we keep checking this property for each image, and, if it is indeed set to true, we fade in that image.

We can use the setInterval
function to continuously determine whether the images have been loaded or not. This is where the check_timer
option comes in: it maps directly to our timer’s frequency.

An image also has an onload
event associated with it; you’re probably wondering why we aren’t using it. The reason is because some browsers don’t work well with that event; as such, we’re skipping it. We need a solution that works like a charm across all browsers. We start off with:

 init = function(){
	timer = setInterval(function(){}
},options.check_timer);

timer
is the variable which will reference the timer. This is needed in order to eventually stop the timer. This function is declared along with all the variables.

Checking Each Image

We’ll iterate through the array and check each image’s complete
property to determine whether it has finished downloading. If it has been downloaded, we will set it to visible and fade in slowly. When the animation has ended, we remove the preloader class from its parent.

for(i=0; i<images.length; i++) {
	if(images[i].complete == true) {
    	$(images[i]).css("visibility","visible")
    	   .delay(delaySum)
    	   .animate({opacity:1}, options.fadein, function(){
    	   		$(this)
    	   		   .parent()
    	   		   .removeClass("preloader");
    	   	});
		}
	}

There’s a tiny issue here: the timer will continue to check — even after
the images have all been loaded.To counter this, we’ll add a counter variable, and increment it after each image has been loaded. This way, we can check if the counter variable is equal to the size of the images array. If that’s the case, we stop.

timer = setInterval(function(){
	if(counter>=checkFlag.length) {
		clearInterval(timer);
		options.ondone();
		return;
	}

	for( i=0; i<images.length; i++) {
		if(images[i].complete==true) {
	        $(images[i])
	           .css("visibility","visible")
	           .delay(delaySum)
	           .animate({opacity:1}, options.fadein, function(){
		           $(this)
		              .parent()
		              .removeClass("preloader");
		        });

			counter++;
		}
	}

},options.check_timer)

However, there’s another small issue now. Our timer may stop earlier than expected; if one image has been loaded, its complete
property has been set to true
and the counter thus increments by 1. Now, when the loop runs the next time, the image is already loaded, the complete
property is set totrue, and, thus, the loop will run twice! To overcome this problem, we use the checkFlag
array. When an image is loaded, we will set checkFlag
to true, and set the condition for the counter to increment only on the condition that the checkFlag
value is false. So counter is incremented only once: when an image is loaded for the first time.

timer = setInterval(function () {

    if (counter & gt; = checkFlag.length) {
        clearInterval(timer);
        options.ondone();
        return;
    }

    for (i = 0; i & lt; images.length; i++) {
        if (images[i].complete == true) {
            if (checkFlag[i] == false) {
                checkFlag[i] = true;
                options.oneachload(images[i]);
                counter++;

                delaySum = delaySum + options.delay;
            }

            $(images[i]).css("visibility", "visible").delay(delaySum).animate({
                opacity: 1
            }, options.fadein, function () {
                $(this).parent().removeClass("preloader");
            });
        }
    }

}, options.check_timer);

Note that we call the ondone
function when the counter flag is greater than the array’s length – i.e. when all the images are loaded. When the counter is incremented, oneachload
is called with the current image passed as the parameter.


Step 8:
The Easy Part

Finally, in this step, we call the init();
function at the end of the plugin.

init(); // called at the last line of plugin

That’s all; we have made a fully working preloading plugin, and its size is less than 2kb. Still, one problem remains: the loading icon image is loaded randomly. We don’t want that. In the next section we will take care of that.


Step 9:
Going the Extra Mile

To fix the problem mentioned above, we’ll load the icon first, and then call the init
function. But the loading icon is a background image, so we inject it as an image in the page, while keeping it hidden. When it loads, we call the init
function. We’re essentially preloading the icon itself.

var icon = jQuery("<img />", {

    id: 'loadingicon',
    src: 'css/i/89.gif'

}).hide().appendTo("body");

timer = setInterval(function () {

    if (icon[0].complete == true) {
        clearInterval(timer);
        init();
        icon.remove();
        return;
    }

}, 100);

First we create an image object with an id
of loadingicon, and a source
pointing to the path of the loading icon. Then, we append it the body
and initially hide it. Lastly, we set the interval to check if the icon has been loaded or not. If it has, we kill the timer, and start preloading the images. Don’t forget to remove that icon too!


Conclusion

With that last step, we’re done! This functionality works in all browsers, just as expected, and degrades gracefully. Just be sure set the preloader element’s display
property to block
or inline-block. It is now ready to be used in your projects. Thanks for reading!

]]>

26,11,2010 at 17:38 Yorum bırakın

Three Great Books For Practicing Javascript

<![CDATA[

I was looking for a book to improve my javascript skills without using a library and finally found the best book : JavaScript Patterns by Stoyan Stefanov (O’Reilly Media/Yahoo! Press)

About the book

What’s the best approach for developing an application with JavaScript? This book helps you answer that question with numerous JavaScript coding patterns and best practices. If you’re an experienced developer looking to solve problems related to objects, functions, inheritance, and other language-specific categories, the abstractions and code templates in this guide are ideal — whether you’re writing a client-side, server-side, or desktop application with JavaScript. Author Stoyan Stefanov includes several examples for each pattern as well as practical advice for implementing them.

The Other Books on My List

]]>

25,11,2010 at 5:26 Yorum bırakın


Takvim

Ağustos 2017
P S Ç P C C P
« Ara    
 123456
78910111213
14151617181920
21222324252627
28293031  

Posts by Month

Posts by Category