Red Leopard » blog

Javascript DOM Listeners

kelly — Mon, 05 Jan 2009 00:52:34 +0000

I’ve wanted to build a simple gallery viewer for some time. “But there are thousands of already built viewers,” you may be thinking. Yes there are. But I wanted a simple viewer that was at once trés snappy and minimalist.

I dislike the gallery systems that open another window or create a floating panel which must be dismissed. I wanted a simple picture portal with simple thumbnails. I wanted something that didn’t require jacking javascript or event listeners directly into the html. It had to be easy to use with wordpress.

I wanted to add a title and caption to each picture. Clicking the thumbnail would change out the picture, the title and the caption.

Since I would add galleries to a blog, the code had to handle multiple galleries per page. Therefore, the galleries could use class attributes but not id attributes in the event listeners.

For this project, I wrap each gallery in a element and give the element a class type of gallery.


  Photo 1 Title
  
  
    
  
  Photo 1 Caption

The main parts of the viewer are:

element which displays the photo title
element wrapping the element which is the main photo portal
element with a class of which is a container for all the thumbnail images; all thumbnail elements are placed inside this container
element which displays the photo caption

I chose to make my photo portal 592 by 330 pixels as this fits well with several of my templates. I chose this aspect ratio—which is close to “wide-screen”—as it gives me more room to display a lengthy caption without scrolling. However, any aspect ratio may be used. One limitation of this system is that all photos in a gallery set must have the same width and height dimensions.

The thumbnail elements use the alt and title attributes as they were intended. I still needed to supply the main photo URL associated with each thumbnail. Since I want my gallery code to validate, I couldn’t simply add a non-html attribute. I pragmatically chose to use the longdesc attribute in a unorthodox manner to declare the main image URL.

I like small thumbnails. Mine are 50 by 50 pixels. Some people are very, very, very adament that thumbnail images must be an exact replica of the original image. Not me. The thumbnail ratio is square regardless of the original photo ratio. I may or may not resize the image before taking a thumbnail. My thumbnails do not even have to be taken from the photo. They could be icons, for all I care. As long as they communicate effectively and are visually appealing.

I add a bit of CSS seasoning to help with presentation. Season your gallery to taste.

div.gallery {
    margin:  0 0 2em 0;
    padding: 0;
    border:  0;
}

div.gallery img {
  margin:  0;
  padding: 0;
  border:  0;
}

div.gallery-thumbs {
  margin:  0;
  padding: 0;
}

div.gallery-thumbs img {
  margin:  4px 8px 0 0;
  padding: 0;
  border:  1px solid black;
}

div.gallery p {
  clear: both;
  margin:  0;
  padding: 0;
}

Before I get into the core javascript functions, let’s look at how we register the event listeners. This is the code that must be added element of every page that contains a gallery.

I initialize the event listeners after the page loads using the window.onload event. While I could have included the init function in an external file, I may want to extend it in the future to register events for other systems. The registerGalleries function is defined in the external gallery javascript file.

Once the window loads, init is called which in turn calls registerGalleries which registers event listeners for any and all galleries on the page.

function registerGalleries() {

  // get every element in the document
  var allTags = document.getElementsByTagName("*");

  // check each element to see if it's a
  // div element and gallery class
  for (var i = 0; i < allTags.length; i++) {
    if (allTags[i].tagName == "DIV") {
      if (allTags[i].className == "gallery") {

        // it is a gallery, so get all the subelements
        var galleryTags = allTags[i].childNodes;

        // check each subelement for the gallery-thumbs container
        for (var j = 0; j < galleryTags.length; j++) {
          if (galleryTags[j].className == "gallery-thumbs") {

            // it is a gallery-thumbs, so get all the subelements
            var thumbTags = galleryTags[j].childNodes;

            // and register event listeners on all thumbnails
            registerThumbs(thumbTags);
          }
        }
      }
    }
  }
}

The registerThumbs function looks for the image tags within gallery-thumbs container.

function registerThumbs(thumbs) {
  for (var i = 0; i < thumbs.length; i++) {

    // the gallery-thumbs container has more than just 
    // elements. The whitespace between each  element
    // is also a node. So, we must check for the actual thumbnail
    // code and add the event listener to that.
    if (thumbs[i].tagName == "IMG") {
      addListener(thumbs[i], "click", updateGallery);
    }
  }
}

Attaching events using javascript and DOM differs between Microsoft and the rest of the world. {{sign}} The following code has worked well for me on numerous projects.

function addListener(element, event, process) {
  if ( element.addEventListener ) {
    element.addEventListener(event, process, false);
  }
  else if ( element.attachEvent ) {
    element.attachEvent("on"+event, process);
  }
}

From this point on, the gallery system gets brittle. The javascript depends on a specific node order for node traversal. If the node order changes, you must modify the javascript accordingly. Perhaps one day I will make the code node-order independent. The gist of updateGallery is to get the thumbnail element from the event, extract the contextually relevant information from that element, traverse the nodes in the gallery container to find the title, picture portal and caption elements and update those elements with the new information.

