Daily Resources for Web Designers & Developers by Andy Sowards » Javascript

Top 5 Responsive Website Designs on the Web

Jules — Wed, 01 Feb 2012 05:06:47 +0000

Responsive Web Design is one of the most talked about trends in Web Design today, and will continue to remain a hot topic for as long as Smartphones and Tablets continue their domination in the handheld device industry. Research shows that the percentage of users accessing the internet through a handheld device is increasing exponentially, so if you haven’t considered the use of responsive design in your projects, it might be a good time to start exploring the techniques behind it.

Responsive Web Design is a term first coined by Ethan Marcotte, which went viral after a blog post on A List Apart back in 2010. Essentially, responsive web design refers to a websites ability to respond to the browser size in which it is viewed to enhance a users experience and ensure maximum exposure for the content itself. This will mean that the text is legible without having to zoom in and images are resized contextually allowing them to fit the browser screen without the need to scroll horizontally. Many design elements become invisible or hidden when viewed on a smaller browser size, which allows the user to get access to what they visited for the content itself.

In a sense, responsive web design is reminiscent of the old ‘text-based’ websites that we used to see of yesteryear, which primarily used to accommodate users on dial-up modems and slower internet connections to ensure faster page loading times. These days, whilst a responsive design does focus on the content, it also allows for some design elements to be incorporated to ensure consistency across all browsers which is essential for any brand strategy.

Responsive web design is still in its infancy however, and as with any new design technology, it takes time to be assimilated by the design world as a whole. For the Designer, it’s still very much a playground of trialling and testing new techniques – as the full potential of responsive web design is as yet uncharted.

Many designers have embraced the challenge and possibilities that responsive design presents and you should too! Below are my Top 5 Responsive Web Designs for your viewing pleasure and inspiration…

1. Forefathers Group

2. Sasquatch Music Festival

3. Ben Handzo Photography

4. Illy Issimo

5. Deren Keskin

If you like this, You’ll love These.

How To Redirect Visitors To Another Site Or Page – Different Techniques & Explanations for Beginners

Pixel Crayon — Wed, 28 Dec 2011 13:02:00 +0000

Advertise here with BSA

Redirecting web pages is an oft used term in search engine optimization. In fact, it is important for all webmasters carrying out search engine optimization of their sites to learn about redirecting web pages. Redirecting a page holds much importance in SEO. This is because inbound links to a web page are considered by search engine ranking algorithms while ranking websites. Therefore, one must know what it is meant by redirecting a page and what are the different techniques of redirecting a page.

Redirect Image Via Shutterstock

What is meant by redirecting a page?

Whenever a web browser or search engine crawler requests a page at a particular URL on any web site, the web server on which that site is hosted tries to locate the page at that URL so that it can return the corresponding HTML to the requester. Now if that web page exists then the server returns the HTML needed to render that page . It also returns a 200 HTTP status in the header of the response. With this status, the requesting browser or crawler gets the message that the page was found and its HTML was returned.

Sometimes some web pages need to be deleted or moved to a new location. In such a case, a webmaster has two options. First, he can all all future requests for the old web page to be returned to a 404 HTTP status that indicates that the page could not be found. Second, he can ask the browser or search engine crawler to request the page using a new URL. There is a temporary redirect as well as a permanent redirect.

Advantages of redirecting web pages

1. First of all, a redirect lets a site to inform visitors that the page or entire site has been moved to a different web address. It also tells the visitors that the redirection process is automatic and the new address is displayed on the browser.

2. With the help of a permanent redirect, one can perform actions like switching domains, redirecting a part of the website to a new domain or redirecting a folder on your site to a new folder.

Different techniques to redirect a web page

There are different techniques available for redirecting a web page. Some of these techniques are discussed here in detail.

1. Browser side redirection using Javascript

JavaScript can be used to redirect web pages. This technique is useful as it makes the redirection conditioned. This is how drop down menus are created. You can also redirect a page without a condition. This is used to cloak the content. By cloaking the content, it will still be interpreted by the search engines as they can penetrate through the JavaScript and at the same time users will be swiftly redirected. Redirecting a page using JavaScript is more instant than ‘instant’ meta-refresh redirection if the code is placed in the header because meta-refresh waits for the page to load first. These days search engines know how to look for redirection in Javascript. Therefore, you can choose to encrypt the script or load it from a remote file as per your convenience.

/* example */ window.location = "http://www.google.com/";

