Scroll images or text

[c_cicca]

Javascript widget that scrolls text or images.

Javascript code


// JavaScript Document
var id_timmer;

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

<div id=”scrolling_tags”>
<ul id=”scroller” onmouseover=”stop_run()” onmouseout=”start_run(’scroller’)”>
<li>
<a href=”">string1</a>
</li>

<li>
<a href=”">string2</a>
</li>

etc

</ul>

</div>


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>