Back to the main page

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 autoScroll parameter is set to "always" the hot spots are disabled. I've also set the autoScrollDirection to "endlessloopright" so it will start from the beginning when it reaches the end.

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 autoscrolling again. This is done by adding two functions to the page that are bound to the mouseover/mouseout events. These functions stop/start the autoscrolling: 


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

Back to the main page