Results 1 to 5 of 5

Thread: Help or Replacement of Marquee Tag

  1. #1
    Join Date
    Jan 2006
    Posts
    164
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Help or Replacement of Marquee Tag

    I'm doing some work for a local non-profit and they've asked me to put together a webpage that has a video clip, and an audio clip with the words to the audio running under the control box. I've put the page together using a marquee tag to scroll the words, and (despite what I've heard) it seems to work fine in all major browsers including Safari.

    Here's my problem: The audio clip has a 20 second musical lead in (before the words actually start). I'd like to delay the start of the marquee accordingly. I've tried a couple of things and they don't seem to work. Can anyone help me out with this?

    BTW, I know using a <marquee> tag is considered a no-no, so if anyone has a javascript routine that will do the same thing, please let me know. I've looked at the Marquee and Marquee II scripts, but they don't really do what I need. The Marquee II script apparently only scrolls up and down and the Marquee script doesn't have a startup delay.

    Here's excerpts from the code:

    Code:
        <head>
        <style type="text/css">
        .html-marquee {height:20px;width:410px;font-family:Times;font-size:14px;color:000000;}
        </style>
        <script src="marque.js"></script>
        </head>
    
        <body>
        :
        :
        :
            <table bgcolor="#6b8ab6" border=5 bordercolor="#2b405b"><tr><td>
              <embed src="ASongOfSpring.mp4" type="video/mp4"  width="400" height="240"></embed>
            </td></tr></table>
              <EMBED src="ASongOfSpring.mp3" AUTOSTART="True" LOOP="true" bgcolor="#FEF4E4" height="16" width="410">
         <br>
         <script>
         document.write('<marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="3">' + lyrics + '</marquee>');
         </script>
        :
        :
        :
        </td></tr></table>
    The .js file contains the text of the audio assigned to the variable "lyrics".

    Thanks.

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    454
    Thanks
    8
    Thanked 44 Times in 42 Posts

    Default

    You should just add this to the marqee:
    Code:
    scrolldelay=20
    Information from: http://www.hscripts.com/tutorials/html/marquee2.php

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,371
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    If I read that correctly, that will only give a 20 millisecond delay between each incremental movement of the marquee, and cannot be used to delay the onset of the marquee without making each subsequent movement take that long as well, and might not affect the initial movement. For 20 seconds it would have to be 20000, not 20.

    It could work out though, if it does effect the initial movement and can be removed or changed after the marquee starts. And if, this is the big one, it works cross browser. Not all of the attributes of the marquee tag do.

    That said, if the tag does what you want, it can be used, and support for it has broadened since its introduction many years ago as what was at first an IE only feature. So you can try:

    Code:
         <script>
         document.write('<marquee id="lyricsmarquee" scrolldelay="20000" class="html-marquee" direction="left" behavior="scroll" scrollamount="3">' + lyrics + '</marquee>');
         setTimeout(function(){document.getElementById('lyricsmarquee').setAttribute('scrolldelay', 0 , 0);}, 19000);
         </script>
    Those red values may need to be played with to get the desired effect. Or you could try using the scrollamount:

    Code:
         <script>
         document.write('<marquee id="lyricsmarquee" class="html-marquee" direction="left" behavior="scroll" scrollamount="0">' + lyrics + '</marquee>');
         setTimeout(function(){document.getElementById('lyricsmarquee').setAttribute('scrollamount', 3 , 0);}, 20000);
         </script>
    That would probably be more straightforward if it works. I cannot predict how cross browser any of the above will be. Or if it will even work at all in any browser.


    The marquee script you mentioned is cross browser and can be delayed. I have a modified version of it that allows for that:

    http://home.comcast.net/~jscheuer1/side/marqueeh.htm

    Use your browser's "View Source" to get the code. Notice this part:

    Code:
    /*
    Cross browser Marquee script-  Dynamic Drive (www.dynamicdrive.com)
    For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
    Modified by jscheuer1 for continuous content. Credit MUST stay intact
    */
    
    //Specify the marquee's width (in pixels)
    var marqueewidth="300px"
    //Specify the marquee's height
    var marqueeheight="25px"
    //Specify the marquee's marquee speed (larger is faster 1-10)
    var marqueespeed=3
    //Specify initial pause before scrolling in milliseconds
    var initPause=0
    //Specify start with Full(1)or Empty(0) Marquee
    var full=0
    //configure background  . . .
    Set that to 20000 and you will have a 20 second delay.
    - John
    ________________________

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

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #m1 {
     position:relative;left:100px;top:100px;width:600px;height:20px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    #m1 DIV {
     position:absolute;left:600px;top:0px;width:700px;height:20px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="m1" onmouseover="zxcMarquee.Pause('m1')" onmouseout="zxcMarquee.Scroll('m1')">
     <div onmouseover="zxcMarquee.Pause('m1')" >Some Text</div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Marquee. (24-September-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcMarquee={
    
     Scroll:function(id,ms){
      var o=this['zxc'+id],oop=this;
      o?o.to=setTimeout(function(){ oop.scroll(o); },ms||500):null;
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      o?clearTimeout(o.to):null;
     },
    
     init:function(o){
      var id=o.ID,ms=o.ScrollDuration,srt=o.AutoStart,r=o.Repeat,m=document.getElementById(id),s=m?m.getElementsByTagName('DIV')[0]:null;
      if (s){
       m.style.overflow='hidden';
       o.a=[s,'left',s.offsetLeft,-s.offsetWidth,s.offsetLeft];
       o.a[5]=o.a[2]-o.a[3];
       o.ms=(typeof(ms)=='number'&&ms>0?ms:10)*1000;
       o.r=typeof(r)=='number'&&r>=0?r*1000+5:false;
       o.id=id;
       this['zxc'+id]=o;
       typeof(srt)=='number'&&srt>0?this.Scroll(id,srt*1000):null;
      }
     },
    
     scroll:function(o,a){
      clearTimeout(o.to);
      this.animate(o,o.a,o.a[4],o.a[3],new Date(),o.ms*Math.abs((o.a[3]-o.a[4])/o.a[5])+10);
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(o.to);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[4]=n;
       a[0].style[a[1]]=a[4]+'px';
      }
      if (ms<mS){
       o.to=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[4]=a[2];
       a[0].style[a[1]]=t+'px';
       o.r?oop.Scroll(o.id,o.r):null;
      }
     }
    
    
    }
    
    zxcMarquee.init({
     ID:'m1',            // the unique ID name of the marquee DIV.             (string)
     ScrollDuration:10,  //(optional) the scroll duration in secconds.         (number, default = 10)
     AutoStart:20,       //(optional) the auto scroll start  delay in seconds. (number, default = no auto start)
     Repeat:false        //(optional) repeat scroll after n seconds.           (number, default = false = no repeat)
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    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/

  5. #5
    Join Date
    Jan 2006
    Posts
    164
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    John.

    It's always nice to work with a genius. Used the scrollamount mod and it works fine ... in all browsers. I'm going to try your marqueeh script, though, just to do away with the tag. Many thanks.


    Vic. Tried your suggestion but couldn't get it to work. Not sure why. Thanks just the same.

Similar Threads

  1. Image Replacement
    By Johnny__Utah in forum JavaScript
    Replies: 0
    Last Post: 04-13-2008, 04:31 PM
  2. <NOBR> replacement in CSS
    By fileserverdirect in forum CSS
    Replies: 1
    Last Post: 11-07-2007, 10:17 PM
  3. Jim's Menu Replacement
    By CHunt in forum JavaScript
    Replies: 5
    Last Post: 09-11-2007, 03:44 PM
  4. String Replacement
    By Titan85 in forum PHP
    Replies: 1
    Last Post: 04-13-2007, 08:23 PM
  5. Table replacement
    By viktor in forum HTML
    Replies: 5
    Last Post: 02-24-2006, 05:04 PM

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
  •