jQuery Smooth Div Scroll by Thomas Kahn

Back to index

Running ticker


ABB Ltd -

Alfa Laval -

ASSA ABLOY B -

AstraZeneca -

Atlas Copco A -

Atlas Copco B -

Autoliv SDB -

Axfood -

Boliden -

Castellum -

Electrolux A -

Electrolux B -

Elekta B -

Ericsson A -

Ericsson B -

Fabege -

Getinge B -

Handelsbanken A -

Handelsbanken B -

Hennes & Mauritz B -

Hexagon B -

Holmen A -

Holmen B -

Hufvudstaden A -

Hufvudstaden C -

Husqvarna A -

Husqvarna B -

Industrivärden A -

Industrivärden C -

Investor A -

Investor B -

JM -

Kinnevik A -

Kinnevik B -

Latour A -

Latour B -

Lindab International -

Lundbergföretagen B -

Lundin Mining Corp. SDB -

Lundin Petroleum -


Here's an example where Smooth Div Scroll is used to create a stock ticker. Since the autoScrollingMode parameter is set to "always" the hot spots are disabled. I've also set the autoScrollingDirection to "endlessLoopRight" so it will just scroll in an endless loop.

Here's the CSS for the p-tags that I have put inside SmoothDivScroll in this example:


	#scrollingText div.scrollableArea p
	{
		display: block;
		float: left;
		margin: 0;
		padding-right: 7px;
		padding-top: 1px;
		font-family: Courier, Arial, Sans-Serif; 
		font-size: 12px;
		line-height: 12px;
		font-weight: normal; 
		background-color: #fff; 
		color: #000; 
		white-space: nowrap;
	}
	

If you move the mouse pointer over the ticker you'll see that it stops. As soon as you move the mouse pointer away from the ticker it starts auto scrolling again. This is done by adding two functions to the page that are bound to the mouseover/mouseout events. These functions stop/start the auto scrolling:


	// Mouse over
	$("#scrollingText").bind("mouseover", function(){
		$("#scrollingText").smoothDivScroll("stopAutoScrolling");
	});
	
	// Mouse out
	$("#scrollingText").bind("mouseout", function(){
		$("#scrollingText").smoothDivScroll("startAutoScrolling");
	});
	

Back to index