Weds., March 31: jQuery Implementations

Due Wednesday, March 31 by the FIRST of class:

Implement at least two additional strategic uses of jQuery into one of your web designs.

Implementations should include, at a minimum:

1. A content or image slider (see the recommended option below).
2. A hide/show or toggle effect (see the recommended options below).

Simplified Framework Files

If you’d like to use this, here is:

• a slightly simplified framework, with fewer CSS rules
• view a demo of this framework online

Remember these key steps as you implement these:

1. Ensure you have your link to jQuery in the head of your HTML document — and that the jQuery file is in fact in place where it should be.
2. If additional javascript files are required, add them to an appropriate folder AND THEN add a link to each in the head of your HTML document, right under your jquery link.
3. If CSS styles are require:
   • EITHER place the additional stylesheet in an appropriate folder and add a link to the additional stylesheet,
   • OR copy and paste the required CSS code to a section near the bottom of your own stylesheet file.
4. In your HTML file, be sure to add any needed id’s or classes to the appropriate element(s).
5. Place the script that activates the function in the head of the document, underneath the links to CSS and JS files. The script usually begins something like: “$(document).ready(function() { …” –
   (NOTE: Some developers prefer to place the script at the bottom of the file, just before the closing body tag. Watch for this in Erik Smith’s slider. We will discuss the reason for this in class, but to keep things simple for now, just realize that the function works just fine either way.)
6. Test and trouble-shoot. If it doesn’t work, DOUBLE-CHECK TO MAKE SURE that file required files are in the appropriate folders, that the links to those files are all correct, that there are no typo’s, etc. (If it still doesn’t work, have someone else double-check with you.)
7. Once it works, adjust the details of the CSS or the Javascript to make it look and act just the way you’d like it to.

Recommended Content or Image Slider

I will be able to offer assistance with implementing this one:

• Erik Smith’s jQuery Slider: View the Demo — Download the files

Other options are available here (Pursue them at your own risk):

• Think.ingCreative’s jQuery Slider Roundup

Recommended Tutorials for a Hide/Show or Toggle Effect

This is the effect I have used in these places:

• Think.ingCreative Sidebar drop-downs
• Online ad for VolunteerBartlesville.com

I will be able to assist you with implementing the effect using one of these tutorials:

• Soh Tanaka’s “Simple Toggle with CSS & jQuery”
• “Slicker Show and Hide” at Learning jQuery

Other Options?

Feel free to pursue other options. I have begun a page of jQuery Resources here.