Thursday, November 26, 2009

How to scroll html marquee continue without any space after ending and keep scrolling?

I am try to scroll images (about 25 images) through html marquee . I want continue scrolling without any scpace come after ending the list.

put this code in body:
<ul id="scroller"><li><img src="http://www.blogger.com/img1.jpg" width="130" border="0" /> <li><img src="http://www.blogger.com/img2.jpg" width="130" border="0" /> <li><img src="http://www.blogger.com/img3.jpg" width="130" border="0" /></li><li><img src="http://www.blogger.com/img4.jpg" width="130" border="0" /> <li></li></ul>

<script language="javascript" type="text/javascript">scrolling('scroller', 60);</script>


and put the javascript and style in head

<script language="javascript">

function scrolling(ulId, speed)

{

this.container = document.getElementById(ulId);

this.container.Scroller = this;

this.speed = speed;

this.scroll = function()

{

var c = this.container.firstChild;

var first = null;

while (c)

{

if (c.tagName == 'LI')

{ first = c; break; }

c = c.nextSibling;

}

var nodeSize = 78;

var px = 0;

nodeSize = first.clientWidth;

if (first.style.marginLeft != ''){
      px = parseInt(first.style.marginLeft);
}

first.style.marginLeft = ( px - 2 ) + 'px';

if ( parseInt(first.style.marginLeft) <= -(nodeSize) ) {
 first.style.marginLeft = '0px';
 this.container.removeChild(first);
 this.container.appendChild(first);
 }
 setTimeout('document.getElementById(\'' + this.container.id + '\').Scroller.scroll()', this.speed);
}
 setTimeout('document.getElementById(\'' + ulId + '\').Scroller.scroll()', this.speed);
}
</script>

<style>

#scroller

{

PADDING-RIGHT: 0px;

LIST-STYLE: none none outside;

PADDING-LEFT: 0px;

PADDING-BOTTOM: 0px;

MARGIN: 0px;

OVERFLOW: hidden;

PADDING-TOP: 0px;

HEIGHT: 57px;

TEXT-ALIGN: center

}

#scroller LI

{

PADDING-RIGHT: 15px;

PADDING-LEFT: 15px;

FLOAT: left;

PADDING-BOTTOM: 3px;

MARGIN: 0px;

WIDTH: 130px;

PADDING-TOP: 3px;

HEIGHT: 57px

}

</style>