jQuery Smooth Div Scroll by Thomas Kahn Back to index

Multiple auto scrollers on one page










In this example I have three auto scrollers that loop endlessly in two different directions. Each scroller has a different speed. In the code on this page I've set up event handlers that pause and start the auto scrolling when you move the mouse pointer over the scrollers. Most people take it for granted that you can create as many instances of a plugin as you want on a single page and they will not interfere with each other, but this is not always true. In my work I often find plugins that work great as long as there's just one of them at the same page. If I try adding two or three instances of them on the same page they stop working or behave irrational. The reason in 9 cases out of 10 is that the developer has not isolated the instances from each other. When they share, access and alter the same data the result is chaos. This is something I've spent hours preventing from happening in Smooth Div Scroll.

If you experience a flickering in the layout when the page is loaded this could be caused by the fact that internally Smooth Div Scroll uses $(window).load when it's time recalculate the scrollable area and start the auto scrolling when content is loaded through AJAX. The reason for this is that

The CSS for this page looks like this. Please note that since the images are wrapped in link tags, I have set a style for them instead of the actual images inside them. Since link tags are not block elements by default, I have forced them to display as block elements. Otherwise Smooth Div Scroll will calculate their width to zero:


#logoParade, #logoParadeTwo, #logoParadeThree
{
	width: 500px;
	height: 75px;
	position: relative;
}
div.scrollableArea a {
	display: block;
	padding-right: 25px;
	float: left;
}
	

...and here's what the jQuery that initializes the scrollers looks like:


$(document).ready(function () {
	$("#logoParade").smoothDivScroll({
		autoScrollingMode: "always", 
		autoScrollingDirection: "endlessLoopLeft", 
		autoScrollingStep: 1, 
		autoScrollingInterval: 45, 
		getContentOnLoad: { 
			method: "getAjaxContent",
			content: "ajaxContent.html",
			manipulationMethod: "replace"
		}
	});
			
	$("#logoParadeTwo").smoothDivScroll({
		autoScrollingMode: "always", 
		autoScrollingDirection: "endlessLoopRight", 
		autoScrollingStep: 2, 
		autoScrollingInterval: 5, 
		getContentOnLoad: { 
			method: "getAjaxContent",
			content: "ajaxContent.html",
			manipulationMethod: "replace"
		}
	});
			
	$("#logoParadeThree").smoothDivScroll({
		autoScrollingMode: "always", 
		autoScrollingDirection: "endlessLoopLeft", 
		autoScrollingStep: 1, 
		autoScrollingInterval: 15, 
		getContentOnLoad: { 
			method: "getAjaxContent",
			content: "ajaxContent.html",
			manipulationMethod: "replace"
		}
	});
});
	

The jQuery code for the event handlers looks like this:


// First logo parade
$("#logoParade").bind("mouseover", function() {
	$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
	$(this).smoothDivScroll("startAutoScrolling");
});
			
// Second logo parade
$("#logoParadeTwo").bind("mouseover", function() {
	$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
	$(this).smoothDivScroll("startAutoScrolling");
});
			
// Thirs logo parade
$("#logoParadeThree").bind("mouseover", function() {
	$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
	$(this).smoothDivScroll("startAutoScrolling");
});	
	

As you can see i the code for the event handlers, I've taken advantage of chaining several methods on the same selector and inside the functions I've used $(this) as the selector when calling the smoothDivScroll method.

What does the AJAX content look like?

I've recieved some questions regarding the AJAX bit. What sort of content can you load and what does it look like? This functionality is not really unique to Smooth Div Scroll since I just use the one of the standard methods supplied by jQuery to load content using AJAX (Asynchronous Javascript And XML).

Internally Smooth Div Scroll uses the jQuery method $.get() to load content when the plugin initializes. When it comes to Smooth Div Scroll you probably want to load what is commonly called a page fragment. This is a piece of HTML code that is not a complete page. In the example above, the page fragment that is loaded looks like this:


<a href="http://www.kmart.com/" target="_blank">
	<img src="images/logos/k-mart.gif" alt="K-mart" border="0"/>
</a>
	
<a href="http://www.radioshack.com/" target="_blank">
	<img src="images/logos/radio_shack.gif" alt="Radio Shack" border="0"/>
</a>

<a href="http://www.ibm.com/" target="_blank">
	<img src="images/logos/ibm.gif" alt="IBM" border="0"/>
</a>

<a href="http://www.cat.com/" target="_blank" id="startAtMe">
	<img src="images/logos/caterpillar.gif" alt="Caterpillar" border="0"/>
</a>

<a href="http://www.valvoline.com/" target="_blank">
	<img src="images/logos/valvoline.gif" alt="Valvoline" border="0"/>
</a>

<a href="http://www.hardrockcafe.com/" target="_blank">
	<img src="images/logos/hard_rock_cafe.gif" alt="Hars Rock Cafe" border="0"/>
</a>

<a href="http://www.quakerstate.com/" target="_blank">
	<img src="images/logos/quaker_state.gif" alt="Quaker State" border="0"/>
</a>

<a href="http://www.volvo.com/" target="_blank">
	<img src="images/logos/volvo.gif" alt="Volvo" border="0"/>
</a>

<a href="http://www.volkswagen.com/" target="_blank">
	<img src="images/logos/volkswagen.gif" alt="Volkswagen" border="0"/>
</a>

<a href="http://www.apple.com/" target="_blank">
	<img src="images/logos/apple.gif" alt="Apple Computer" border="0"/>
</a>

	

If you for some reason can't load a page fragment, you can load an entire HMTL page and use filterTag to filter out just the part of that page that you want to load into the scroller.

Back to index