2. Browser side redirection using HTML

You can use HTML to redirect a page. Here you can use the meta-refresh tag to redirect a page immediately or after a period of time. However, one thing that should be borne in mind is that some search engines penalize pages that use page redirection technique with short delays. This is because it could appear as a cloaking attempt. Cloaking means that human users are redirected too quickly to read the page. However, this technique can be useful to redirect to a different site of yours or directly to a sponsors page, with your referral code after 350 seconds. The idea behind this is that a surfer has your site in a stack of windows or tabs and as he closes them he will stop at the new page and look at it.

/* example */

3. Browser side redirection using Flash

If you are comfortable working with Flash, then browser side redirection using Flash will be pretty easy for you. To create an instant redirect, you can make your own flash movie with one frame that has a single transparent area in it. Now you need to paste the relevant code into the actionscript pane for that frame. In case you want to redirect after a period of time, you can make a movie of the appropriate length and paste the code into the actionscript pane of the last frame.

/* example */ var url:String = "http://www.google.com" var urlRequest:URLRequest = new URLRequest(url); navigateToURL(urlRequest, "_blank");

4. Server side page redirection using PHP

This technique can be useful if you want to redirect to a different page depending on the outcome of a script. With the help of this technique and appropriate skills, you can redirect to a joke page on a Sunday, political news on a Monday, Books review on a Tuesday and so on. However, one thing that you should keep in mind is that you must call the function before any text or HTML is sent to the browser. Redirect will fail with an error message if you call the function after the redirect.

/* example */ header("Location: http://domain.com/");

5. Hidden Browser side redirection using Iframe and JavaScript

When it comes to search engine optimization some people are too wary of search engines finding their pages are redirected. If you are one of those then this is a good method for you. All you need to do is to put an iframe in the page you want to redirect from. After this, in the source attribute of the iframe, put the url of the page you wish to redirect to.

When you do this, the browser loads the new page into the iframe. Then the page is executed in framebreaker and the new page is displayed in place of the one that was originally loading. Thus you can quickly redirect a page using this Javascript technique

6. Server side redirection using .htaccess 301 on Unix servers

Result Code 301 is the only way to redirect to a new page which is properly supported by search engines. It is also known as permanent redirect. With this, Google not only transfers all the traffic but also any page rank to the new page. The .htaccess files are simple text files that contain instructions for the server on your site. You can either have one such file in every directory where it is needed or a single file in the document root directory for the entire site. In case you already have a .htaccess file in your directory then you can simply add any redirects to the top of the file.

/* example */ Options +FollowSymLinks RewriteEngine on RewriteRule (.*) http://www.newdomain.com/$1 [R=301,L]

7. Page redirection from any point in a PHP script

The PHP script gives you an option of redirecting your page at any given interval. You may utilize this technique if in case you stumble upon the awkward header which the script may produce sporadically.

/* example */ header("Location: http://domain.com/"); exit;

8. Server side redirection using ASP and ASP.net on windows servers

The only way to redirect to a new page which is properly supported by search engines is Result code 301. And it is known as the permanent redirect. It will make sure that Google transfers not only all the traffic but also any page rank to the new page.

/* example */ /* ASP */ Response.Status="301 Moved Permanently" Response.AddHeader "Location","http://www.new-url.com/"


/* ASP.NET */
private void Page_Load(object sender, System.EventArgs e)

{

Response.Status = "301 Moved Permanently";

Response.AddHeader("Location","http://www.new-url.com");

}

These are some of the good techniques that you can use to redirect your web pages. Make sure that you use the right code.

If you like this, You’ll love These.

jQuery 1.3 with PHP – Free Chapter Download!

Andy Sowards — Wed, 27 Jan 2010 05:19:28 +0000

Advertise here with BSA

As some of you know I have recently been read Learning jQuery 1.3 Book from Packt Publishing and will be posting an in depth review of the content from start to finish very soon, so stay tuned!

I realize that jQuery 1.4 is already out and the Buzz around it is pretty high – however, if you are new to jQuery – You shouldn’t worry about jumping into the latest and greatest version. You should instead focus on learning the basic concepts of jQuery, and using them correctly, and once you are up to speed, then by all means jump into 1.4. but learning the foundation of jQuery from the ground up will save you a lot of time and frustration!

In the meantime, I have also been reading jQuery 1.3 with PHP and will be posting a review to that book as well very soon. If you can’t wait for the review then check out “Chapter 9: Data Tables” Yourself!!

