GWDA223 Intermediate Web Page Scripting :: Art Institute

Week 5: Scripting and CSS Tricks

Student Showcase

We will take a look at any of your new work which is ready to share.

  • Kuler Design
  • Background Tile

Client-Side Scripting: JavaScript & jQuery

View Slideshow: PPT

View Slideshow: PDF

JavaScript

JavaScript is the basis for both jQuery and Spry applications. JavaScript is referred to as a client-side scripting language:

  • It does not need to be parsed by the server like PHP and ASP do (these are server-side scripts.)
  • It is interpreted and rendered by the browser (the client) after the page is loaded.

JavaScript is not the same as Java, which is a server-side programming language. Because it is run on the client end, JavaScript is subject to all the quirks of various browsers (just like CSS.) It should not be used for mission-critical functionality, because the user can turn it off. JavaScript should degrade elegantly (if users turn it off, the page will still work.)

Like CSS, JavaScript can be placed:

  • inline with content on the page
  • in the head of the page (internal)
  • in an external file ending with .js

Like CSS, external files are preferred:

  • to keep our markup clean
  • to have access to the script from any page

jQuery

jQuery is a method of using a JavaScript library which is already scripted for you. jQuery scripts can do all kinds of fancy things on your site. You simply:

  • download the library you want
  • put files in the right places
  • add links to the scripts in your markup
  • make a few changes to your existing markup

Lightbox

Lightbox is a set of JavaScript scripts—a jQuery plugin—that will allow you to have images (or other content) open with an animation in an overlay window. It provides a nice interface for viewing images.

Exercise: Lightbox

  1. Download and extract the Lightbox.zip file from the Lightbox2 website: http://www.huddletogether.com/projects/lightbox2/. I will provide further directions below, but you can also get them from the website.
  2. Download our starter gallery:
  3. Extract the gallery file to your Desktop. Rename the extracted folder as mygallery.
  4. Grab a few files from the extracted Lightbox folder:
    • Move the js folder into your gallery folder.
    • Move the lightbox.css file into your gallery’s css folder.
    • Move the image files into your gallery’s images folder. You can delete the Examples folder.

We’re done with the Lightbox folder. Future steps will refer to your gallery site folder only.

  1. In index.html, add links to the two .js files within your <head> element:
    • <script src="js/jquery-1.7.2.min.js"></script>
    • <script src="js/lightbox.js"></script>
  2. Add the link to the CSS file in the <head> element:
    • <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
      Be sure the paths are correct to those files.
  3. If you have another CSS file to load be sure it comes after the lightbox.css file, so that any CSS you have written will override the styles for Lightbox.
  4. To enable the Lightbox, add some markup to the <a> tags on index.html:
    • Add the rel="lightbox" attribute.
    • Putting [group name] will put the photos in a group so that you can click next or previous to scroll through them.
    • Adding a title="caption name" attribute will display a caption below the picture.

Example <a> element:

<a href="images/apple.jpg" rel="lightbox[fruit]" title="photo of an apple"><img src="images/apple-thumbnail.jpg" alt="photo of an apple" /></a>

That’s it. Assuming your links to the support files are correct, it should work. Test it!

Then ZIP up the mygallery folder and turn it in.

More on jQuery

If Lightbox or other jQuery plugins are not working, it can often be attributed to a conflict with other JavaScript being run on the page. There are a number of other scripts available that do much the same as Lightbox, built with different libraries, or with slightly different functionality. A whole catalog of jQuery plugins can be downloaded from http://plugins.jquery.com/. Take a few minutes and check some of the demos out.

CSS Sprites

CSS Sprites are single images which contain a whole set of images. The large image can then be shifted around within those little "windows" we opened up in divs by specifying a height along with a width.

Sounds complicated, but luckily there is a free CSS Sprite Generator, waiting to help you out.

  1. Upload all of your button/icon images.
  2. Select your positioning options. For example, set the padding to 0px.
  3. Click Generate.

CSS Sprites Generator

  1. Download the resulting sprite image and save it in your images folder. All of your images have been combined into one.

nav-sprite.png

  1. You are also given some CSS recommendations. Use the same HTML as before, but your CSS now includes the property background-position:

#menu {
width: 300px;
margin-left: auto;
margin-right: auto;
}
#menu ul {
padding: 0px;
margin: 0px;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
width: 100px;
height: 20px;
}
#home a {
background-image: url(images/nav-sprite.png);
background-position: 0px -20px;
}
#home a:hover {
background-image: url(images/nav-sprite.png);
background-position: 0px 0px;
}
#about a {
background-image: url(images/nav-sprite.png);
background-position: 0px -60px;
}
#about a:hover {
background-image: url(images/nav-sprite.png);
background-position: 0px -40px;
}
#contact a {
background-image: url(images/nav-sprite.png);
background-position: 0px -100px;
}
#contact a:hover {
background-image: url(images/nav-sprite.png);
background-position: 0px -80px;
}

Why use this technique? Well, it tends to save on download weight and on your server's bandwidth. My six images individually total about 10KB in file size. The single sprite image weighs less than 6KB. This can make a big difference if your use the CSS sprites technology in many different places throughout your site. And it means in this case only having to keep track of one image in your site structure rather than 6. Example.

Son of Suckerfish

Son of Suckerfish Dropdown Menus

Exercise: Son of Suckerfish Menu

Create the Basic HTML Markup
  1. Create a site folder named suckerfish.
  2. In Dreamweaver, set up a new site definition for suckerfish.
  3. Create a new HTML file and save it into your suckerfish folder as index.html.
  4. Change the page title to Son of Suckerfish Dropdown Menu.
  5. In Design view, we are going to build a multi-level unordered list which will serve as our dropdown menu after some styling. Type in each of these menu items as you see them below, pressing Enter/Return between items to put them into separate paragraph elements:

