Screen resolutions

According to Google Analytics, 0% of all visitors ever viewing this blog were using a resolution lower than 1024x768. This, of course, is great news! Sadly though, still around 10% of the users world wide use 800x600 (the difference is that this blog is only read by techy people)..

When do you think web developers should drop support for 800x600 clients (and make them scroll)? Which percentage of visitors is acceptable? Does it depend on the target audience of your website? Or should we all start using fluid designs?

Lightbox, Leightbox and my improved Leightbox

For my latest project I wanted to include a nifty 'Lightbox effect'. The original Lightbox effect however is limited to displaying images and I wanted to show HTML.. So I searched the net and came across Leightbox. Leightbox is a modification to Lightbox which allows you to easily display a piece of HTML (a DOM node actually) using a lightbox effect..

The problem with Lightbox however is the way it binds itself to click events.. You can only load a Leightbox using a click event.. I wanted to have a Leightbox appear using a timer, so I looking into the source and came up with the following:

1) change the initialize function inside the lightbox.prototype to:

initialize: function(ctrl) {
if(ctrl) {
    this.content = ctrl.rel;
    Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
    ctrl.onclick = function(){return false;};
}
},

What this does is check if the 'ctrl' variable is actually passed.. If it isn't, the function does nothing..

2) Add a new function:

initCallable: function(rel) {
this.content = rel;
},

3) You can now manually load up your Leightbox of choice by calling the following:
lb = new lightbox();
lb.initCallable('idOfDiv');
lb.activate();

Update: this technique is no longer valid or neccesary in the current Leightbox version.

New instructions:

1) Leave the lightbox.js (from leightbox) unmodified (download the latest version at: http://eight.nl/files/leightbox/)

2) Remove the class="lbOn" from your lightbox activating links

3) Create a javascript var (outside a function):

var myLightbox;

[4) Use an intialization function (i.e. body onload="initFunction"):

myLightbox = new lightbox($("IDOfActivationLink"));

(Don't forget to set the rel property of the link to the DIV's id you want to show (like you normally would with Leightbox))]

You can now use myLightbox.activate() and myLightbox.deactivate() to turn on/off the lightbox.