You can get your hands on the free Chapter 9 download here.

From what I have read of “jQuery 1.3 with PHP” it is an Excellent resource for those who want to go all out and create a very nice web application on your own. This is a great read for those looking to ‘tie it all together’ and build a nice web app quickly and easily.

Its definitely worth picking up because you can learn a lot of good techniques for more efficient and clean code!

Stay tuned and Subscribe to the feed so that you won’t miss the awesome FULL review of the book!

If you like this, You’ll love These.

How to Add Flair to your Actions with jQuery – Part 3 – Javascript Tutorial

Packt Publishing — Thu, 22 Oct 2009 23:02:38 +0000

Advertise here with BSA

Welcome back to part 3 of Adding Flair to your Actions with jQuery! If you missed Part 2, go ahead and read that first, or just move ahead!

Simultaneous versus queued effects

The .animate() method, as we’ve just discovered, is very useful for creating simultaneous effects in a particular set of elements. There may be times, however, when we want to queue our effects, having them occur one after the other.

Working with a single set of elements

When applying multiple effects to the same set of elements, queuing is easily achieved by chaining those effects. To demonstrate this queuing, we’ll again move the Text Size box to the right, increase its height and increase its border width. This time, however, we perform the three effects sequentially, simply by placing each in its own .animate() method and chaining the three together:

$(document).ready(function() { 
  $('div.label').click(function() { 
    var paraWidth = $('div.speech p').outerWidth(); 
    var $switcher = $(this).parent(); 
    var switcherWidth = $switcher.outerWidth(); 
    $switcher 
 .animate({left: paraWidth - switcherWidth},  
                                             'slow')  
       .animate({height: '+=20px'}, 'slow')  
       .animate({borderWidth: '5px'}, 'slow');  
  }); 
});

Chaining permits us to keep all three .animate() methods on the same line, but here we have indented them and put each on its own line for greater readability.

We can queue any of the jQuery effect methods, not just .animate() , by chaining them. We can, for example, queue effects on in the following order:

Fade its opacity to .5 with .fadeTo() .
Move it to the right with .animate() .
Fade it back in to full opacity with .fadeTo() .
Hide it with .slideUp() .
Show it once more with .slideDown() .

All we need to do is chain the effects in the same order in our code:

$(document).ready(function() { 
    $('div.label').click(function() { 
      var paraWidth = $('div.speech p').outerWidth(); 
      var $switcher = $(this).parent(); 
      var switcherWidth = $switcher.outerWidth(); 
      $switcher 
 .fadeTo('fast',0.5)  
         .animate({  
           'left': paraWidth - switcherWidth  
         }, 'slow')  
         .fadeTo('slow',1.0)  
         .slideUp('slow')  
         .slideDown('slow');  
    }); 
});

But what if we want to move the to the right at the same time as it fades to half opacity? If the two animations were occurring at the same speed, we could simply combine them into a single .animate() method. But in this example, the fade is using the ‘fast’ speed while the move to the right is using the ‘slow’ speed. Here is where the second form of the .animate() method comes in handy:

$(document).ready(function() { 
    $('div.label').click(function() { 
      var paraWidth = $('div.speech p').outerWidth(); 
      var $switcher = $(this).parent(); 
      var switcherWidth = $switcher.outerWidth(); 
      $switcher 
        .fadeTo('fast',0.5) 
 .animate({  
           'left': paraWidth - switcherWidth  
         }, {duration: 'slow', queue: false})  
        .fadeTo('slow',1.0) 
        .slideUp('slow') 
        .slideDown('slow'); 
    }); 
});

The second argument, an options map, provides the queue option, which when set to false makes the animation start simultaneously with the previous one.

One final observation about queuing effects on a single set of elements is that queuing does not automatically apply to other, non-effect methods such as .css() . So let’s suppose we wanted to change the background color of to red after the .slideUp() but before the slideDown() . We could try doing it like this:

$(document).ready(function() { 
$('div.label').click(function() { 
      var paraWidth = $('div.speech p').outerWidth(); 
      var $switcher = $(this).parent(); 
      var switcherWidth = $switcher.outerWidth(); 
      $switcher 
        .fadeTo('fast',0.5) 
        .animate({ 
          'left' paraWidth - switcherWidth 
        }, 'slow') 
        .fadeTo('slow',1.0) 
        .slideUp('slow') 
 .css('backgroundColor','#f00')  
        .slideDown('slow'); 
      }); 
});