function updateGallery(e) {
  thumb = e.target ? e.target : e.srcElement;

  var thumbTtl = thumb.getAttribute("TITLE");
  var thumbAlt = thumb.getAttribute("ALT");
  var thumbLnk = thumb.getAttribute("LONGDESC");

  var thumbTxt = thumb.parentNode
                      .nextSibling
                      .nextSibling;
  var thumbPix = thumb.parentNode
                      .previousSibling
                      .previousSibling
                      .firstChild;
  var thumbCap = thumb.parentNode
                      .previousSibling
                      .previousSibling
                      .previousSibling
                      .previousSibling;

  thumbPix.src = thumbLnk;
  thumbTxt.firstChild.nodeValue = thumbAlt;
  thumbCap.firstChild.nodeValue = thumbTtl;
}

That’s it. Below is an example that I created for this project. It uses ten Scandinavian photos from a stock image/clipart DVD I got years ago.

White Barn

A nice white barn under a blue sky surrounded by yellow flowers.

I found that when I entered the gallery code into wordpress, wordpress added elements where I didn’t want them. This would break the layout (duh!). Originally, I didn’t have a paragraph element wrapping the main image. Wordpress insisted on adding the tag. Likewise, I originally had each thumbnail begin on a new line. Wordpress insisted on adding a break element so I ended up butting the end of one thumbnail image element against the next (no white space).

Just for grins, I added another gallery from the same clipart collection. This time from India.

Train Station

Some people in the doorway of the train. Looks as if they are hanging out over a ledge.

I’m pleased with the results. On to the next project.

Wordpress plugin problem

kelly — Fri, 12 Dec 2008 21:01:05 +0000

When I moved to wordpress, I purposely picked a theme with paged listings. Of course, I also started with the latest v. 2.7 release. (Actually 2.7 rc2, then an upgrade).

The paged navigation at the bottom of the content section did not work. I tried to install the wp-pagenavi plugin but wordpress complained that the anjing theme had already defined wp_pagenavi().

I’m new to wordpress (and don’t know PHP well) but I do know how to comment out code.

vi ~/public_html/wp-content/themes/anjing/functions.php

and comment out the function

/*
function wp_pagenavi($before = '', $after = '') {
    ⋮
}
*/

Like magic. The plugin activates and I have pages!

The Jump to Wordpress

kelly — Sun, 07 Dec 2008 20:18:10 +0000

I finally made the jump from moveable type to wordpress. The hardest step was porting the old posts. Whereas I created posts using UTF-8 encoded characters, moveable type did a dumb convert of the characters into Latin-1 when storing them MySQL. Since the path out of the database and to the page was a reverse process, when viewing pages the characters would reappear as UTF-8.

However, when exporting the data from moveable type, the round-trip was broken. The characters in MySQL were not really proper Latin-1 characters. None of the recommended processes I found through google worked for me. I’ve had to deal with this problem at work last year. The memory of that pain makes me flinch.

In the end, I exported the data from moveable type, ran iconv to convert to UTF-8 and manually edited the resulting file to correct the mistakes.

I chose not to import all my images into each and every post. I simply link to them.

I still don’t have my template set up properly. There’s a few bits and pieces from the moveable type templates I’d like to port. But overall, it went smoothly. Five minutes to install and configure wordpress/mysql. Twenty minutes to find a template I liked. Ten minutes tweaking the CSS to fit my old content into the new template (images were wider than the default content width). Three hours mucking with the Latin-1::UTF-8 problem.

Now to get pagination, rss/atom feeds, … working.

More site tweaks

kelly — Fri, 11 Jul 2003 21:44:44 +0000

I haven’t made many visible tweaks to the redleopard site since June. This isn’t to say that things weren’t going on ‘behind the scenes’. Here’s what’s happened.

1. System Upgrade

Hurricane Electric (my web host) offered all it’s long time customers the option of free upgrades to the new hosting environment. Feature-wise, it means I now have 1GB of storage instead of 250MB. I currently use about 1MB.

I guess they wanted us old timers off the old machines so they could retire them. The only thing I had to do was log into MySQL and set my password.

For some reason, DNS was screwed up for a couple days but it ‘magically’ worked itself out. I sent an email to support but the problem disappeared before they looked into it.

It just goes to prove the old adage: if you ignore a problem long enough, it will go away.

I can report that the new systems are much faster than before. In fact, Moveable Type running on Hurricane Electric’s machines rebuilds the site faster than my local Mac. I’m the only one on my machine. Sad.

2. MT 2.64

I’ve been busy on the sister site building infrastructure using MT 2.64. It’s all behind passwords so you can’t see it. I’ve not used any new features in 2.64 and it seems to be the same a 2.63. I will probably not upgrade to 2.64 right away for red leopard.

3. Site Code Organization

I construct sites using three major blocks:

Banner
Links
Content

I’ve taken to moving the banner and links code into a module template. It’s located at the bottom of the ‘edit templates’ screen.

