jQuery Smooth Div Scroll by Thomas Kahn

Back to index

Clickable logo parade


K-mart Radio Shack IBM Caterpillar Valvoline Hars Rock Cafe Quaker State Volvo Volkswagen Apple Computer

Smooth Div Scroll can be used to create a "parade" of clickable logos or banners. Either you make them scrollable manually or, like in this example, make them loop endlessly. I've added event handlers to pause the auto scroll whenever the user moves the mouse over the logos. And when the user moves the mouse pointer away from the logos, the auto scrolling starts again.

Here's the CSS in this example. Please note the use of display:block; on the link tags inside the scrollable area.:

#logoParade
{
	width: 728px;
	height: 75px;
	position: relative;
}

#logoParade div.scrollableArea a
{
	display: block;
	float: left;
	padding-left: 10px;
}

...and this is what the jQuery code looks like. Note the code for the event handlers that stop/start the auto scrolling:

$(document).ready(function() {
	$("#logoParade").smoothDivScroll({ 
		autoScrollingMode: "always", 
		autoScrollingDirection: "endlessLoopRight", 
		autoScrollingStep: 1, 
		autoScrollingInterval: 25 
	});

	// Logo parade event handlers
	$("#logoParade").bind("mouseover", function() {
		$(this).smoothDivScroll("stopAutoScrolling");
	}).bind("mouseout", function() {
		$(this).smoothDivScroll("startAutoScrolling");
	});

});

Back to index