Wednesday, December 28, 2011

Loading Animation Without Images Using jQuery


Loading Animation Without Images Using jQuery
Keith

This tutorial will teach us to create a loading animation without using any image files. With a little bit of CSS, we're going to show you how to incorporate this jQuery tutorial snippet into your web page to provide you a decent replacement for a graphic loading animation.


DIV Tags – We'll start off by creating a series of <div> tags, which will be used to display the animation. In this example, we want to display 8 boxes as our progress indicators so we'll make 8 of these DIVs but feel free to add or remove any loaderBox DIVS as you prefer.
<div id="jQuerySnipsLoadAnim">
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
</div>

CSS Style – You have the option to either place this CSS inside the <head> area of your html or in a separate .css file. Again, you are free to change the names below just as long as you make sure that your wrapper DIV tag id corresponds to that of the jQuerySnipsLoadAnim id. Also, the .loaderBox class specification should correspond to the internal DIVs.
<style>
    #jQuerySnipsLoadAnim {
                display: block;
                width: 200px;
    }

    .loaderBox {
       display: none;
    }
</style>

jQuery Setting – This is the part where we'll indicate how we want the boxes to look and behave once the animation is activated. We can change the size and color of the boxes, the background color, the speed of the animation, and whatnot.
var jqsOptions = new Array();

jqsOptions["jQuerySnipsLoadAnim"] = {
      'bgcolor'          : '#abc',
      'position'         : 'relative',
      'float'            : 'left',
      'width'            : '20px',
      'height'           : '20px',
      'margin'           : '2px',
      'opacity'          : '.5',
      'display'          : 'none',
      'widthOffset'      : '+=5px',
      'heightOffset'     : '+=5px',
      'animationSpeed'   : '500'
};

var jqsTimer = new Array();
var jqsInt   = new Array();

Start/Stop Animation – Basically, any event trigger can be used to start and stop the loading animation but for demonstration purposes, we'll be using the click event to achieve both results. Everything in the loaderStart event is needed to start the loading animation and everything in the loaderStop is needed to stop it. Again, if you're going to change the DIV tags, don't forget to change jQuerySnipsLoadAnim as well.
$("#loaderStart").click(function(){
                jqsDiv = "jQuerySnipsLoadAnim";
                jqsInit(jqsDiv);
                jqsTimer[jqsDiv] = setInterval("jqsLoader('"+jqsDiv+"')",jqsOptions[jqsDiv].animationSpeed);
});

$("#loaderStop").click(function(){
                clearInterval(jqsTimer["jQuerySnipsLoadAnim"]);
});

Supporting Functions – Lastly, of course, are the supporting functions. Any part of this need not be changed.
function jqsInit(jqsDiv) {
                 $(this).stop();
                 $(this).clearQueue();
                 clearInterval(jqsTimer[jqsDiv]);

                 jqsInt[jqsDiv] = 0;

     $("#"+jqsDiv+" > div").css({
                "display"          : "inline",
                "background-color" : jqsOptions[jqsDiv].bgcolor,
                "position"         : jqsOptions[jqsDiv].position,
                    "float"            : jqsOptions[jqsDiv].float,
                    "width"            : jqsOptions[jqsDiv].width,
                    "height"           : jqsOptions[jqsDiv].height,
                    "margin"           : jqsOptions[jqsDiv].margin,
                    "opacity"          : jqsOptions[jqsDiv].opacity
     });
}

function jqsLoader(jqsDiv) {

                var jqsBox   = $("#"+jqsDiv+" > div");
                var jqsBoxes = $("#"+jqsDiv+" > div").size();

                $(jqsBox[jqsInt[jqsDiv]]).show().animate({
                "display": "inline",
                "width": jqsOptions[jqsDiv].widthOffset,
                "height": jqsOptions[jqsDiv].heightOffset,
                "opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed, complete: function() {
                                $(this).animate({
                                                "width": jqsOptions[jqsDiv].width,
                                                "height": jqsOptions[jqsDiv].height,
                                                "opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed});
                                }
                });
                jqsInt[jqsDiv]++;
                if (jqsInt[jqsDiv] == jqsBoxes) { jqsInt[jqsDiv] = 0; }

}

Here is the Full Code.
                <!DOCTYPE html>
                <html>
                <head>
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
                </head>
                <body><style>
    #jQuerySnipsLoadAnim {
                display: block;
                width: 200px;
    }

                .loaderBox {
                  display: none;
                }
