c_cicca
05-25-2010, 06:03 AM
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>
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>