Page 1 of 1

Reset Marquee

Posted: Tue Aug 04, 2009 5:05 pm
by oztech
Hi,

I'm using <marquee>tag to notify some text to users. I did some research on stopping and playing again the marquee, but I couldn't find any information how I can reset/restart marquee.

I have < next and > previous button to control the marquee tag, however it looks awkward when I click those button because the marquee does not get reset once I click those buttons.

Please help,
Young

Re: Reset Marquee

Posted: Wed Aug 05, 2009 12:50 am
by bala_1225
Hi this will help u....

<marquee direction=up width="195" height="300" scrollAmount=2.8 scrollDelay=70 class="sidelink" onmousedown="this.stop()" onmouseover="this.stop()" onmousemove="this.stop()" onmouseout="this.start()">

&nbsp;&nbsp;<a href="http://example.com/" target="_blank">example.com</a><br><br>
&nbsp;&nbsp;<a href="http://example.com" target="_blank">example.com</a><br><br>
&nbsp;&nbsp;<a href="http://example.com" target="_blank">example.com</a><br><br>
&nbsp;&nbsp;<a href="http://example.com" target="_blank">example.com</a><br><br>
&nbsp;&nbsp;<a href="http://example.com" target="_blank">example.com</a><br><br>
&nbsp;&nbsp;<a href="http://example.com" target="_blank">example.com</a><br><br>
&nbsp;&nbsp;<a href="http://example.com" target="_blank">example.com</a><br><br>
</marquee>

Re: Reset Marquee

Posted: Wed Aug 05, 2009 12:54 am
by bala_1225
Or u can try this one...

<html>
<head>
<script type="text/javascript">
var UpdateInterval = 1;
var PixelPerInterval = 1;
var scorllerInterval;

function start_scroll_left()
{
scorllerInterval = setInterval(scroll_left, UpdateInterval);
}

function scroll_left()
{
document.getElementById('scroller').scrollLeft -= PixelPerInterval;
}

function start_scroll_right()
{
scorllerInterval = setInterval(scroll_right, UpdateInterval);
}

function scroll_right()
{
document.getElementById('scroller').scrollLeft += PixelPerInterval;
}

function stop_scrolling()
{
clearInterval(scorllerInterval);
}
</script>
</head>
<body>

<div id="scroller" style="overflow: hidden; white-space: nowrap; border:#999999 1px solid; top:200px; left:50px; right:750px; position:absolute;">
<img src="images1.bmp" border="0"/>&nbsp;&nbsp;&nbsp;
<img src="images2.bmp" border="0"/>&nbsp;&nbsp;&nbsp;
<img src="images3.bmp" border="0"/>&nbsp;&nbsp;&nbsp;
</div>


<p align="center" style="position:relative;">
<span id="left" onmouseover="start_scroll_left()" onmouseout="stop_scrolling()"><img src="prev.png" border="0"/></span>
<span id="right" onmouseover="start_scroll_right()" onmouseout="stop_scrolling()"><img src="next.png" border="0" /></span>
</p>

</body>
</html>