Here’s a little something I was working on today. The goal was to model an HTML unordered list in JavaScript so I could easily add/remove and display elements. I haven’t gotten around to actually writing all of the display methods because I haven’t exactly figured out how I want to use it yet.

PS: I kinda re-remembered the toString method on this one.

PPS: Requires prototype

Example Usage:

set up the list

list1 = new List();
list1.add('a');
list1.add('b');

list2 = new List();
list2.add('b1!');
list2.add('b2!');

// nest away!
list1.add(list2);
list1.add('c');
list1.add('d');

li data

alert(list1.get_at(1).data);

remove li

list1.remove(4);

alert the list

alert(list1);

BAM!

Download the code!

In keeping with my current “blog-more-about-less” stratagem I thought I’d post a little JavaScript utility I wrote. The idea was just to add “next” and “previous” buttons to an existing gallery, but I thought I’d have a little fun with it, as it may come in handy in the future.

The idea was to create a simple slider object that would keep track of the users position in an array of items. I could cycle through the items, backwards and forwards and fire of item methods. For the gallery I only had to worry about a few basic properties and methods, but I wanted to design this in such a way that adding properties and functionality to my objects would be a breeze.

PS: Current the slider object expects your items contain the methods “update” and “show”. I *know* this is bad, but I’ve had a hard time coming up with a solution that I liked better.

PPS: The example code I’m posting below was done using Prototype and ColdFusion, neither of which are required but are there because I thought it made it easier to get the point across.

Alright, enough gibber jabber.

Image Object:

function Image(thumb,large,caption) {
      this.thumb = thumb;
      this.large = large;
      this.caption = caption;
      this.show = function() {
          showPhoto(this.large,this.caption);
      }
      this.update = function() {
          $('largeImg').src = this.large;
          $('photoCaption').update(this.caption);
      }
  }

Create and fill it up!

gallery = new Slider();
// don't forget to escape those special javaScript characters!!!!

      gallery.add(
          new Image('#thumb#','#large#','#caption#')
      );

Attach the “previous” and “next” methods to my links. <3 unobtrusive JavaScript!

Event.observe(
      'previous',
      'click',
      function() {
          gallery.previous();
      }
  );
  Event.observe(
      'next',
      'click',
      function() {
          gallery.next();
      }
  );

And finally, on the actual thumbnails on the page:

Download the code!

As always, this solution is far from perfect, and I’d love feedback!