</style>

<button id="loaderStart">Start Loading Animation</button>&nbsp;&nbsp;<button id="loaderStop">Stop Loading Animation</button>

<div id="jQuerySnipsLoadAnim">
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
                <div class="loaderBox"></div>
</div>

<script>
var jqsOptions = new Array();

jqsOptions["jQuerySnipsLoadAnim"] = {
      'bgcolor'          : '#abc',
      'position'         : 'relative',
      'float'            : 'left',
      'width'            : '20px',
      'height'           : '20px',
      'margin'           : '2px',
      'opacity'          : '.5',
      'display'          : 'none',
      'widthOffset'      : '+=5px',
      'heightOffset'     : '+=5px',
      'animationSpeed'   : '500'
};

var jqsTimer = new Array();
var jqsInt   = new Array();

$("#loaderStart").click(function(){
                jqsDiv = "jQuerySnipsLoadAnim";
                jqsInit(jqsDiv);
                jqsTimer[jqsDiv] = setInterval("jqsLoader('"+jqsDiv+"')",jqsOptions[jqsDiv].animationSpeed);
});

$("#loaderStop").click(function(){
                clearInterval(jqsTimer["jQuerySnipsLoadAnim"]);
});

function jqsInit(jqsDiv) {
                 $(this).stop();
                 $(this).clearQueue();
                 clearInterval(jqsTimer[jqsDiv]);

                 jqsInt[jqsDiv] = 0;

     $("#"+jqsDiv+" > div").css({
                "display"          : "inline",
                "background-color" : jqsOptions[jqsDiv].bgcolor,
                "position"         : jqsOptions[jqsDiv].position,
                    "float"            : jqsOptions[jqsDiv].float,
                    "width"            : jqsOptions[jqsDiv].width,
                    "height"           : jqsOptions[jqsDiv].height,
                    "margin"           : jqsOptions[jqsDiv].margin,
                    "opacity"          : jqsOptions[jqsDiv].opacity
     });
}

function jqsLoader(jqsDiv) {

                var jqsBox   = $("#"+jqsDiv+" > div");
                var jqsBoxes = $("#"+jqsDiv+" > div").size();

                $(jqsBox[jqsInt[jqsDiv]]).show().animate({
                "display": "inline",
                "width": jqsOptions[jqsDiv].widthOffset,
                "height": jqsOptions[jqsDiv].heightOffset,
                "opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed, complete: function() {
                                $(this).animate({
                                                "width": jqsOptions[jqsDiv].width,
                                                "height": jqsOptions[jqsDiv].height,
                                                "opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed});
                                }
                });
                jqsInt[jqsDiv]++;
                if (jqsInt[jqsDiv] == jqsBoxes) { jqsInt[jqsDiv] = 0; }

}
</script>
                </body>
                </html>

Click here to view the demo.

Data Filtering Using jQuery


Data Filtering Using jQuery
Keith

Have you ever visited a shopping website and wondered how it can filter out certain items on the list according to your preferences? Well, here’s a quick and very helpful tutorial I picked up that will teach you how to do something similar to that without any need for database calls or page refreshes.
Let’s begin with the CSS structure so as to make the layout look presentable.

/* SIMPLE CSS RESET */
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 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/*- -*/

/*- FILTER OPTIONS -*/
ul#filterOptions {
  width: 802px;
  height: 52px;
  margin: 30px 0;
  overflow: hidden;
}
ul#filterOptions li { height: 52px; margin-right: 2px; float: left; }
ul#filterOptions li a {
  height: 50px;
  padding: 0 20px;
  border: 1px solid #999;
  background: #cfcfcf;
  color: #fff;
  font-weight: bold;
  line-height: 50px;
  text-decoration: none;
  display: block;
}
ul#filterOptions li a:hover { background: #c9c9c9; }
ul#filterOptions li.active a { background: #999; }
/*- -*/

