# Scroll images or text

**URL:** <https://forum.kirupa.com/t/scroll-images-or-text/309807>\
**Category:** web dev\
**Created:** [May 25, 2010, 10:10am UTC](https://forum.kirupa.com/t/scroll-images-or-text/309807 "2010-05-25T10:10:28Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![c\_cicca](https://avatars.discourse-cdn.com/v4/letter/c/ec9cab/32.png) [@c\_cicca](https://forum.kirupa.com/u/c_cicca)\
**Post date:** [May 25, 2010, 10:10am UTC](https://forum.kirupa.com/t/scroll-images-or-text/309807/1 "2010-05-25T10:10:28Z")

</div>

\*\* Scroll images or text \*\*

```
			   						 							  							 						 						 							 						 				 					 						 							Javascript widget that scrolls text or images.

```

Javascript code

```auto
// 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);
}

```

```auto
**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]

```

```auto
**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:

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

```