For the past couple of months I’ve been work­ing on cre­at­ing a new web­site that uses Word­Press as a CMS for the orga­ni­za­tion Girls Get Con­nected (That’s the old site, because the new one isn’t quite done yet). The project has been a great one to work on because I’ve gotten to do every­thing includ­ing the design of the site and devel­op­ment of the Word­Press back-​end and templates.

Early on in the project, after the design mockup had been approved, I knew there were going to be some dif­fi­cul­ties imple­ment­ing it. One of the things that I knew would be a prob­lem was the fact that I had designed a rather promi­nent sec­tion on the home page of the site which called for an arti­cle to be split into mul­ti­ple columns. This being a con­tent man­aged site, I also knew it wasn’t really going to be an option to ask the end users to break up their arti­cles into two even sec­tions so that it would make nice and pretty columns. Also, CSS3 really wasn’t an option, since this site would have to work on all cur­rent browsers. Some­thing else would have to be done.

The solu­tion I ended up using was a very ele­gant JavaScript pro­gram writ­ten by Randy Simons. The script is called Multi-​Column Text and is pretty easy to imple­ment. It auto­mat­i­cally splits the text into mul­ti­ple columns (you chose how many), and includes sup­port for liquid lay­outs. This means that the con­tent and columns aren’t static; they will auto­mat­i­cally adjust as the page is resized. Check out the demon­stra­tion page to see what I mean. This script is also works on enough old browsers to actu­ally be usable.

What impressed me most about the script was that it requires very little extra markup. Assum­ing all of your markup is in some sort of stan­dards com­pli­ant state, all that is required is one (or pos­si­bly two) extra div tags. Say you wanted to make the fol­low­ing code seg­ment use the mul­ti­col­umn script:

<h2>Maecenas</h2>
<p>Pellentesque mi. In lacinia iaculis ante.</p>
<h1>Ut dapibus</h1>
<p><em>Nunc non dui.</em> Maecenas quis lacus sed dui commodo elementum.</p>
<p><strong>Pellentesque rhoncus sollicitudin libero. Phasellus nunc risus, tincidunt vel, bibendum eu, molestie ac, tortor. Etiam in felis.</strong></p>
<p><strong><em>Pellentesque id erat. Mauris condimentum pharetra nibh. Fusce sollicitudin auctor tortor. Aliquam placerat,</em></strong></p>

All that needs to be added are two div tags to wrap the con­tent. The first div must also include an id or class name for the JavaScript to hook to. You can use what­ever class or id name you want when you imple­ment it. I chose to use id=multicolumn. The fin­ished markup would look like this:

<div class="multicolumn">
  <div>
    <h2>Maecenas</h2>
    <p>Pellentesque mi. In lacinia iaculis ante.</p>
    <h1>Ut dapibus</h1>
    <p><em>Nunc non dui.</em> Maecenas quis lacus sed dui commodo elementum.</p>
    <p><strong>Pellentesque rhoncus sollicitudin libero. Phasellus nunc risus, tincidunt vel, bibendum eu, molestie ac, tortor. Etiam in felis.</strong></p>
    <p><strong><em>Pellentesque id erat. Mauris condimentum pharetra nibh. Fusce sollicitudin auctor tortor. Aliquam placerat,</em></strong></p>
  </div>
</div>

I like the way that looks: clean and simple. You can even use this in in a Word­Press tem­plate with PHP tags included and every­thing still works. This is what is actu­ally coded into one of my Word­Press tem­plate files:

<div class="multicolumn">
  <div>
    <?php ggc_the_long_excerpt(); ?>
    <p class="readmore"><a href="<?php the_permalink() ?>" rel="bookmark" title="Continue Reading <?php the_title_attribute(); ?>">Read More &raquo;</a></p>
  </div>
</div>

My favorite part is what hap­pens when Javascript is not avail­able. In my case, the page still works fine and no con­tent is lost. Sure, there are some rather long line lengths, but every­thing still works.

Today I found myself writ­ing a little bit of JavaScript to iso­late an ele­ment on a page. The ele­ment in ques­tion looked some­thing like this:

<div class="mulitcolumn">
    <p>Some text...</p>
    <p>Some more text</p>
<div>

I wanted to get the div ele­ment by search­ing for the class name multicolulmn. With­out think­ing, I began writ­ing the code to grab the div using the getElementByClassName func­tion. Then I remem­bered that getElementByClassName isn’t actu­ally a built-​in func­tion. Oh well, Google to the rescue.

I was able to quickly find Robert Nyman’s ele­gant getElementsByClassName func­tion in The Ulti­mate GetEle­ments­By­Class­Name.

Using this func­tion, you can get ele­ments like so (exam­ples pulled from Nyman’s site):

// To get all a elements in the document with a “info-links” class.
getElementsByClassName(document, "a", "info-links");

// To get all div elements within the element named “container”, with a “col” and a “left” class.
getElementsByClassName(document.getElementById("container"), "div", ["col", "left"]);

I love it when I don’t have to write my own JavaScript.

The other day I ran in to a bug in IE 6 that I had never encoun­tered before. I had a left-​floated con­tent box with a margin of 105px on the left. Every­thing worked fine in the good browsers as usual, but when I checked IE 6, I noticed that the margin was off. No real sur­prise there. Upon fur­ther inspec­tion, I noticed that the margin was more than just off, it was exactly double the actual margin.

After doing some research, I dis­cov­ered that the bug has been well doc­u­mented as the “Doubled Float-​Margin Bug.” Posi­tion Is Every­thing has a good expla­na­tion:

This bug only occurs when the float margin goes in the same direc­tion as the float and is trapped directly between the float and the inside edge of the con­tainer box. Any fol­low­ing floats with a sim­i­lar margin won’t show the dou­bled margin. Only the first float in any given float row will suffer from the bug. Also, the dou­bled margin dis­plays sym­me­try, work­ing the same way to the right as it does to the left.

As it turns out, I didn’t even need to use their rec­om­mended fix for the bug. I was able to ax it by just adjust­ing which ele­ments had the float and margins.

Posi­tion Is Every­thing also con­tains an entire sec­tion IE only bugs. I know this is going to be an invalu­able ref­er­ence for me when I’m trying to track down odd behav­ior that I’m sure is a bug and need an easy fix.

Apple has just released the 10.4.11 update for Mac OS X Tiger, which has two inter­est­ing tid­bits. First of all, it lists “Improves com­pat­i­bil­ity when using Open­Type fonts in QuarkExpress.” I would be really inter­ested in know­ing more about exactly what has changed here. Unfor­tu­nately, given how tight-​lipped Apple usu­ally is about these types of things, I doubt I’ll find out.

The second item per­tains to Safari 3. Start­ing with this update, Safari 3 will be the default browser. Now, this is really great, but it intro­duces some prob­lems with my work­flow. If I install this update, how am I going to be able to con­tinue to test my designs in Safari 2.x?

As it turns out, Michel Fortin has gone through the trou­ble of cre­at­ing stand­alone ver­sions of every Safari install­ment. So go ahead, jump on that update from Apple, then grab a stand­alone copy of Safari 2.

I stum­bled across the Blog Spoon Graph­ics web­site the other day and was very impressed by the design.

I par­tic­u­larly like their notebook-​style links. The sub­scribe link is a good exam­ple of this (although I can’t actu­ally click on it):

Their site footer also demon­strates a nice use of the “crusty note­book page” style:

It’s a very nice look­ing site all around.