Jump to content


Photo

Marquee - rollover?


  • Please log in to reply
1 reply to this topic

#1 extrovertive

extrovertive
  • Members
  • PipPipPip
  • Advanced Member
  • 235 posts

Posted 15 July 2006 - 10:46 PM

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:
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;

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

#2 GBS

GBS
  • Members
  • PipPipPip
  • Advanced Member
  • 108 posts

Posted 26 July 2006 - 11:42 AM

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,,...

<html>
<head>

<style>

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

#mq2
{
text-align:right;

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

</style>

</head>
<body>
<!-- Scrolling Text -->

<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>
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,,
Sorry for my english,... I do my best, but sometimes,...
1st intention: understand the problem
2nd intention: try to solve it
3rd intention: try to understand how to solve it :)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users