• Five simple steps to better typography. Covers such things as line length and word spacing.
• How to avoid activation of Active-X in IE. Due to recent changes, flash (and other things) have to be clicked before they work in IE. This is a workaround.
• How to correctly insert a Flash into XHTML. A functional, valid way of inserting flash into a web page.
• Architecting CSS. Techniques for organising CSS.
• Gabbly. An interesting way to get chat on a website.

And a comic, too.

Object Orientated Programming (OOP) is programming by referring to, well, things.

In regular(linear) programming everything that the program does is laid out by the programmer. In OOP, we have use of objects: self-contained collections of data and instructions.

So, while in linear programming if we wanted to know the length of a string we’d have to construct a loop to count through each of the letters, in OOP we could call up the ‘length’ property of the already-defined string object. The code for counting the letters still exists, but it is inside the string object and the programmer never needs to know how it gets the number. All the programmer needs to know is an what properties an object has, and what it can do: its methods.

What are Properties and Methods? What’s the difference?

The properties of an object are information about it: the colour of a paint or the date of a diary entry would be considered properties of those things. Conversely methods are the things that an object can do: a car can accelerate, an alarm bell can ring.

Let us take, for the purpose of example, a printer:

• Properties

• Paper Left
• Ready Status
• Power Status (on/off)
• Ink Level

• Methods

• Print Single Sided
• Print Double Sided

The Dot Syntax

In many object orientated programming languages the dot syntax is used for referring to objects and their properties and methods. To take the example above, the syntax to refer to the ‘Paper Left’ property would be printer.paperLeft. The syntax for telling it to print a document single-sided would be printer.printSingleSided(myDocument), where myDocument is the document to be printed. Methods always have a pair of brackets at the end, if the method needs information to work then that information is but inside the brackets.

JavaScript Objects

JavaScript is an object orientated language, with its own collection of objects. It also uses the DOM to access objects within HTML files.

The variable is one of the most common JavaScript objects. For a variable containing a string called myString, containing the word “script” there would be properties such as myString.value, which would be “script”, and myString.length, which would be 6. Methods for myString would include toUpperCase(), which converts the letters all to uppercase, and indexOf(), which would give the position of a given letter in the string.

The “text” object corresponds to a HTML . Properties include disabled, which will either be true, in which case the input is disabled, or false, where the input can be activated, and defaultValue, which is the default text in the input. Methods include focus(), which puts the curser in the input, and blur(), which removes the curser from the input.

The “image” object corresponds to a HTML <img /> element. Properties include “src”, the source file of the image, “width” and “hight”. Methods include click(), which has the effect of clicking on the image (for the purposes of an onClick() event, for example).

How to Bluff Your Way in DOM Scripting was the title of the video Michael failed to show us before, due to TAFE network restrictions.

Now the mp3 of the full hour-long ‘interactive panel’ is available for download. This covers javascript at about our level and a bit above.

• SXSW Podcasts
• How to Bluff Your Way in DOM Scripting (mp3 27MB)

However, a after a bit of thought I realised with my resolve to put everything in ‘child’ categories, the number of categories could rapidly rise. With that, the category list would become behemothian and as such all but useless. What I need is a way to restrict the categories shown, so that the user would only see what information they needed at the time.

Popup Lists

The Popup List technique allows for lists that display only when the ‘parent’ element is hovered over. In this example the parent shall be a <li></li> in another list that is id’d as ‘list’. The popup list will remain visible so long as the curser is over it, or it’s parent.

By default, the popup list will be absolutely positioned way off the screen, for, as we know, if it was set to display:none or visibilty: hidden the popup list mightn’t be read by screenreaders. Then again, maybe that would be preferable.

When the parent <li></li> is hovered over, the popup list’s position will be set to static, bringing it to it’s normal position in the document, shuffling other things out of the way to fit. The CSS is:

#list li ul {
  position: absolute;
  left: -5000px;
}
#list li:hover > ul {
  position: static;
}

The first rule states that a unordered list inside a list item inside the container ‘list’ should be positioned well away from the window. The second rule states that when a list item inside ‘list’ is hovered then an unordered list that is the direct child of said list item should be positioned normally, as opposed to absolutely, for example. These two together achieve the desired effect.

An example of the code in action.

There is a catch, however. Internet Explorer 6 doesn’t recognise :hover on anything but an <a></a>, nor does it recognise any of the more contorted CSS selectors that would make it otherwise possible to use this technique. What to do, what to do… Ah-ha! JavaScript.

Add a little JavaScript

The JavaScript getElementById() method returns the HTML element of the ID given. I want to modify a HTML element — the child ul. As such, I examined the W3Schools HTML DOM Reference.

The DOM , or Document Object Model is a way of referring to many of the parts of the document object, such as the HTML elements within. We already use this to call up form inputs so we can get their value. However, we can do more than just read off data. We can acually change the existing elements on the screen. In this case I’ll change the style.

On W3Schools I found the code snippet:

document.getElementById("id").style.property="value"

This little piece of code would let me call up an element and change a property of it’s style. Using onMouseOver() and onMouseOut events would let me change the style to make it visible on the hover and then hide it again when the curser leaves.

The styles applied would be something like:

#hiddenlist {
  position: absolute;
  left: 5000px;
  margin-bottom:0px;
}

Again, this tells the popup list to hide.

then the javascript functions:

The first of these two function reveals the popup list, the second hides it again.

And the HTML:

<ul>
  <li>
    Hover Over Me
  <ul>
    <li>Lookit Me!</li>
  </ul>
  </li>
</ul>

The two JavaScript events in the HTML call the showList() function when the cursor is over the <li></li> and call the hideList() funtion when the cursor leaves. As the popup list is within the <li></li> it stays open when the cursor is over it.

An example of the code in action.

The Road Goes Ever On

Well it looks like it works, so job’s done, time to apply it to the category list. All it would take is giving each of the lists a unique id and having a copy of each function to match. …or not. You see, the list is automatically generated by a wordpress function, so there is no easy way for me to add ids. And I dont wan’t to have repeated code apout the place and besides, if I add new parent categories in the future I don’t want to have to go back and edit the template again. Also, it may be more useful to have clickable toggles than roll over effects…

And so the quest continues. I’ll be looking at the hierarchy of the DOM in the near future, and maybe I’ll end up writing a custom category list function in PHP.