Marquee - rollover?

extrovertive · July 15, 2006

If you go here http://networklao.com/test/scroll.htm you'll see there's a scrolling text. After DHTML.... it doesn't continue. I want it to wrap-around/rollover/continue on the same line) rather than leaving blank spaces until the text comes back again from the other end. I want it to be like "DHTML . . . . . . .JavaScript Development forum" to continue on.

Is there a way to weak this script below? I am not looking for you write a javascript from scratch but for you to tweak the script a bit.

Here's the Javascript code:
[code]
var tWidth='100%';
var tHeight='40px';
var tcolour='#0033FF';
var moStop=false;
var fontfamily = 'Microsoft Sans Serif';
var tSpeed=2;

var cps=tSpeed; var aw, mq; var fsz = parseInt(tHeight) - 4; function startticker(){if (document.getElementById) {var tick = '<div style="position:relative;width:'+tWidth+';height:'+tHeight+';overflow:hidden;background-color:'+tcolour+'"'; if (moStop) tick += ' onmouseover="cps=0" onmouseout="cps=tSpeed"'; tick +='><div id="mq" style="position:absolute;left:0px;top:0px;font-family:'+fontfamily+';color:#FF9933;font-size:30px;white-space:nowrap;"><\/div><\/div>'; document.getElementById('ticker').innerHTML = tick; mq = document.getElementById("mq"); mq.style.left=(parseInt(tWidth)+10)+"px"; mq.innerHTML='<span id="tx">'+content+'<\/span>'; aw = document.getElementById("tx").offsetWidth; lefttime=setInterval("scrollticker()",50);}} function scrollticker(){mq.style.left = (parseInt(mq.style.left)>(-10 - aw)) ?parseInt(mq.style.left)-cps+"px" : parseInt(tWidth)+10+"px";} window.onload=startticker;
[/code]

Or, if anyone can point me to a script does does horizontal wrap around text, let me know.

GBS · July 26, 2006

Hi,

I've taken the start of your code & made some few modifications,
The idea was to add a second scroll text, & make it start once the first scroll is off. And then start the first scroll again & init the second, and so on,,...

[code]<html>
<head>

<style>

#mq1
{
border:solid 1px red;
width:100px;
}

#mq2
{
text-align:right;

border:solid 1px green;
width:100px;
}

</style>

</head>
<body>


<div id=ticker></div>

<script>

var tWidth='100%';
var tHeight='40px';
var tcolour='#0033FF';
var moStop=true;
var fontfamily = 'Microsoft Sans Serif';
var tSpeed=4;

var content="testing scrolling text,,...";

var cps=tSpeed;
var fsz = parseInt(tHeight) - 4;
var mq1,mq2;

function startticker()
{
if (document.getElementById)
{
var tick = '<div style="position:relative;width:'+tWidth+';height:'+tHeight+';overflow:hidden;background-color:'+tcolour+'"';
if (moStop)
tick += ' onmouseover="cps=0" onmouseout="cps=tSpeed"';
tick +='><div id="mq1" style="position:absolute;left:0px;top:0px;font-family:'+fontfamily+';color:#FF9933;font-size:30px;white-space:nowrap;"><\/div>';

tick +='<div id="mq2" style="position:relative;font-family:'+fontfamily+';color:#FF9933;font-size:30px;white-space:nowrap;"><\/div><\/div>';

document.getElementById('ticker').innerHTML = tick;

mq1 = document.getElementById("mq1");
mq1.style.left=(parseInt(tWidth)+10)+"px";
mq1.innerHTML='<span id="tx1">'+content+'<\/span>';

mq2 = document.getElementById("mq2");
mq2.innerHTML='<span id="tx2">'+content+'<\/span>';
var leftpos=window.screen.width-40;
mq2.style.left=leftpos+"px";

lefttime=setInterval("scrollticker()",50);
}
}

var reset_var1="";
var reset_var2="";

function scrollticker()
{
mq1.style.left = parseInt(mq1.style.left)-cps+"px";

if (parseInt(mq1.style.left)-cps==0 || parseInt(mq1.style.left)-cps<0)
{
mq2.style.left = parseInt(mq2.style.left)-cps+"px";

if (reset_var2=="done");
else
{
var leftpos=window.screen.width-40;
mq2.style.left=leftpos+"px";
reset_var2="done";
reset_var1="";
}
}

if (parseInt(mq2.style.left)-cps==0 || parseInt(mq2.style.left)-cps<0)
{
if (reset_var1=="done");
else
{
var leftpos=window.screen.width-40;
mq1.style.left=leftpos+"px";
reset_var1="done";
reset_var2="";
}
mq2.style.left = parseInt(mq2.style.left)-cps+"px";
}

document.getElementById('debug').value="left pos for mq1 is: "+mq1.style.left+" & left pos for mq2 is: "+parseInt(mq2.style.left)+" & window width is: "+window.screen.width;

}
window.onload=startticker;

</script>

<textarea id="debug" cols=100 rows=5></textarea>

<script>

document.getElementById('debug').value="";

</script>

</body>
</html>
[/code]
I've added some borders to the scroll text to dissociate the 2 scrollings, & a debug textarea to catch the events,

Hoping it helps,,

l8tr,,

Sign In

Marquee - rollover?

Recommended Posts

extrovertive

Link to comment

Share on other sites

GBS

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information