Stupid Browser Tricks: Day Two Notes

On day two, we began by looking at a modification on the Image Map exercise

Get the PowerPoint: Stupid Browser Tricks – day 2

Image Map Expansion Set

The image map idea we did in day one simply displays text when you hover over a region of your image (the <area> tag). It uses the innerHTML() method to inject content. You can inject tags as well as text. This allows us to inject images, tables, lists, whatever. Taking advantage of this fact, you can inject the image tag and have an image appear when you hover over the region.

I recommend that you inject an image tag inside of a div tag, since the image tag is an inline tag. I also recommend that all images displayed have the same width (and, preferrably) height. I also recommend that you display a default image on mouseout.

For the sample code with notes, view the JavaScript Samples: Image Map (with Expansion Set)

The SuperFish Menu

I should probably review all the steps in general. I decided to make a separate post on just the Superfish, since it is after all, super-fishey. Stay tuned for that. When I get it all up and running, I’ll come back here and post a link.

Troubleshooting JavaScript

After many trials and errors in all of the various projects we did, we came to the conclusion that there were only 2 main sources of errors with our JavaScript coding:

Spelling (Primarily Case-Sensitivity)

Some of the following samples of errors because of spelling or case-sensitivity mismanagement were real examples from our class and some were made up to prove a point (I’ll let you guess):

  • MyFunction(), myFunction(), myfunction() are all different functions
  • alertTxt is not the same variable as alerttxt
  • We initialize the jQuery plugin with the jQuery() function call—not the jquery() function call and not the jQuerry() function call.

The Curly Braces { } v. the Parentheses ( )

As long as you use copy and paste, there typically isn’t an issue with this problem. It usually occurs when you are writing your own home-made code, or you’re in a workshop like mine trying to type what you see. That being said, if you know the difference between the two symbols, you’ll make far fewer mistakes (especially for the “home brewed” JavaScript). Here are the rules:

  • Parentheses ( ) are for function or method calls like alert(“Yikes!”);
    • When you define your function
    • When you call your function
  • Parentheses ( ) are also for comparing values – like after the if, else if, else, for, with, and while keywords
    • if (x > 25)
    • with (thisForm)
  • Curly Braces { } are for surrounding blocks of code
    • When you define a function, all the code for that function goes inside a set of curly braces
    • After conditional statements like if (x > 10), we need to group the code that will run under that condition
    • After loop headers like while (x > 0), we need to group the code that will run each time we loop

Please let me know if I missed anything. Note also that I did not cover the brackets [ ], that’s only because we didn’t have the time to cover those, but if you are interested, it’s used for index values of arrays or strings, and gets used often times with for loops.