Son of Suckerfish dropdown menus - initial list

  1. Press Ctrl+A (PC) or Cmd+A (Mac) to select all of the content on the page.
  2. Click on the Unordered List button in the Properties panel.

Son of Suckerfish dropdown menus - unordered list

  1. Select all of the text from Tigers through Otters. Click the Indent button in the Properties panel once.
  2. Do the same for all of the two lines that read Flamingos and Ostriches, as well as for all of the text from Cobras through Tortoises.
  3. Further indent the two lines that read Siberian Tiger and Sumatran Tiger together.
  4. Do the same for the two lines that read Sperm Whale and Orca together. Also indent King Cobra and Burrowing Cobra together. This should be your result:

Son of Suckerfish dropdown menus - nested unordered lists

What you have now is a collection of nested unordered lists which establish a navigational heirarchy. For example, we'd want to hover over Mammals and see Tigers, Whales, and Otters. Then if we hovered over Whales, we'd want to see Sperm Whale and Orca. Here is what the HTML looks like so far:

Son of Suckerfish dropdown menus - markup for nested unordered lists

  1. Now we need to turn them all into links. We don't need them to actually go anywhere, so we just use the pound sign (#) as the path. Back in Design view select all, then in the Properties panel type # into the Link text box. This amazingly puts separate links to "#" for each individual menu item.

Son of Suckerfish dropdown menus - adding anchor elements

  1. We need one last piece of markup in our HTML file. In Code view, add the "nav" id to the open <ul> tag:

Son of Suckerfish dropdown menus - adding menu id to ul tag

Creating the Dropdown Styles

Note: Son of Suckerfish uses ems as a unit of measurement. One em is equal to the current font size (the default font size for paragraphs being 16px.) Using ems means that the widths and other measurements adapt automatically to the font size that the reader uses. Yellow highlighting means to go back to an existing rule and add the highlighted code.

  1. In Dreamweaver, create a new CSS file and save it as menu.css in your suckerfish folder.
  2. Return to your HTML file and link it to the new stylesheet using the Attach Stylesheet button in the CSS Styles panel.
  3. Type up the following styles for your menu:

Son of Suckerfish dropdown menus - starting the css

The first rule tells the unordered list not to indent or have bullets. The second rule tells the anchor tag to expand to fill the containing <li> element. The third rule tells the <li> elements to flow horizontally and to be a consistent, specific width.

  1. Test index.html in a browser. The top-level menu items of Home, Mammals, Birds, and Reptiles should now display horizontally. The remaining, nested menu items all flow vertically down from the top-level items. The bullet points have disappeared too.

Son of Suckerfish dropdown menus - starting the css

  1. The page linked above goes into the specifics about the following code, so if you are interested in why this works please check out that page. Essentially, what we need to do is tell nested items to hide off the left edge of the screen until their parent menu item is hovered over—then they reappear. Add this code to the bottom of your stylesheet:

Son of Suckerfish dropdown menus - continuing the css

Son of Suckerfish dropdown menus - continuing the css

  1. Now we need to get the third-level menus to behave. The rule below tells them to hide for now. Add this to the bottom of your stylesheet:

Son of Suckerfish dropdown menus - continuing the css

  1. In order to get the third-level menus to line up correctly with their parents, we need to go back and add line-height: 1 to the main <ul> rule (which will affect all <ul> elements within the menu):

Son of Suckerfish dropdown menus - continuing the css

Adding Some JavaScript for Internet Explorer
  1. Now here's where we need to add a bit of Javascript in before we build the rest of our CSS. Internet Explorer may not fully support the :hover pseudoclass, so we write up a JavaScript function to create its own version called sfhover. Create a new JavaScript file named suckerfish.js and save it in your suckerfish folder.
  2. Copy and paste this script into suckerfish.js:

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

  1. Go back to index.html, then link it to the JavaScript file. Type this somewhere inside the head element:

<script type="text/javascript" src="suckerfish.js"></script>

Finishing Up the Dropdown CSS
  1. Here's the last new CSS rule to the bottom of the stylesheet:

Son of Suckerfish dropdown menus - finishing up the css

  1. We need to call the sfhover function from the existing selector for second-level menus being hovered over. Don't forget the comma:

Son of Suckerfish dropdown menus - finishing up the css

  1. Then we need to add a couple of more selectors to it for third level menus too. Don't forget the commas:

Son of Suckerfish dropdown menus - finishing up the css

  1. Finally, move this multi-selector rule to the very bottom of the stylesheet so that it overrides all the other dropdown actions:

Son of Suckerfish dropdown menus - finishing up the css

Your menu should work well now, though it looks a bit bleak.

SOn of Suckerfish completed menu function

Make the Buttons Prettier

This menu is pretty plain-Jane (even ugly) so far. Let's spruce it up. Use your own fonts, colors, and sizing.

  1. Add some font styling to the unordered list:

Son of Suckerfish - making the menu prettier

  1. Remove the underlines from the anchor tags and change their color:

Son of Suckerfish - making the menu prettier

  1. Give the list items a background color, a border, and some padding:

Son of Suckerfish - making the menu prettier

  1. Add a new rule below that one which changes the background color on hover:

Son of Suckerfish - making the menu prettier

Here's my finished dropdown menu design:

Son of Suckerfish - finished menu design

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
5 MyGallery mygallery.zip
Son of Suckerfish Menu suckerfish.zip

Assignment Details

MyGallery

Complete the activity described to the left under "Exercise: Lightbox."

Son of Suckerfish Menu

Complete the activity described to the left under "Exercise: Son of Suckerfish Menu."