Back to the main page

Multiple autoscrollers on one page

In this example I have three autoscrollers 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 autoscrolling when you move the mouse pointer over the scrollers. The content for these scrollers is loaded using the option ajaxContentURL - I just thought it would be nice to demonstrate that feature.

The CSS for this page looks like this:

	#logoParade, #logoParadeTwo, #logoParadeThree
	{
		width: 500px;
		height: 75px;
		position: relative;
	}

	div.scrollableArea a img
	{
		padding-right: 25px;
		float: left;
	}
	

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

$("div#logoParade").smoothDivScroll({autoScroll: "always", autoScrollDirection: "endlessloopleft", autoScrollStep: 1, autoScrollInterval: 45, ajaxContentURL: "ajaxContent.html"});
			
$("div#logoParadeTwo").smoothDivScroll({autoScroll: "always", autoScrollDirection: "endlessloopright", autoScrollStep: 2, autoScrollInterval: 5, ajaxContentURL: "ajaxContent.html"});
			
$("div#logoParadeThree").smoothDivScroll({autoScroll: "always", autoScrollDirection: "endlessloopleft", autoScrollStep: 1, autoScrollInterval: 15, ajaxContentURL: "ajaxContent.html"});
	

The jQuery code for the event handlers looks like this:

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

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 .load() 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>
	

Back to the main page