I then include the modules in my index templates. It really cleans up my templates and I only have to edit links in one place.

I thought about moving to PHP to create dynamic links but it’s easier to let MT it.

4. Links block dimension

I’ve finally given up on using a 150px wide links block. It’s just too narrow for link names. So, I’ve standardized on 200px wide blocks.

5. Rhymes

Finally, I added a Rhymes link to collect Tracy’s poetry. I may add some of my own. Maybe not. I’m still toying with different Links presentations as her list of Rhymes is getting long.

CSS Changes [check]

kelly — Thu, 19 Jun 2003 23:18:06 +0000

I made the css change in less than a month. It consisted of two changes.

First lighten the background color of blogbody.

Second darken the paragraph text.

My lame excuse for not fixing it sooner is I’ve been busy! But it’s true. All about priorities.

Business has picked up and I’m both working under contract and putting more bids out for contract. Which brings me to the next point.

I’m working on my business site. It’s powered by MT+PHP. I’m not a programmer so the PHP side is going a bit slowly. Plus, I’m learning a lot about MT and it’s power. Between the two, I believe I have everything I need to build a good CMS for small businesses. The commercial license for MT is $150 but that’s reasonable.

But back to CSS.

I finally made the changes so I can officially check that item off the to do list.

If I can only find the list…

New Style Needed

kelly — Thu, 22 May 2003 05:04:46 +0000

I’m sick of the Red Leopard style sheet. Expect to see a new CSS.

This site hurts my eyes. The new style sheet will have the same layout but you can rest assured THE TEXT WILL HAVE MORE F*****G CONTRAST WITH THE BACKGROUND.

Moveable Type Rules

kelly — Thu, 22 May 2003 05:01:26 +0000

I’ve spent the past several nights getting my sister site up and running. After cursing MT, I’ve come to love it. I’m hooked.

My sister site fronts my consulting venture.

http://www.workableplan.com

It marks a couple of firsts for me.

It’s the first time I’ve used PHP on a live site. I use it to dynamically build the navigation and links. Never again will I have to crawl a site fixing broken links. It’s automagical.

It’s the first time I’ve built a site completely on Moveable Type. Well, this site uses MT but most of the site is yet to be online. 95% of Red Leopard content is in a tar file.

It’s the first time I’ve used multiple blogs in a site (or multiple blogs, for that matter).

I didn’t set out to use MT. I really wanted a PHP tool that would split a white paper into multiple sections, all linked with prev/next links. After futzing around with examples on the www.php.net documentation site, I was ready to give up. I’m a really slow coder. It may be from the fact that I hate writing code.

Last weekend, I had an epiphany. MT could handle everything I wanted.

It turn’s out that I only need create a new blog for every white paper I write. Each chapter become a blog entry and MT handles the rest. Sweet.

No more coding.

I can get back to writing content which brings me far more joy.

Online (sort of)

kelly — Tue, 29 Apr 2003 22:05:08 +0000

About the time I decided to convert the redleopard site to a blog, I switched back to the Mac. That’s when my problems began – but not for the reasons you may be thinking.

When I started the migration Spring of 2002, I did all my coding with notepad on a PC. I believe if I had stayed with notepad, my blog would have been up MUCH sooner.

It started with the arrival of a super-sweet titanium powerbook. I thought “cool, I’ll set Moveable Type up on my powerbook.” That way, I could justify installing mySQL. There were other projects in the corners of my mind, you see.

Well, it couldn’t just be mySQL. I’d install Apache 2. Not that the default, Apple installed 1.3 wasn’t good enough. It was. But I wanted Apache 2 just because.

Shoot. While I was at it, I said half believing it, I’ll install PHP.

I bought the book “Mac OS X Unleashed”. That lead me to a dead end. I tried to compile and install packages. Anyone else out there burn endless nights on that exercise? Well, it didn’t work. Badly. It didn’t work, badly.

Salvation — Aaron Faby (Server Logistics). www.aaronfaby.com

You see, I suck at coding. I can do it, but I’m slow. I’d rather be powerpointing. Yet, I was determined to get it all to work. Some days I was less determined than others.

I’d like to say I got my DAMP (Darwin-Apache-mySQL-PHP/Perl) system running but it really was Aaron Faby. His packages simply work.

Anyway, my laptop became my website. I’ve had three redleopard generations that have never been connected to the net.

When Moveable Type released 2.63, I resolved to mirror my DAMP site on my LAMP site (hosted by the folks at Hurricane Electric, www.he.net ). I can’t say enough good things about Hurricane Electric. Their customer support is without equal.

Anyway, it’s been a year since I first started to migrate. I’m finally here. The irony is, if I were using Notepad during that period, the site would have been online a year ago. But it’s online. Sort of. I’m now in the bogs of CSS and MT tags, chasing down all the various templates that must be changed just so. Yet, I claim victory. The cat is out. Live. On the net.

It’s been a long march. I’ve learned a lot along the way. That counts for something.