Scroll images or text

programming web dev
1

** Scroll images or text **

			   						 							  							 						 						 							 						 				 					 						 							Javascript widget that scrolls text or images.

Javascript code

// JavaScript Document
[COLOR=#333333]var id_timmer;[/COLOR]
 function run(x)
{
var ul_elem = document.getElementById(x);
var li_elem = ul_elem.firstChild;
var first_li_elem = null;
 while(li_elem)
{
if(li_elem.nodeType != 3)
{
first_li_elem = li_elem;
break;
}
 li_elem = li_elem.nextSibling;
}
 var w = 0;
first_li_elem_width = first_li_elem.clientWidth;
 if(first_li_elem.style.marginLeft != ”)
{
w = parseInt(first_li_elem.style.marginLeft);
}
 first_li_elem.style.marginLeft = (w - 1) + “px”;
 if(parseInt(first_li_elem.style.marginLeft) <=  -(first_li_elem_width))
{
first_li_elem.style.marginLeft = “0px”;
ul_elem.removeChild(first_li_elem);
ul_elem.appendChild(first_li_elem);
}
}
 function start_run(z)
{
id_timmer = setInterval(”run(\’” + z + “\’)”, 20);
}
 function stop_run()
{
clearInterval(id_timmer);
}


**HTML template**
 [COLOR=#333333]<div id=”scrolling_tags”>
<ul id=”scroller” onmouseover=”stop_run()”  onmouseout=”start_run(’scroller’)”>
<li>
<a href=”">string1</a>
</li>[/COLOR]
 [COLOR=#333333]<li>
<a href=”">string2</a>
</li>[/COLOR]
 [COLOR=#333333]etc[/COLOR]
 [COLOR=#333333]</ul>[/COLOR]
 [COLOR=#333333]</div>[/COLOR]


**CSS code
**
 #scrolling_tags
{
width:100%;
height:30px;
margin:0 0 6px 0;
background-color:#000E1C;
color:#fff;
padding:0;
}
 #scroller
{
height:25px;
list-style:none;
text-align:center;
overflow:hidden;
margin:0;
padding:0;
display:block;
}
 #scroller li
{
float:left;
height:18px;
margin:0;
padding:8px 0 0 0;
overflow:hidden;
}
 #scroller li a
{
font-weight:bold;
font-size:100%;
color:#838383;
text-decoration:none;
}
 #scroller li a:hover
{
text-decoration:none;
 }

Notice
For autorun when the page is loaded put this in your html code:

<script  type=”text/javascript”>start_run(”scroller”)</script>