Server was down 
LeaseWeb should rename themselves to LeaseFail.
HTML (but with non-validating comments):
<div id="toppers">
<h2>Toppers van de week</h2>
<div id="scrollcontainer">
<a class="leftS"></a>
<a class="rightS"></a>
<div id="scrollWrapper">
<div class="scrollableArea">
<a href="huis/1/gegevens"><img src="images/vakantiehuis1.jpg" width="146" height="110" alt="" /></a>
<a href="huis/2/gegevens"><img src="images/vakantiehuis2.jpg" width="146" height="110" alt="" /></a>
<a href="huis/3/gegevens"><img src="images/vakantiehuis3.jpg" width="146" height="110" alt="" /></a>
<a href="huis/4/gegevens"><img src="images/vakantiehuis4.jpg" width="146" height="110" alt="" /></a>
<a href="huis/1/gegevens"><img src="images/vakantiehuis1.jpg" width="146" height="110" alt="" /></a>
<a href="huis/2/gegevens"><img src="images/vakantiehuis2.jpg" width="146" height="110" alt="" /></a>
<a href="huis/3/gegevens"><img src="images/vakantiehuis3.jpg" width="146" height="110" alt="" /></a>
<a href="huis/4/gegevens"><img src="images/vakantiehuis4.jpg" width="146" height="110" alt="" /></a>
</div>//scrollablecontainer
</div> //scrollwrapper
</div> //scrollcontainer
</div> //toppers
Neither #toppers nor the h2 are necessary for the scroll, but they are there for you to see how the CSS relates.
The empty alts means this is a Mystery Menu to some. An anchor without anchor text. You have no idea where the link goes. I tried to get the name of the house (most had names) in the alt but the back-end never got around to it. If you have total control, do not leave the alts empty if they are links.
CSS:
/*jQuery bleh bleh blaaaarg*/
#scrollcontainer {
position: relative;
width: 626px;
height: 136px;
margin: 0 auto .3em;
overflow: auto;
}
#scrollcontainer.jqScroll { <--jQuery adds this class!
width: 620px;
height: 116px;
overflow: hidden;
}
/*buttons*/
.leftS, .rightS {
position: absolute;
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(#);/*IE*/
z-index: 100;
}
.leftS {
left: 0;
}
.leftButton {
background: url(images/arrow_left.png) center center no-repeat;
}
.rightS {
right: 0;
}
.rightButton {
background: url(images/arrow_right.png) center center no-repeat;
}
#scrollWrapper {
position: relative;
width: 100%;
height: 100%;
}
#scrollWrapper.hideOverflow {
overflow: hidden;
}
.scrollableArea {
position: relative;
float: left;
width: auto;
margin: 0 -999em 0 0;
}
.scrollableArea a img {
float: left;
}
#toppers div a img {
width: 146px;
height: 110px;
padding: 3px;
border: 0;
}
#toppers div a:visited img {
padding: 0;
border: 3px solid #fdb302;
}
#toppers div a:hover img,
#toppers div a:focus img,
#toppers div a:active img {
padding: 0;
border: 3px solid #b000f9;
}
Notice the jqScroll class. The new height you see is reflecting now the absence of the horizontal scrollbar that we started with. It is based on likely Firefox 3.0 and may not be correct on a range of scrollbar heights.
Then overflow: hidden is added. The heights and widths are careful to prevent a vertical scrollbar on the right, since the container should always be at least as tall as the images. Mine get padding or border so that had to be reckoned with.
.hideOverflow I think is also mine. The original scroller has CSS that does that out of the box, meaning the scroller was broken without JS.
The CSS is old. The new me would be more awesome and would write lines like
#toppers img { instead.
JS:
(in the <head>...)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.smoothDivScroll-1.0.js"></script>
<script type="text/javascript">
$(function() {
$('div#scrollcontainer').smoothDivScroll({ autoScroll: 'onstart',
autoScrollDirection: 'endlessloopright',
autoScrollStep: 1,
autoScrollInterval: 15,
startAtElementId: '',
visibleHotSpots: 'always' });
$('div#scrollcontainer').addClass('jqScroll');
// let jQuery change dimensions of scrollcontainer
});
</script>
Way too much JS (and the many HTML containers you see is needed by the JS. Otherwise you only need two boxes). Were I to write this today, it would be a single div with a un-ordered list inside.
It needs first the jQuery library, then the widget-UI stuff, then the scroller. Ideally you’d squish all these into a single request (also the start and params code listed… and the adding of the class).
