Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Question 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)?

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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Try replacing all references to "top" in that script with "left", and "height" with "width." Couldn't hurt.

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Good thinking, but unfortunatley that just stopped the marquee moving althogether

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Hi,

    Tried that, as an example:

    Code:
    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.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Not the greatest scroller, but .... OK.

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

  • #7
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    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

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    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
    }
    Last edited by vwphillips; 05-27-2009 at 05:04 PM. Reason: To prevent locking computer if FontSize too small
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •