JavaScript

Info about that all too famous scripting language. It’s free, it runs on your browser, it can do a lot of useful and stupid tricks.

OSU SuperQuest WordPress Showcase

I wanted to show off the brilliant work of my WordPress workshop participants from the Web Design: from Soup to Nuts course at OSU a few weeks back. Students (mostly teachers) learned about the core web technologies used in WordPress (X/HMTL, CSS, PHP, JavaScript, MySQL), manually installed WordPress on a server, developed a blog or website using WordPress, and learned how to modify the layout & structure of their site using the Appearance Editor.
Click a thumbnail to visit the site:

Sanders' Resources

Sander’s Resources
Image of Rainy Day Books Website

Rainy Day Books
Picture of Math Dude screenshot

Math Dude’s website


Picture of the Literature website

Literature is About Life web site
Image of THS Tech website

Tigard High School Tech Website
Picture of Twenty-Five into Twenty-Four Website

Twenty-five into Twenty-four Website



I had more participants, but I’m still waiting to see if they’ll send me the links to their sites. If I get more, I’ll post them here.

The SuperFish Menu – “It’s Super-fishey!”

The Superfish plug-in rocks the free world, if you ask me, but I had a few problems implementing the JavaScript on my own CSS-styled menus. I therefore set out to expand their instructions and “fix” the ones that caused problems.

Start with a nested list of links.

There are many resources on using CSS to create fancy navigation bars. My top recommendation for any web designer is to start with CSS Max Design. They have a listutorial that explains the trick to creating horizontal and vertical navigation menus using only HTML and CSS. They also explain how to style nested lists. CSS Max Design also has a repository of probably 100 different menu styles, all using HTML and CSS only.

For the Superfish menu to work, you must begin with a nested list of links. Go to CSS Max Design’s Listamatic 2 and chose a CSS-driven layout that we liked (horizontal or vertical) – my favorite was “borders and indents” – you pick your own. It really doesn’t matter which menu you like because they all use the exact same HTML code.

Step 1: Copy the HTML Code and paste it on your web page.

A good place to stick this code is right after your header (<h1>) or in a banner or header div (<div id=”banner”>

Step 2: Change the <ul id=”subnavlist”> to <ul class=”subnavlist”>

Why? With the listamatic, they only contain 1 nested list (under “item one”). However, in the real world, there are typically 2 or more nested lists. Since the id attribute is a unique identifier, in theory, you should not have the same id attribute twice. That’s reserved for a class attribute.

Your nested list of links should look something like this when you’re done:

You’ll note I added a comment at the top, that was not in the listamatic, but it doesn’t really affect anything. Note also how I added a second “subnavlist”.

You might like to know that you can most probably nest a nested list. In my workshop, I did a quadruple nested list (a list within a list within a list within a list) just to see how the superfish handled it, and the only issue was the width of the entire menu made it a little cramped.

<div id="navcontainer">
<!-- Create an unordered list of links -->
<ul id="navlist">
 <li><a href="index.html">Home</a></li>
 <li><a href="#">Page One</a>
 <ul>
 <li><a href="#">Sub Item One</a></li>
 <li><a href="#">Sub Item Two</a></li>
 <li><a href="#">Sub Item Three</a>
 </li>
 <li><a href="#">Page Two</a></li>
 <li><a href="#">Page Three</a>
 </ul>
 <li><a href="#">Sub Item One</a></li>
 <li><a href="#">Sub Item Two</a></li>
 </ul>
 </li>
 <li><a href="#">Page Four</a></li>
</ul>
</div>

Create an external style sheet for your Navbar

Did you see my post on Notepad++, because it’s the best web design tool in the universe. If you don’t have Notepad++, download it now, and then you can proceed.

Step 3: Find a Listamatic2 Navbar that you Like

Note: if you are a seasoned code monkey, you may wish to create your own CSS code for the navigation bar. If that’s you, just skip the steps involving copy and paste from listamatic2.

  1. In Notepad++ (or whatever editor you like) Create a new file
  2. Find the listamatic2 CSS code that you want to use on your site
    • Note: you’re welcome to do all the code yourself
  3. Copy all the CSS code and paste it into the file
  4. Title it, “navigation.css”
    • note: I’m a firm believer in having a separate CSS file for your navigation, so it’s easier to locate

Step 4: Make Any Stylistic Changes that You Want

I often times make my students change the color schemes and fonts and encourage them to experiment with background images as well.

Step 5: Fix the CSS to Match the HTML Change from Step 2

What you’re going to do now is change every line of code in your CSS that states, “#subnavlist” to “.subnavlist” That’s because in CSS # is for an id attribute and the dot . is for class attributes.

Have you met my favorite shortcut key from Notepad++? It’s called “Replace.” In Notepad, it’s called “Find and Replace” either way, this is the time to familiarize yourself with that little shortcut.

  1. In Notepad++ AND in Notepad, type “Ctr + H” that opens the find and replace
  2. In the find window, type “#subnavlist”
  3. In the replace window, type “.subnavlist”
  4. Choose “Replace All”

Step 6: Test and Fix the navbar to make sure it looks good

This I can’t help you with. If you get stuck, or things are not working, you may wish to start over. It’s most likely due to steps 2 and 5. If you don’t mind having only 1 subnavlist or you what to throw semantic markup out the window, ignore steps 2 and 5 and hope for the best.

Add Your Superfish Files

Step 7: Download and Extract the Necessary JavaScript Files

Get the zip archive from the Superfish download page. Extract all files, then grab all JavaScript files from the ‘js’ folder and save them into a folder in your website (Note: even though you will link to 2 javascript files, all files will be used–don’t be stingy).

Step 8: Link to 2 External JavaScript Sheets

In the head of your HTML page, you will add 2 <script> tags that will link to two different JavaScript Sheets. WARNING: Make sure you link in the proper order, from top to bottom:

  1. First link to ‘jquery-1.2.6.min.js’ through a script tag
  2. Next, link to ‘superfish.js’ through a script tag

Note: the link to superfish.css is unnecessary for this (since we used the CSS from Listamatic2

Step 9: Initialize the Superfish

Initialize the superfish through a script tag like so

<script type="text/javascript">
//Initialize the SuperFish Plugin
 jQuery(
 function(){ 
 jQuery('ul#navlist').superfish(); 
 }
 ); 
</script>

According to the instructions on the Superfish home page, it says to add a class=”sf-menu” to your unordered list, but that’s only because they don’t realize how smart you are. You already gave an id attribute of ‘navlist’ to your <ul>. When you initialize the plug-in, you specify what tag gets adjusted by the Superfish, it’s the section where it says jQuery(‘ul.sf-menu’). Since our list has an id of navlist, you simply change the jQuery function call to jQuery(‘ul#navlist’), and it will work just fine.

Note: you could also just add class=”sf-menu” to your unordered list, but then it would be jQuery(‘ul.sf-menu’)

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.

JavaScript Samples: Image Map (with Expansion Set)

The JavaScript Function

Place the following JavaScript into the <head> of your web page:

<script type="text/javascript">
<!--
function writeText(txt, imgsrc, imgalt)
{
 var WinText = '<div><img src="' + imgsrc + '" alt="';
 WinText += imgalt + '" /></div>';

 document.getElementById("desc").innerHTML = txt;
 document.getElementById("window").innerHTML = WinText;
}
-->
</script>

The Image itself

Place your image in a <div> tag on your page like so:

<div>
<img src="TheBrain.jpg" alt="Picture of a Human Brain" width="513px" height="303px" usemap="#BrainMap" />
</div>

Note: you will need the usemap attribute to create your image “hot spots”

The Image Map

<map id="BrainMap">
<area shape="circle" coords="181,237,33" alt="Cerebellum" onMouseOver="writeText('The cerebellum takes care of the automatic functions of the body, like balance, breathing, etc.', 'cerebellum.jpg', 'image of the cerebellum')" />
<area shape="rect" coords="0,0,100, 100" alt="test" onMouseOver="writeText('Test area (51)', 'alien.png', 'alien picture')" />

The onMouseOver attribute calls the JavaScript function (writeText()).

The area that displays information

<p id="desc"></p>
<div id="window"><p>No Image Here</p></div>

Note: the <p id=”desc”></p> tag will display text, and the <div id=”window”></div> will display your image. You can put either tag in any order.

JavaScript Samples: Form Validation Part 1

The Functions:

Place the JavaScript Functions in the <head> element of your page:

Note: validate_required() needs 2 pieces of information to run: the form field (field), and a warning message (alertTxt) if it is not valid.

null is a non-existant number and “” means there is nothing in the field (they are not exactly the same). The if (value==null || value==””) means if the value is null OR there is an empty string.

<script type="text/javascript">
<!--
// Required Fields - 
function validate_required(field, alertTxt){
 with (field) {
  if (value==null || value=="") {
   alert(alertTxt);
   return false;
  }
  else {
   return true;
  }
 }
}
// Validate Email - Make sure email is in proper format
function validate_email(field,alerttxt)
{
with (field)
  {
  apos=value.indexOf("@");
  dotpos=value.lastIndexOf(".");
  if (apos<1||dotpos-apos<2)
    {alert(alerttxt);return false;}
  else {return true;}
  }
}

/* Validate the entire form *
*/
function validate_form(thisform) {
 with (thisform) {
  if (validate_required(name, "You forgot to add your name")==false) {
   name.focus();
   return false;
  }
  else if (validate_required(email, "You forgot to add your email address")==false) {
   email.focus();
   return false;
  }
  else if (validate_email(email, "Your email is in an incorrect format")==false)
  {
   email.focus();
   return false;
  }
 }
}
-->
</script>
</head>
<body>
<h1>JavaScript: Contact Us</h1>
<p>Please let us know what you're thinking. Drop us a note, say 'hi,' ask any question.</p>
<p><em>* Denotes Required Field</em></p>

<form action="contactUs.php" onsubmit="return validate_form(this)" method="post">
<p>* Name:</p>
<p><input type="text" id="name" name="name" value="your name" /></p>
<p>Age:</p>
<p><input type="text" id="age" name="age" value="your age" /></p>
<p>* Email:</p>
<p><input type="text" id="email" name="email" value="your email" /></p>
<p>Comments:</p>
<p><textarea id="comments" name="comments" rows="5" cols="40">Add your comments here</textarea></p>
<p><input type="submit" />&nbsp;&nbsp;<input type="reset" />
</form>

</body>
</html>

Notes For Stupid Browser Tricks Day 1

Various Built-in JavaScript Functions We Covered

  • alert("Help Me!!! I'm trapped in an alert box!");
    • Alert rings the bell and pops up a window of information
  • prompt("What's Your Sign?", "Neon");
    • Prompt asks a question (“What’s your sign?”), and then adds a prompt (“Neon”) as a possible answer or hint as to how to enter the box
    • Prompt will return what the user types in the input box
  • confirm("Can I move on now?");
    • Confirm asks a question (“Can I move on now?”), and returns either  a
      • true (if ‘okay’ was pressed)
        OR
      • false (if ‘cancel’ was pressed)

Objects in JavaScript

JavaScript is like PHP, ActionScript, or Python in that it can be coded as a top-down, procedural language (run one statement at a time, working your way from top to bottom) or it can be coded using the Object-Oriented Programming (OOP) paradigm. This makes JavaScript one way for a teacher to introduce Object-Oriented Programming in small chunks. When it comes to browsers, JavaScript has some built-in objects that make working with web pages very handy.

The three objects introduced yesterday were:

  • document – The document class refers to web pages. Every web page has properties and methods.
  • navigator
  • date

 

Anatomy of a Function & Function Calls

Old Possum’s Practical Post on OOP (Object Oriented Programming)

Let’s talk about OOP, and we’ll use cats as our example:

Classes – we skipped this since the objects were built-in, but just know you can write classes to represent other objects. If you recalled biology, you learned about classification. You probably learned that cats (aka felines) are members of the animal kingdom. When we talk about a cat in general, we are referring to the cat class

Objects – objects are things (how’s that for a recovering English teacher?). Objects are specific things. Take Fluffy the cat for instance (Get it? For instance?). Fluffy is a cat, a particular cat. Any “thing” can be described in two ways: it’s traits or attributes (aka properties), and it’s actions (called methods in OOP)

Note: another term I did not introduce, but is almost always introduced with objects, is instances (remember ‘take Fluffy for instance’?). The word instance is pretty much interchangeable with objects. If you want to split hairs, you would use objects as a general term, and instance when you are specifically mentioning an object in particular. To carry the cat analogy even further, you might refer to all the cats running around your neighborhood as cat objects, and when you want to specifically refer to Fluffy, you would refer to her as the Fluffy instance.

Attributes or Properties – are variables associated with an object. Any given cat will all have the same general properties (all have fur, all have (or at least started out with) claws, all have legs). Please note:

  • Properties can have different values among different cats. Fluffy’s fur might be orange, and Morrisey’s fur might be black. The same thing goes for software objects.
  • Methods – are the behaviors of objects. For example, Fluffy, like all cats, meow, eat, like to chase things, etc. In OOP, objects have methods associated with them so that they can interact with other objects or the user.