However, even though the background-changing code is placed at the correct position in the chain, it occurs immediately upon the click.

One way we can add non-effect methods to the queue is to use the appropriately named .queue() method. Here is what it would look like in our example:

$(document).ready(function() { 
    $('div.label').click(function() { 
      var paraWidth = $('div.speech p').outerWidth(); 
      var $switcher = $(this).parent(); 
      var switcherWidth = $switcher.outerWidth(); 
      $switcher 
        .fadeTo('fast',0.5) 
        .animate({ 
          'left': paraWidth - switcherWidth 
        }, 'slow') 
        .fadeTo('slow',1.0) 
        .slideUp('slow') 
 .queue(function() {  
           $switcher  
             .css('backgroundColor', '#f00')  
             .dequeue();  
        }) 
        .slideDown('slow'); 
    }); 
});

When given a callback function , as it is here, the .queue() method adds the function to the queue of effects for the matched elements. Within the function, we set the background color to red and then add the corollary .dequeue() method. Including this .dequeue() method allows the animation queue to pick up where it left off and complete the chain with the following .slideDown(‘slow’) line. If we hadn’t used .dequeue(), the animation would have stopped.

More information and examples for .queue() and .dequeue() are available at http://docs.jquery.com/Effects .

We’ll discover another way to queue non-effect methods as we examine effects with multiple sets of elements.

Working with multiple sets of elements

Unlike with a single set of elements, when we apply effects to different sets, they occur at virtually the same time. To see these simultaneous effects in action, we’ll slide one paragraph down while sliding another paragraph up. First, we’ll add the remaining portion of the Gettysburg Address to the HTML, dividing it into two separate paragraphs:

 

Text Size 

 
  
  
  
 

 

 


Fourscore and seven years ago our fathers brought forth 
     on this continent a new nation, conceived in liberty, and 
     dedicated to the proposition that all men are created 
     equal. 
 

 


Now we are engaged in a great civil war, testing whether 
     that nation, or any nation so conceived and so dedicated, 
     can long endure. We are met on a great battlefield of 
     that war. We have come to dedicate a portion of that 
     field as a final resting-place for those who here gave 
     their lives that the nation might live. It is altogether 
     fitting and proper that we should do this. But, in a 
     larger sense, we cannot dedicate, we cannot consecrate, 
     we cannot hallow, this ground. 
 

 
 read more  
 

The brave men, living and dead, who struggled  
      here have consecrated it, far above our poor  
      power to add or detract. The world will little  
      note, nor long remember, what we say here, but it  
      can never forget what they did here. It is for us  
      the living, rather, to be dedicated here to the  
      unfinished work which they who fought here have  
      thus far so nobly advanced.  
  

  
 

It is rather for us to be here dedicated to the  
      great task remaining before us—that from  
      these honored dead we take increased devotion to  
      that cause for which they gave the last full  
      measure of devotion—that we here highly  
      resolve that these dead shall not have died in  
      vain—that this nation, under God, shall  
      have a new birth of freedom and that government  
      of the people, by the people, for the people,  
      shall not perish from the earth.

Next, to help us see what’s happening during the effect, we’ll give the third paragraph a 1-pixel border and the fourth paragraph a gray background. We’ll also hide the fourth paragraph when the DOM is ready:

$(document).ready(function() { 
  $('p:eq(2)').css('border', '1px solid #333'); 
  $('p:eq(3)').css('backgroundColor', '#ccc').hide(); 
});

Finally, we’ll add the .click() method to the third paragraph so that when it is clicked, the third paragraph will slide up (and out of view), while the fourth paragraph slides down (and into view):

$(document).ready(function() { 
$('p:eq(2)') 
    .css('border', '1px solid #333') 
 .click(function() {  
       $(this).slideUp('slow')  
         .next().slideDown('slow');  
     });  
  $('p:eq(3)').css('backgroundColor', '#ccc').hide(); 
});

A screenshot of these two effects in mid-slide confirms that they do, indeed, occur virtually simultaneously:

The third paragraph, which started visible, is halfway through sliding up at the same time as the fourth paragraph, which started hidden, is halfway through sliding down.

Callbacks

In order to allow queuing effects on different elements, jQuery provides a callback function for each effect method. As we have seen with event handlers and with the .queue() method, callbacks are simply functions passed as method arguments. In the case of effects, they appear as the last argument of the method.

