Help or Replacement of Marquee Tag

**Jim Weinberg** · 09-24-2013, 12:41 PM

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.

**Deadweight** · 09-24-2013, 01:48 PM

You should just add this to the marqee:

Code:

scrolldelay=20

Information from: http://www.hscripts.com/tutorials/html/marquee2.php

**jscheuer1** · 09-24-2013, 03:14 PM

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.

**vwphillips** · 09-24-2013, 03:47 PM

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>

**Jim Weinberg** · 09-24-2013, 07:50 PM

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.

Thread: Help or Replacement of Marquee Tag

Thread Tools

Search Thread

Help or Replacement of Marquee Tag

Similar Threads

Image Replacement

<NOBR> replacement in CSS

Jim's Menu Replacement

String Replacement

Table replacement

Bookmarks

Bookmarks

Posting Permissions