Scrolling Marquee Help

Hi All,

Ive recently inherited some code for a javascript marquee, but it moves vertically. The trouble is i want to move from left to right. I've had a look at the code, but i'm not sure what to change to achieve this (new to javascript).

Would someone please kindly take a look at the code and advise me what i can do it make it travel from left to right (if this is possible at all that is)?


<table width="90%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="left" class="tcat">Latest Education Jobs</td>
</tr>
<td align='left' style='border:1px solid #cccccc'">
<style type="text/css">
#marqueecontainer{
position: relative;
width: 100%; /*marquee width */
height: 300px; /*marquee height */
background-color: white;
overflow: hidden;
border: 0px solid orange;
padding: 2px;
padding-left: 2px;
background-color:#FFFFFF;
}
</style>

<script type="text/javascript">
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee

</script>
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position:relative; width: 99%;">

<table width="100%" border="0" cellspacing="0" cellpadding="2">
<?
$a = mysql_query("SELECT * FROM jobs where status = '0' order by jobid desc limit 10");
while($b = mysql_fetch_array($a))
{
?>
<tr>
<td align="left" colspan="2"><b><a href=<?=$fullurl?>/info_jobid_<?=$b[jobid]?>.html><?=$b[position]?></a></b>
<small>
<br><b>Hours:</b> <?=$b[hour]?>
<br><b>Job Location:</b>
<?
if(!empty($b[subcity]))
{
echo "$b[subcity], $b[subcounty], $b[country]";
}
elseif(!empty($b[subcounty]))
{
echo "$b[subcounty], $b[country]";
}
else
{
echo "$b[country]";
}
?>
<br>
<b>Salary:</b> <?=$b[salary]?></small>
<hr style="background-color: rgb(204, 204, 204);" width="100%" size="1" noshade="noshade" color="#cccccc">
</td>
</tr>
<?
}
?>
</table>
</div>
</div>
<hr style="background-color: rgb(204, 204, 204);" width="100%" size="1" noshade="noshade" color="#cccccc">
<div><a href="<?=$fullurl?>/rss.php" title="RSS Feeds"><img src="<?=$fullurl?>/images/rss1.gif" border="0" /></a>
<a href='javascript:void(0);' onclick="open_win()">What is RSS?</a></div>
</table>


Thanks

Try replacing all references to "top" in that script with "left", and "height" with "width." Couldn't hurt.

Good thinking, but unfortunatley that just stopped the marquee moving althogether :(

I meant ...

var actualheight='' -----> becomes var actualwidth=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))

...becomes

function scrollmarquee(){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

...and so on.

Hi,

Tried that, as an example:


var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualwidth=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
}


Marquee is still moving but is also moving vertically still.

Not the greatest scroller, but .... OK. :)

<html>
<head>
</head>
<body>
<table width="90%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="left" class="tcat">Latest Education Jobs</td>
</tr>
<td align='left' style='border:1px solid #cccccc'">
<style type="text/css">
#marqueecontainer{
position: relative;
width: 100%; /*marquee width */
height: 300px; /*marquee height */
background-color: white;
overflow: hidden;
border: 0px solid orange;
padding: 2px;
padding-left: 2px;
background-color:#FFFFFF;
}
</style>

<script type="text/javascript">
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualwidth=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.offsetWidth
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and

exit
cross_marquee.style.width=marqueewidth+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position:relative; width: 99%;">
foobar foobar foobar foobar foobar foobar foobar foobar foobar
foobar foobar foobar foobar foobar foobar foobar foobar foobar
foobar foobar foobar foobar foobar foobar foobar foobar foobar
foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar
</div>
</div>
</body>
</html>

Hi,

Sorry for the delayed response, another project came it was a bit urgent!

Thats almost there but the only problem im facing is that whatever doesnt fit on the intial screen, gets 'chopped'.

E.G. Say the text said - This is my site, but the screen could only hold This is.. when the scroller moves along my site would be missing. As would any text that followed the chopped text.

Hope this makes sense, Any ideas why this is happening... I have the width set to 100%

Thanks

var FontSize=14; // start large and reduce until words are not wrapped

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
while (cross_marquee.offsetHeight>FontSize*2&&cross_marquee.offsetWidth<2500) cross_marquee.style.width=cross_marquee.offsetWidth+5+'px';
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.offsetWidth
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and

cross_marquee.style.width=marqueewidth+"px"
cross_marquee.style.overflow="scroll"
return
}