If we use a callback to queue the two slide effects, we can have the fourth paragraph slide down before the third paragraph slides up. Let’s first look at how to set up the .slideDown() method with the callback:

$(document).ready(function() { 
  $('p:eq(2)') 
    .css('border', '1px solid #333') 
    .click(function() { 
 $(this).next().slideDown('slow',function() {  
         // code here executes after 3rd paragraph's  
         // slide down has ended  
     });  
  }); 
  $('p:eq(3)').css('backgroundColor', '#ccc').hide(); 
 });

We do need to be careful here, however, about what is actually going to slide up. The context has changed for $(this) because the callback is inside the .slideDown() method. Here, $(this) is no longer the third paragraph, as it was at the point of the .click() method; rather, since the .slideDown() method is attached to $(this).next() , everything within that method now sees $(this) as the next sibling, or the fourth paragraph. Therefore, if we put $(this).slideUp(‘slow’) inside the callback, we would end up hiding the same paragraph that we had just made visible.

A simple way to keep the reference of $(this) stable is to store it in a variable right away within the .click() method, like var $thirdPara = $(this) .

Now $thirdPara will refer to the third paragraph, both outside and inside the callback. Here is what the code looks like using our new variable:

$(document).ready(function() { 
 var $thirdPara = $('p:eq(2)');  
  $thirdPara 
    .css('border', '1px solid #333') 
 .click(function() {  
      $(this).next().slideDown('slow',function() { 
 $thirdPara.slideUp('slow');  
      }); 
    }); 
  $('p:eq(3)').css('backgroundColor', '#ccc').hide(); 
});

Using $thirdPara inside the .slideDown() callback relies on the properties of closures .

This time a snapshot halfway through the effects will reveal that both the third and the fourth paragraphs are visible; the fourth has finished sliding down and the third is about to begin sliding up:

Now that we’ve discussed callbacks, we can return to the code from earlier in this article in which we queued a background-color change near the end of a series of effects. Instead of using the .queue() method, as we did earlier, we can simply use a callback function:

$(document).ready(function() { 
  $('div.label').click(function() { 
    var paraWidth = $('div.speech p').outerWidth(); 
    var $switcher = $(this).parent(); 
    var switcherWidth = $switcher.outerWidth(); 
    $switcher 
      .fadeTo('slow',0.5) 
      .animate({ 
        'left': paraWidth - switcherWidth 
      }, 'slow') 
      .fadeTo('slow',1.0) 
 .slideUp('slow', function() {  
         $switcher  
           .css('backgroundColor', '#f00');  
      }) 
      .slideDown('slow'); 
  }); 
});

Here again, the background color of changes to red after it slides up, and before it slides back down.

In a nutshell

With all the variations to consider when applying effects, it can become difficult to remember whether the effects will occur simultaneously or sequentially. A brief outline might help:

Effects on a single set of elements are:
– simultaneous when applied as multiple properties in a single .animate( ) method.
— queued when applied in a chain of methods, unless the queue option is set to false .
Effects on multiple sets of elements are:
— simultaneous by default
— queued when applied within the callback of another effect or within the callback of the .queue() method

Summary

By using effect methods that we have explored in this article, we should now be able to incrementally increase and decrease text size by using either the .css( ) or the .animate() method. We should also be able to apply various effects to gradually hide and show page elements in different ways and also to animate elements, simultaneously or sequentially, in a number of ways.

Better Interaction Design and Web Development with Simple JavaScript Techniques
An introduction to jQuery that requires minimal programming experience
Detailed solutions to specific client-side problems
For web designers to create interactive elements for their designs
For developers to create the best user interface for their web applications
Packed with great examples, code, and clear explanations
Revised and updated version of the first book to help you learn jQuery

http://www.packtpub.com/learning-jquery-1.3/book

If you like this, You’ll love These.

How to Add Flair to your Actions with jQuery – Part 2 – Javascript Tutorial

Packt Publishing — Sat, 10 Oct 2009 01:03:43 +0000

Advertise here with BSA

Welcome back to part 2 of Adding Flair to your Actions with jQuery! If you missed Part 1, go ahead and read that first, or just move ahead!

Basic hide and show

