www.webdeveloper.com
Results 1 to 3 of 3

Thread: Marquee start delay

  1. #1
    Join Date
    May 2007
    Posts
    37

    Marquee start delay

    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 to scroll the words, and (despite what I've heard) it seems to work fine in all major browsers.

    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.

    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 2007
    Location
    localhost
    Posts
    2,501
    You have asked a javascript question and not provided your javascript.

    If you want a delay time before your text starts then you need to look at a setTimeout event timer to run for 20 seconds before the marquee script is started.

    Appart from that, without any javascript, its going to be hard to tell you how to implement it, you have a number of logistical issues that could foul up the works and the biggest one is the persons bandwidth, you have no idea if the audio is buffering or not...
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    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/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles