Website Design: JQuery from Scratch p2

Last weeks blog post saw us looking at how to download and import the JQuery framework into your website design document. For this weeks post, I will be getting to the interesting part, where we can actually begin to animate aspects of our website.

This week, we will be starting to write the code from scratch to implement basic animation into your website design. In order to write JQuery from Scratch, you will have to have a basic understanding writing JavaScript, if this is something that you are not familiar with, then you can always start by using the code below and begin to understand how the code works.

Simple Animations for Website Design

Google maps example: Keeping with the theme of being able to add JQuery to your design, I’m going to animate a simple Google Map to show when you click on the link.

Here is the link to the fully working demo…

Below are the simple steps, which you can follow, I’ll also include a zip of all the files at the end of the post for your reference, but the aim here is to start writing your own JQuery.

Loading the Library

If you missed last week’s blog post, the you can find out how to download and import the library here.

HTML & CSS Design

1. Start by creating a simple container to hold the Google Maps iFrame using standard CSS and XHTML
2. Create the ‘Show Map’ link which, when clicked will prompt the box to open; I’ve also style this too!
3. With this in place, we now need to hide the div using display:none; for when the page loads.


body { font-family:Verdana, Geneva, sans-serif; font-size:62.5%}

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

#container a { background:#CCC; color:#FFF; padding:5px; font-size:1.2em; text-decoration:none; clear:both; outline:none;}

#box { width:425px; height:350px; border:3px solid #ccc; display:none; padding:5px; margin-bottom:5px;}

For the example, I have included the Google maps code with #box from the Creare Group Listing. You can add you own here if you like.

JavaScript

The JavaScript function that we now need write allows us to switch between the original state that we defined in the CSS and the display:none state.

4. In the head of your page you can start to write the JavaScript code below

We are simply creating a function, which will run when an anchor link or ‘a’ is clicked, and within that function, will be another function, which uses the JQuery animation properties to make the Google Maps box appear.

$('#box').toggle(1000);

The toggle effect will allow the same link to both hide and show the div
I recommend that you have a play around with some of the built in effects available for you to use for this transition. To switch the effect simply replace the toggle(1000) with any of the effects below. 1000 represents the duration of the effect, and in this case equals 1 second.

JQuery Website Animation Effects

Basics – These will open or close by adjusting each of the height, width and opacity.

• show()
• hide()
• toggle()

Sliding – Sliding effect either up or down

• slideDown()
• slideUp()
• slideToggle()

Fading – Make the div fade in or out

• fadeIn()
• fadeOut()

Download the Website Design Files

Here is the link to the required files for this tutorial – Download Files

Coming Up Next Week

A look at how you can begin to work with manipulating selectors on-the-fly and examples of how they can be used in Website Design

6 Part Quick Reference

• Part 1. Downloading and loading the library
• Part 2. Basic Animation
• Part 3. Advanced Selectors
• Part 4. Basic Form Validation
• Part 5. JQuery within my Website Design
• Part 6. More Examples and Further Resources