As you may have noticed, the CSS is divided into 2 parts; in the first one we just used the CSS reset snippet (by Eric Meyer) to iron out any potential browser inconsistencies, while in the second (labeled “/*- FILTER OPTIONS -*/”) we just indicated the styles for the buttons.
Now for our HTML:
<ul id="filterOptions">
  <li class="active"><a href="#" class="all">All</a></li>
  <li><a href="#" class="group01">Group 1</a></li>
  <li><a href="#" class=" group02">Group 2</a></li>
  <li><a href="#" class=" group03">Group 3</a></li>
  <li><a href="#" class=" group04">Group 4</a></li>
</ul>

We have assigned a different class for each of the link elements because we’ll be using it later in jQuery tutorials to indicate which items are to be filtered out.

Now we’re going to put a style on the target data (our list of items to be filtered) with CSS below followed by the updated HTML. In this example, we will assume our items to be image files. The h3 tag is basically for the corresponding names for the images. Both the image and the name are then surrounded by a fixed height and width div element to keep things aligned.

CSS
/*- OUR DATA HOLDER -*/
#ourHolder { width: 800px; height: 850px; overflow: hidden; }
#ourHolder div.item {
     width: 200px;
     height: 200px;
     float: left;
     text-align: center;
}
#ourHolder div.item h3 { margin-top: 10px; font-size: 16px; line-height: 20px; }
/*- -*/

HTML
<div id="ourHolder">
  <div class="item group02">
    <img src="images/accrington-stanley.jpg" alt="Accrington Stanley" />
    <h3>Accrington Stanley</h3>
  </div>
  <div class="item group01">
    <img src="images/picture01.jpg" alt="Picture 1" />
    <h3>Picture 1</h3>
  </div>
  <div class="item group02">
    <img src="images/picture002.jpg" alt="Picture 2" />
    <h3>Picture 2</h3>
  </div>
...            //insert any additional items here
</div>

Once you use this code, make sure you rename your jpeg files (picture002.jpg) accordingly.
As you can see, we’ve also added another class (i.e. item group01) to our items which matches up to the classes assigned to our filter options links (class="group01" under “filterOptions”). This will be our reference on which items will be shown once a filtered link is chosen or clicked.

Now it’s time for the jQuery. In this example, we’ll be using a hosted copy of the jQuery that is linked to Google’s CDN. To do this, we’ll place the following snippet within our web page’s <head></head> tag.

HTML
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Next, we need to display the specific items with a few more jQuery. All our items are going to be displayed by default. 

Once the visitor clicks on one of our filter option links, our jQuery will fetch the element class that is clicked on and assigns it to the ourClass variable. After the ourClass variable is discovered we deactivate all the filter option elements and reassign the active class to the clicked filter option element (this will make it clear to the visitor what they're filtering by). 

Next, we determine if the user has clicked the 'all' filter option. If so, then we show all the items under the same class. Lastly, we indicate ‘return false’ to prevent the page from jumping back to the top.

$(document).ready(function() {
  $('#filterOptions li a').click(function() {
    // fetch the class of the clicked item
    var ourClass = $(this).attr('class');

    // reset the active class on all the buttons
    $('#filterOptions li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');

    if(ourClass == 'all') {
      // show all our items
      $('#ourHolder').children('div.item').show();
    }
    else {
      // hide all elements that don't share ourClass
      $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
      // show all elements that do share ourClass
      $('#ourHolder').children('div.' + ourClass).show();
    }
    return false;
  });
});

And that’s it!