Results 1 to 8 of 8

Thread: 2 Marquees on 1 page

  1. #1
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 2 Marquees on 1 page

    I am wanting to put 2 marquees from http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm on 1 page. When I do, it doesn't work correctly. What do I need to do so I can have both on 1 page. Thanks.

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    If the content is the exact same in both... then all the code that goes in the <body> section... copy ALL of it to the second spot you want it to appear.

    If the content is different...

    See all that code below the ///DO NOT EDIT BELOW THIS LINE ...??

    You have to edit all that.

    Alternately, you could make 2 separate marquees put on on your page as normal. put the other on a page all by it's lonesome, with NO OTHER code, and use php include(); to attach it where you want it on the page.

    Not sure how that will look, of course... but it may be just right.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thats what I tried and it didn't work. The top marquee worked sort of (it was scrolling the text that should have been in the bottom marquee), but the bottom one didn't. I copied it exactly.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Try this out:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    
    /*
    * OO Cross browser Marquee script-  Dynamic Drive (www.dynamicdrive.com)
    * For full TOS source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
    * Credit MUST stay intact
    * Modified in http://www.dynamicdrive.com/forums by jscheuer1 * For multiple use
    */
    var marqueecontent='<nobr><font face="Arial">Thank you for visiting <a href="http://www.dynamicdrive.com">Dynamic Drive.</a> If you find this script useful, please consider linking to us by <a href="../link.htm">click here.</a> Enjoy your stay!</font></nobr>'
    var marqueecontent2='<nobr>And the text just keeps on whizzing by, no matter what you do!</nobr>'
    
    //////////////// Stop Editing ////////////////
    
    function cross_marquee(marqueecontent, marqueewidth, marqueeheight, marqueespeed, marqueebgcolor, pauseit){
    if(!cross_marquee.ar)
    cross_marquee.ar=[];
    cross_marquee.ar[this.mqid=cross_marquee.ar.length]=this;
    this.marqueecontent=marqueecontent;
    this.marqueewidth=marqueewidth;
    this.marqueeheight=marqueeheight;
    this.marqueespeed=marqueespeed;
    this.marqueebgcolor=marqueebgcolor;
    this.pauseit=pauseit;
    
    this.marqueespeed=(document.all)? this.marqueespeed : Math.max(1, this.marqueespeed-1) //slow speed down by 1 for NS
    this.copyspeed=this.marqueespeed
    this.pausespeed=(this.pauseit==0)? this.copyspeed: 0
    this.iedom=document.all||document.getElementById
    if (this.iedom)
    document.write('<span id="temp'+this.mqid+'" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+this.marqueecontent+'</span>')
    this.actualwidth=''
    if (this.iedom||document.layers){
    with (document){
    document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
    if (this.iedom){
    write('<div style="position:relative;width:'+this.marqueewidth+';height:'+this.marqueeheight+';overflow:hidden">')
    write('<div style="position:absolute;width:'+this.marqueewidth+';height:'+this.marqueeheight+';background-color:'+this.marqueebgcolor+'" onMouseover="cross_marquee.ar['+this.mqid+'].copyspeed=cross_marquee.ar['+this.mqid+'].pausespeed" onMouseout="cross_marquee.ar['+this.mqid+'].copyspeed=cross_marquee.ar['+this.mqid+'].marqueespeed">')
    write('<div id="iemarquee'+this.mqid+'" style="position:absolute;left:0px;top:0px"></div>')
    write('</div></div>')
    }
    else if (document.layers){
    write('<ilayer width='+this.marqueewidth+' height='+this.marqueeheight+' name="ns_marquee'+this.mqid+'" bgColor='+this.marqueebgcolor+'>')
    write('<layer name="ns_marquee2'+this.mqid+'" left=0 top=0 onMouseover="cross_marquee.ar['+this.mqid+'].copyspeed=cross_marquee.ar['+this.mqid+'].pausespeed" onMouseout="cross_marquee.ar['+this.mqid+'].copyspeed=cross_marquee.ar['+this.mqid+'].marqueespeed"></layer>')
    write('</ilayer>')
    }
    document.write('</td></table>')
    }
    }
    
    this.populate();
    }
    
    cross_marquee.prototype.populate=function(){
    if (this.iedom){
    this.cross_marquee=document.getElementById? document.getElementById("iemarquee"+this.mqid) : document.all['iemarquee'+this.mqid];
    this.cross_marquee.style.left=parseInt(this.marqueewidth)+8+"px"
    this.cross_marquee.innerHTML=this.marqueecontent
    this.actualwidth=document.all? document.all['temp'+this.mqid].offsetWidth : document.getElementById("temp"+this.mqid).offsetWidth;
    }
    else if (document.layers){
    this.ns_marquee=document['ns_marquee'+this.mqid].document['ns_marquee2'+this.mqid];
    this.ns_marquee.left=parseInt(marqueewidth)+8
    this.ns_marquee.document.write(this.marqueecontent)
    this.ns_marquee.document.close()
    this.actualwidth=this.ns_marquee.document.width
    }
    var cacheobj=this;
    this.lefttime=setInterval(function(){cacheobj.scrollmarquee();},20)
    }
    
    cross_marquee.prototype.scrollmarquee=function(){
    if (this.iedom){
    if (parseInt(this.cross_marquee.style.left)>(this.actualwidth*(-1)+8))
    this.cross_marquee.style.left=parseInt(this.cross_marquee.style.left)-this.copyspeed+"px"
    else
    this.cross_marquee.style.left=parseInt(this.marqueewidth)+8+"px"
    
    }
    else if (document.layers){
    if (this.ns_marquee.left>(this.actualwidth*(-1)+8))
    this.ns_marquee.left-=this.copyspeed
    else
    this.ns_marquee.left=parseInt(this.marqueewidth)+8
    }
    }
    
    </script>
    </head>
    <body>
    
    <script type="text/javascript">
    /*Explanation of Parameters:
    marqueecontent //Specify the name of the array containing the marquee text
    marqueewidth //Specify the marquee's width (in pixels) ex: "300px"
    marqueeheight //Specify the marquee's height ex: "25px"
    marqueespeed //Specify the marquee's marquee speed (larger is faster 1-10) ex: 2
    marqueebgcolor //Specify background color ex: "#DEFDD9"
    pauseit //Pause marquee onMousever (0=no. 1=yes)?
    
    usage: new cross_marquee(marqueecontent, marqueewidth, marqueeheight, marqueespeed, marqueebgcolor, pauseit)
    */
    new cross_marquee(marqueecontent, "300px", "25px", 2, "#DEFDD9", 1)
    </script>
    
    <br>
    
    <script type="text/javascript">
    new cross_marquee(marqueecontent2, "200px", "25px", 3, "#cccccc", 0)
    </script>
    </body>
    </html>
    Notes: The script now goes in the head and there are separate calls for each marquee in the body, as shown.
    Last edited by jscheuer1; 02-01-2007 at 09:56 PM. Reason: correct NS4 code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    awesome. thanks

  6. #6
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm trying to get my page to validate, meaning I have to get all the javascript into separate .js file and pass it the four or five variables needed to customize the marquee. I thought I could adapt the above code, but in IE6, it stops running halfway across screen.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by jillo View Post
    I'm trying to get my page to validate, meaning I have to get all the javascript into separate .js file and pass it the four or five variables needed to customize the marquee. I thought I could adapt the above code, but in IE6, it stops running halfway across screen.
    That has nothing to do with it being external. IE has problems centering content that is positioned absolutely. If you use align="center", <center>, or text-align:center for any element containing the marquee, it will cause the absolute content of the marquee to appear to spring from or in some other way be limited by the center of the container.

    The way to center the marquee is use at least a loose transitional DOCTYPE and this for a container:

    HTML Code:
    <div style="width:200px;margin:0 auto;">
    marquee script call here
    </div>
    The 200px should be the actual display width of the marquee. This method will not be successful if you still have any container element around it on the page that uses the centering methods I've mentioned as being problematical. If you need more help, please post a link to your page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    May 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This code is really helpful and I'm trying to incorporate it onto my site. It works fine in firefox but in IE the marquee's display one line from right to left and then reset themselves.

    Would someone (John?!) be able to have a look at the page to see if you could find out why?

    For some reason when I comment out the following code
    HTML Code:
    <table width="828" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr><td colspan="5">
      
     <table width="100%"  border="0" cellspacing="0" cellpadding="0" style="padding: 5px 0 5px 0;">
    which appears directly after the <body> tag the marquee's work (albeit with the page looking messy)

    The link is: http://www.midwivesonline.com/indextest2.php

    I'd apreciate it if anyone could help me out,

    thanks,

    Tim

Bookmarks

Posting Permissions

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