Horizontal scrollbars in <div> tags don’t really play that nicely with scroll wheels or key controls unless you set the tabindex property. I’ve done so on the filmstrip above, and given it tabindex="1" so it’s the first thing you tab to. Just press left or right to test it out. And, although the scrollbars work well enough, let’s try something different. There are several ways to accomplish this, but some are distinctly better than others. I say better because of how well, or poorly, they play with browsers.

The method I describe below is doing nothing more than changing the display css-attribute. It also uses a couple of different ways to move the filmstrip images.

First let’s look at the events. Using the following for your onload function:

function onLoad() {
	if (document.addEventListener) {
		document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
		document.getElementById('strip').addEventListener('DOMMouseScroll',HandleWheel,false);
		document.getElementById('larrow').addEventListener('click',moveLeft,false);
		document.getElementById('rarrow').addEventListener('click',moveRight,false);
	} else {
		document.getElementById('strip').onkeypress = HandleKeyPress;
		document.getElementById('strip').onmousewheel = HandleWheel;
		document.getElementById('larrow').onclick = moveLeft;
		document.getElementById('rarrow').onclick = moveRight;
	}
	thumbNum = document.getElementById("imagerow").getElementsByTagName("li").length;
	setLeft();
}

The only reason for the difference is that some browsers don’t support the addEventListener method. setLeft() we’ll see a little bit later on. thumbNum is just a convenient store for the number of thumbnails.

Next let’s look at some of the variables we’re using and how they’re initialized:

var thumbNum;    //total number of thumbnails
var showNum = 4; //how many thumbnails to show
var curLeft = 0; //current index of the leftmost thumbnail

thumbNum we already know gets initialized in the onLoad function. showNum and curLeft are used throughout the script.

Next, let’s look at the events and what they call:

function HandleKeyPress(e) {
	switch (e.keyCode) {
		case e.DOM_VK_LEFT:
			moveLeft();
			break;
		case e.DOM_VK_RIGHT:
			moveRight();
			break;
		case e.DOM_VK_ESCAPE:
			content.focus();
			return;
	}
}

/** Event handler for mouse wheel event.
 * originally from http://adomas.org/javascript-mouse-wheel/
 */
 function handle(delta) {
        if (delta < 0)
		moveRight();
        else
		moveLeft();
}

function HandleWheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
                /** In Opera 9, delta differs in sign as compared to IE.
                 */
                if (window.opera)
                        delta = -delta;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}

Looking at HandleKeyPress we see that it does a short switch-case on the keycode from the event. You can use this same technique to add other keypress events. There are also keyup and keydown events which have their uses.  The best list of the keycodes available is here.

The mouse wheel event I’ve borrowed from another site (no point in re-inventing the wheel). The annoying part about the mouse wheel is that every browser interprets the event differently. Sooo… the script has to check for them all.

Both, the mouse wheel event and the keypress event, call moveLeft() and moveRight(), which are shown below:

function moveLeft(){
  if (curLeft == 0) return; //already at the left
  else {
    curLeft = curLeft - 1;
    setLeft();
  }
}

function moveRight() {
  if (curLeft==thumbNum-showNum) return; //already at the right
  else {
    curLeft = curLeft + 1;
    setLeft();
  }
}

All these do is check to see if they’re already at the left or the right and then increase or decrease curLeft and call setLeft(). setLeft is what does our styling changes.

function setLeft(){
	var rng = getRanges();
	for (var i = 0; i < rng.out.length; i++ ) {
		rng.out[i].setAttribute("style","display:none;");
		rng.out[i].style.display = "none";
	}
	for (var i = 0; i< rng.in.length; i++ ) {
		rng.in[i].setAttribute("style","display:inline;");
		rng.in[i].style.display = "inline";
	}
}

The first thing it does is get the ranges of elements which will be hidden or shown. Then it loops through those outside the range to be shown and hides them. Finally it loops through those inside the range to be shown and displays them.

function getRanges() {
	var end = curLeft + showNum - 1; //calculate the image position at the end of the display

	var iva = new Array();	//create arrays for the in and out of range elements
	var ova = new Array();

	//get all of the <li> tags inside our imagrow
	var litags = document.getElementById("imagerow").getElementsByTagName("li");

	// loop through and add them to iva or ova if they
	// are in or out, respectively, of our desired range
	for (var i = 0; i < litags.length; i++) {
		if ((i < curLeft) || (i > end))
			ova.push(litags[i]);
		else
			iva.push(litags[i]);
	}
	return { in: iva, out: ova };
}

It’s pretty well commented but just to make some things clear: The childNodes and getElementsByTagName collections don’t work exactly like arrays and specifically they don’t support slice(). Therefore, we just make two new arrays and sort through the collection items. The finished product looks like ths:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Go ahead and try some of the events out. The key events only work if the strip has focus, so either click on it, or tab to it first.

If you want to see what it looks like on it’s own, here’s the html, the javascript, and the css

To start with, let’s work from the assumption that all of our thumbnails are the same size and shape. For this example, thumbnails will be 140×100. This is of course, the kind of thing you could change in user preferences for a web app, but let’s start simple. So using a short strip of 3 pictures, we have some XHTML that looks like this.

<img src="/images/mythumb01.jpg"/><img src="/images/mythumb02.jpg"/><img src="/images/mythumb03.jpg"/>

But the first problem we see, of course, is that they are oriented vertically…. which is fine, but let’s try for a horizontal strip, shall we. In the bad old days we’d have done this in a table. I’m talking Netscape 4 days, here *shudder*. Moving quickly on, a good tip for whenever you want strict rows or columns of something is to use an unordered list and some CSS, like this:

<ul class="imageRow">
	<li><img src="/images/mythumb01.jpg"/></li>
	<li><img src="/images/mythumb02.jpg"/></li>
	<li><img src="/images/mythumb03.jpg"/></li>
</ul>

ul.imageRow {
	width: 450px; /*width of all of your images plus the margins/padding you use*/
	height:140px;
}

ul.imageRow li {
	float: left;
	display: block;
	padding: 7px;
	margin: 0px;
}

ul.imageRow li img {
	border: 0px;
	height: 100px; /* just incase the images are a different size */
	width: 140px; /* ditto */
	margin: 0px;
	padding:0px;
}

This will give us something like this:

What if you want to show a lot of images and, say, have the box scroll horizontally? The solution is to add a <div> with a width smaller than the <ul>.

div.filmstrip {
	overflow-x: scroll;
	overflow-y: hidden;
	height: 140px; /* give it enough space for the images and the scrollbar, if present */
}

<div class="filmstrip">
	<ul class="imageRow">
	.
	.
	.
	</ul>
</div>

Which gives us the following:

Now I promised using opacity as a way to highlight pictures, so here it is:

ul.imageRow li {
	float: left;
	display: block;
	padding: 7px;
	margin: 0px;
	opacity: 0.7;
	filter: alpha(opacity=70);
}
ul.imageRow li:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
}

This gives us:

Here are some other ways to add a highlight to the active picture:

ul.imageRow li {
	float: left;
	display: block;
	padding: 7px;
	margin: 0px;
	background-color: #fff;
}
ul.imageRow li:hover {
	background-color:#bef;
}

ul.imageRow li {
	float: left;
	display: block;
	padding: 7px;
	margin: 0px;
}
ul.imageRow li:hover {
	padding: 4px;  /* IMPORTANT: allows the 3px border to fill the gap so the element
				is the same size as before */
	border: 3px dashed red;
}

Going back to the opacity example, let’s change the background and add an image to give it that filmstrip feel.

div.filmstrip {
	overflow-x: scroll;
	overflow-y: hidden;
	height: 180px; /* give it enough space for the images and the scrollbar, if present (and the
				 filmstrip image) */
	padding: 0px;
	background-color: #000;
}