The basic .hide() and .show() methods, without any parameters, can be thought of as smart shorthand methods for .css(‘display’,'string’) , where ‘string’ is the appropriate display value. The effect, as might be expected, is that the matched set of elements will be immediately hidden or shown, with no animation.

The .hide() method sets the inline style attribute of the matched set of elements to display:none . The smart part here is that it remembers the value of the display property—typically block or inline —before it was changed to none . Conversely, the .show() method restores the matched set of elements to whatever visible display property they had before display:none was applied.

For more information about the display property and how its values are visually represented in a web page, visit the Mozilla Developer Center at https://developer.mozilla.org/en/CSS/display/ and view examples at https://developer.mozilla.org/samples/cssref/display.html.

This feature of .show() and .hide() is especially helpful when hiding elements whose default display property is overridden in a stylesheet. For example, the element has the property display:block by default, but we might want to change it to display:inline for a horizontal menu. Fortunately, using the .show() method on a hidden element such as one of these tags would not merely reset it to its default display:block , because that would put the on its own line. Instead, the element is restored to its previous display:inline state, thus preserving the horizontal design.

A quick demonstration of these two methods can be set up by adding a second paragraph and a “read more” link after the first paragraph in the example HTML:


Text Size

Fourscore and seven years ago our fathers brought forth
on this continent a new nation, conceived in liberty,
and dedicated to the proposition that all men are created
equal.

Fourscore and seven years ago our fathers brought forth
on this continent a new nation, conceived in liberty,
and dedicated to the proposition that all men are
created equal.

Now we are engaged in a great civil war, testing whether
that nation, or any nation so conceived and so dedicated,
can long endure. We are met on a great battlefield of
that war. We have come to dedicate a portion of that
field as a final resting-place for those who here gave
their lives that the nation might live. It is altogether
fitting and proper that we should do this. But, in a
larger sense, we cannot dedicate, we cannot consecrate,
we cannot hallow, this ground.

When the DOM is ready, the second paragraph is hidden:

$(document).ready(function() { 
  $('p:eq(1)').hide(); 
});

And the speech looks like the following screenshot:

Then, when the user clicks on read more at the end of the first paragraph, that link is hidden and the second paragraph is shown:

$(document).ready(function() { 
  $('p:eq(1)').hide(); 
 $('a.more').click(function() {  
     $('p:eq(1)').show();  
     $(this).hide();  
     return false;  
   });  
});

Note the use of return false to keep the link from activating its default action. Now the speech looks like this:

The .hide() and .show() methods are quick and useful, but they aren’t very flashy. To add some flair, we can give them a speed.

Effects and speed

When we include a speed (or, more precisely, a duration ) with .show() or .hide() , it becomes animated—occurring over a specified period of time. The .hide(‘speed’) method, for example, decreases an element’s height, width, and opacity simultaneously until all three reach zero, at which point the CSS rule display:none is applied. The .show(‘speed’) method will increase the element’s height from top to bottom, width from left to right, and opacity from 0 to 1 until its contents are completely visible.

Speeding in

With any jQuery effect, we can use one of three preset speeds: ‘slow’ , ‘normal’ , and ‘fast’ . Using .show(‘slow’) makes the show effect complete in .6 seconds, .show(‘normal’) in .4 seconds, and .show(‘fast’) in .2 seconds. For even greater precision we can specify a number of milliseconds, for example .show(850) . Unlike the speed names, the numbers are not wrapped in quotation marks.

Let’s include a speed in our example when showing the second paragraph of Lincoln’s Gettysburg Address :

$(document).ready(function() { 
  $('p:eq(1)').hide(); 
  $('a.more').click(function() { 
 $('p:eq(1)').show('slow');  
    $(this).hide(); 
    return false; 
  }); 
});

When we capture the paragraph’s appearance at roughly halfway through the effect, we see something like the following:

Fading in and fading out

While the animated .show() and .hide() methods are certainly flashy, they may at times be too much of a good thing. Fortunately, jQuery offers a couple other pre-built animations for a more subtle effect. For example, to have the whole paragraph appear just by gradually increasing the opacity, we can use .fadeIn(‘slow’) instead:

$(document).ready(function() { 
  $('p:eq(1)').hide(); 
  $('a.more').click(function() { 
 $('p:eq(1)').fadeIn('slow');  
    $(this).hide(); 
    return false; 
  }); 
});

This time when we capture the paragraph’s appearance halfway, it’s seen as:

The difference here is that the .fadeIn() effect starts by setting the dimensions of the paragraph so that the contents can simply fade into it. To gradually decrease the opacity we can use .fadeOut() .

Better Interaction Design and Web Development with Simple JavaScript Techniques
An introduction to jQuery that requires minimal programming experience
Detailed solutions to specific client-side problems
For web designers to create interactive elements for their designs
For developers to create the best user interface for their web applications
Packed with great examples, code, and clear explanations
Revised and updated version of the first book to help you learn jQuery

http://www.packtpub.com/learning-jquery-1.3/book

Compound effects

Sometimes we have a need to toggle the visibility of elements, rather than displaying them once as we did in the previous example. Toggling can be achieved by first checking the visibility of the matched elements and then attaching the appropriate method. Using the fade effects again, we can modify the example script to look like this:

$(document).ready(function() { 
  var $firstPara = $('p:eq(1)'); 
  $firstPara.hide(); 
  $('a.more').click(function() { 
    if ($firstPara.is(':hidden')) { 
      $firstPara.fadeIn('slow'); 
      $(this).text('read less'); 
    } else { 
      $firstPara.fadeOut('slow'); 
      $(this).text('read more'); 
    } 
    return false; 
  }); 
});

As we did earlier in the article, we’re caching our selector here to avoid repeated DOM traversal. Notice, too, that we’re no longer hiding the clicked link; instead, we’re changing the its text.

Using an if else statement is a perfectly reasonable way to toggle elements’ visibility. But with jQuery’s compound effects we can leave the conditionals out of it (although, in this example, we still need one for the link text). jQuery provides a .toggle() method, which acts like .show() and .hide() , and like them, can be used with a speed argument or without. The other compound method is .slideToggle() , which shows or hides elements by gradually increasing or decreasing their height. Here is what the script looks like when we use the .slideToggle() method:

$(document).ready(function() { 
var $firstPara = $('p:eq(1)'); 
  $firstPara.hide(); 
  $('a.more').click(function() { 
 $firstPara.slideToggle('slow');  
     var $link = $(this);  
     if ( $link.text() == "read more" ) {  
       $link.text('read less');  
     } else {  
       $link.text('read more');  
     }  
    return false; 
  }); 
});

This time $(this) would have been repeated, so we’re storing it in the $link variable for performance and readability. Also, the conditional statement checks for the text of the link rather than the visibility of the second paragraph, since we’re only using it to change the text.

Creating custom animations

In addition to the pre-built effect methods, jQuery provides a powerful .animate() method that allows us to create our own custom animations with fine-grained control. The .animate() method comes in two forms. The first takes up to four arguments:

A map of style properties and values—similar to the .css() map discussed earlier in this article
An optional speed —which can be one of the preset strings or a number of milliseconds
An optional easing type —an advanced option
An optional callback function—which will be discussed later in this article

All together, the four arguments look like this:

.animate({property1: 'value1', property2: 'value2'}, 
  speed, easing, function() { 
    alert('The animation is finished.'); 
  } 
);

The second form takes two arguments, a map of properties and a map of options.

.animate({properties}, {options})

In effect, the second argument wraps up the second through fourth arguments of the first form into another map, and adds two more options to the mix. When we adjust the line breaks for readability, the second form looks like this:

.animate({ 
  property1: 'value1', 
  property2: 'value2' 
}, { 
  duration: 'value', 
  easing: 'value', 
  complete: function() { 
    alert('The animation is finished.'); 
  }, 
  queue: boolean, 
  step: callback 
});

For now we’ll use the first form of the .animate() method, but we’ll return to the second form later in the article when we discuss queuing effects.

Toggling the fade

When we discussed compound effects, did you notice that not all methods have a corresponding method for toggling? That’s right: while the sliding methods include .slideToggle() , there is no corresponding .fadeToggle() to go along with .fadeIn() and .fadeOut() ! The good news is that we can use the .animate() method to easily make our own toggling fade animation. Here we’ll replace the .slideToggle() line of the previous example with our custom animation:

$(document).ready(function() { 
  $('p:eq(1)').hide(); 
  $('a.more').click(function() { 
  $('p:eq(1)').animate({opacity: 'toggle'}, 'slow');  
    var $link = $(this); 
    if ( $link.text() == "read more" ) { 
      $link.text('read less'); 
    } else { 
      $link.text('read more'); 
    } 
    return false; 
  }); 
});

As the example illustrates, the .animate() method provides convenient shorthand values for CSS properties — ‘show’ , ‘hide’ , and ‘toggle’ — to ease the way when the shorthand methods aren’t quite right for the particular task.

Animating multiple properties

With the .animate() method, we can modify any combination of properties simultaneously. For example, to create a simultaneous sliding and fading effect when toggling the second paragraph, we simply add the height property-value pair to .animate() ‘s properties map:

$(document).ready(function() { 
  $('p:eq(1)').hide(); 
  $('a.more').click(function() { 
 $('p:eq(1)').animate({  
       opacity: 'toggle',  
       height: 'toggle'  
     },  
     'slow');  
    var $link = $(this); 
    if ( $link.text() == "read more" ) { 
      $link.text('read less'); 
    } else { 
      $link.text('read more'); 
    } 
    return false; 
  }); 
});

Additionally, we have not only the style properties used for the shorthand effect methods at our disposal, but also other properties such as: left , top , fontSize , margin , padding , and borderWidth . Recall the script to change the text size of the speech paragraphs. We can animate the increase or decrease in size by simply substituting the .animate() method for the .css() method:

$(document).ready(function() { 
  var $speech = $('div.speech'); 
  var defaultSize = $speech.css('fontSize'); 
  $('#switcher button').click(function() { 
    var num = parseFloat( $speech.css('fontSize'), 10 ); 
    switch (this.id) { 
      case 'switcher-large': 
        num *= 1.4; 
        break; 
      case 'switcher-small': 
        num /= 1.4; 
        break; 
      default: 
        num = parseFloat(defaultSize, 10); 
    } 
    $speech.animate({fontSize: num + 'px'}, 
                                    'slow'); 
  }); 
});

The extra properties allow us to create much more complex effects, too. We can, for example, move an item from the left side of the page to the right while increasing its height by 20 pixels and changing its border width to 5 pixels.

So, let’s do that with the box. Here is what it looks like before we animate it:

With a flexible-width layout, we need to compute the distance that the box needs to travel before it lines up at the right side of the page. Assuming that the paragraph’s width is 100%, we can subtract the Text Size box’s width from the paragraph’s width. While jQuery’s .width() method would usually come in handy for such calculations, it doesn’t factor in the width of the right and left padding or the right and left border. As of jQuery version 1.2.6, though we also have the .outerWidth() method at our disposal. This is what we’ll use here, to avoid having to add padding and border widths as well. For the sake of this example, we’ll trigger the animation by clicking the Text Size label, just above the buttons. Here is what the code should look like:

$(document).ready(function() { 
  $('div.label').click(function() { 
    var paraWidth = $('div.speech p').outerWidth(); 
    var $switcher = $(this).parent(); 
    var switcherWidth = $switcher.outerWidth(); 
    $switcher.animate({left: paraWidth - switcherWidth, 
             height: '+=20px', borderWidth: '5px'}, 'slow'); 
  }); 
});

Note that the height property has += before the pixel value. This expression, introduced in jQuery 1.2, indicates a relative value . So, instead of animating the height to 20 pixels, the height is animated to 20 pixels greater than the current height.

Although this code successfully increases the height of the and widens its border, at the moment the left position cannot be changed. We still need to enable changing its position in the CSS.

Positioning with CSS

When working with .animate() , it’s important to keep in mind the limitations that CSS imposes on the elements that we wish to change. For example, adjusting the left property will have no effect on the matching elements unless those elements have their CSS position set to relative or absolute . The default CSS position for all block-level elements is static, which accurately describes how those elements will remain if we try to move them without first changing their position value.

For more information on absolute and relative positioning, see Joe Gillespie’s article, Absolutely Relative at: http://www.wpdfd.com/issues/78/absolutely_relative/

A peek at our stylesheet shows that we have now set to be relatively positioned:

 #switcher { 
  position: relative; 
}

With the CSS taken into account, the result of clicking on Text Size, when the animation has completed, will look like this:

Better Interaction Design and Web Development with Simple JavaScript Techniques
An introduction to jQuery that requires minimal programming experience
Detailed solutions to specific client-side problems
For web designers to create interactive elements for their designs
For developers to create the best user interface for their web applications
Packed with great examples, code, and clear explanations
Revised and updated version of the first book to help you learn jQuery

http://www.packtpub.com/learning-jquery-1.3/book

If you feel confident in what you just read, then go ahead and move on to Part 3! Of course, it always helps to read things a second or third time first, just to let it sink in. Good luck! I hope you are learning some cool tricks!