ul.imageRow {
	width: 1848px; /*width of all of your images plus the margins/padding you use*/
	height: 170px;
	background: url(/images/filmstrip.jpg) 0 0 repeat-x;
	padding: 25px 0px 25px 0px;
	margin: 0px;
}

We could have added the filmstrip background to the div instead of the list, but then the strip doesn’t appear to scroll. Sometimes that’s desirable, here it isn’t. Other things to note are that we’ve added padding to the top and bottom of the unordered list so the thumbnails now fit within the intended area.

Okay, but what about those ugly scroll bars? Well, In the next article we’ll look at some alternatives using Javascript and CSS positioning.

First off, let’s look at how we add opacity, including the Internet Explorer-specific method for cross-browser compatibility.

.opaque {
	background-color: gold
	width: 5.0em;
	opacity: 1.0;
	filter: alpha(opacity=100); /* IE-specific */
}

.translucent {
	background-color: gold
	width: 5.0em;
	opacity: 0.5;
	filter: alpha(opacity=50); /* IE-specific */
}

.transparent {
	background-color: gold;
	width: 5.0em;
	opacity: 0.0;
	filter: alpha(opacity=0); /* IE-specific */
}
<div class="opaque">Some text</div>
<div class="transparent">Some text</div>
<div class="translucent">Some text</div>

gives us the following. Note that I’ve put the transparent <div> between the opaque and translucent ones so you know where it is.

now, what if you want the text to be opaque against a translucent background? The problem is, the text is a child of the <div> and opacity is inherited.  We can overcome this problem using multiple <div> tags and positioning.

<div id="outer_div" class="outer">
	<div id="background_div" class="translucent">&nbsp;
	</div>
	<div id="content_div" class="cover_text">
		Some Text
	</div>
</div>

And let’s add the two style definitions, cover_text and outer

.outer {
	height: 1.1em;
	position:relative;
}

.cover_text {
	position: absolute;
	height: 1.1em;
	top: 0px;
	left: 0px;
}

Height was included as the only element containing content had position: absolute. You could get around this by adding some text to background_div and setting the color the same as the background-color. Both work just as well.

Now we have:

Well, now that we have that, what about overlapping opacity like the title says?

Lets look at a few different cases.

.big_red_box {
	height: 10em;
	width: 10em;
	background-color: red;
	position:relative;
}
.medium_yellow_box {
	height: 6em;
	width: 6em;
	top: 2em;
	left: 2em;
	background-color: yellow;
	position:absolute;
}

.small_blue_box {
	height: 2em;
	width: 2em;
	top: 2em;
	left: 2em;
	background-color: blue;
	position:absolute;
}

Making the <div>s nested, largest->smallest gives us

Remember that opacity is inherited so our blue box will acquire the same opacity as the yellow box. Adding opacity:0.5; filter: alpha(opacity=50); to .medium_yellow_box, we get:

What if we want the blue box to be opaque? Just like the text example before, we don’t make it a child. You’d need to change the position attributes top and left to reflect its position within it's new parent

<div class="big_red_box">
	<div class="medium_yellow_box">&nbsp;
	</div>
	<div class="small_blue_box">
		&nbsp;
	</div>
</div>

<div style="position:relative;height:3em;width:3em;">
<div style="position:absolute;left:0em;top:0em;height:2em;width:2em;opacity:0.5;filter:alpha(opacity=50);background-color:red;float:left;">&nbsp;</div>
<div style="position:absolute;top:0em; left:1em;height:2em;width:2em;opacity:0.5;filter:alpha(opacity=50);background-color:blue;float:left;">&nbsp;</div>
<div style="position:absolute;top:1em;left:0.5em;height:2em;width:2em;opacity:0.5;filter:alpha(opacity=50);background-color:yellow;margin-bottom:1em;">&nbsp;</div></div>