Results 1 to 5 of 5

Thread: Dynamic DriveŠ Marquee script optimized for HTML5

  1. #1
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Dynamic DriveŠ Marquee script optimized for HTML5

    Hello,

    I am new to this forum and am more of a PHP developer but I am currently working on project where a Dynamic DriveŠ scrolling marquee script is being used. The script is called:

    Cross browser Marquee script

    ... and honestly, it works very well. Example:


    The trouble is, the script was being used in an XHTML Transitional Page and I am attempting to remake the page using the new HTML5 Doctype.

    When I do ... the script falls below its positioning by about 5 pixels and I can't seem to figure out why. Like this:


    I've tried several methods to reposition it with CSS and none have worked. Yet, if I just change the doctype back to transitional it works fine.

    Since I'm not a javascript expert, I'm wondering if someone can tell me what is going on ... or more generally, point me to a resource that addresses HTML5 migrations in regards to older javascript code ...

    Thank you in advance.

    Maurice

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    this will give greater cotrol of positioning

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #marquee1 {
      position:relative;left:0px;top:-5px;width:975px;background-Color:#33CCFF;
    }
    
    #marquee2 {
      position:relative;left:0px;top:50px;width:975px;background-Color:#33CCFF;
    }
    /*]]>*/
    </style></head>
    
    <body>
    <img src="http://dev.bhglaar.com/images/new_bhglaar_header.gif" alt="header"  width="975" height="103" border="0" alt=""/>
    <div id="marquee1" onmouseover="S1.Speed=0;" onmouseout="S1.Speed=-2;" >
     <span><nobr><font face="Arial" font-weight="bold" font-style="normal" font-size="14px" color="white"><b>&nbsp;SANTA MONICA&nbsp; / &nbsp;CULVER CITY&nbsp; / &nbsp;BEVERLY HILLS&nbsp; / &nbsp;WEST HOLLYWOOD&nbsp; /  &nbsp;LOS ANGELES&nbsp; / &nbsp;BEL AIR&nbsp; / &nbsp;HOLLYWOOD&nbsp; / &nbsp;LOS FELIZ&nbsp; / &nbsp;MARINA DEL REY&nbsp; / &nbsp;BRENTWOOD&nbsp; / &nbsp;PACIFIC PALISADES&nbsp; / &nbsp;WESTWOOD&nbsp; / &nbsp;SILVERLAKE&nbsp; / &nbsp;VENICE&nbsp; / &nbsp;WEST LOS ANGELES&nbsp; /</b></font></nobr></span>
    </div>
    <div id="marquee2" onmouseover="S2.Speed=0;" onmouseout="S2.Speed=2;" >
     <span><nobr><font face="Arial" font-weight="bold" font-style="normal" font-size="14px" color="white"><b>&nbsp;SANTA MONICA&nbsp; / &nbsp;CULVER CITY&nbsp; / &nbsp;BEVERLY HILLS&nbsp; / &nbsp;WEST HOLLYWOOD&nbsp; /  &nbsp;LOS ANGELES&nbsp; / &nbsp;BEL AIR&nbsp; / &nbsp;HOLLYWOOD&nbsp; / &nbsp;LOS FELIZ&nbsp; / &nbsp;MARINA DEL REY&nbsp; / &nbsp;BRENTWOOD&nbsp; / &nbsp;PACIFIC PALISADES&nbsp; / &nbsp;WESTWOOD&nbsp; / &nbsp;SILVERLAKE&nbsp; / &nbsp;VENICE&nbsp; / &nbsp;WEST LOS ANGELES&nbsp; /</b></font></nobr></span>
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function TextMarquee(o){
     var oop=this,obj=document.getElementById(o.ID),w=obj.offsetWidth,slide=obj.getElementsByTagName('*')[0],ssz=slide.offsetWidth,slider=document.createElement('DIV');
     slider.style.position='relative';
     slider.style.left=-ssz+'px';
     slider.style.top='0px';
     slider.style.width=ssz*4+'px';
     obj.appendChild(slider);
     slider.appendChild(slide);
     slider.appendChild(slide.cloneNode(true));
     slider.appendChild(slide.cloneNode(true));
     this.slider=slider;
     this.ssz=ssz;
     this.lft=-ssz;
     this.Speed=o.Speed;
     setInterval(function(){ oop.rotate(); },50);
    }
    
    TextMarquee.prototype={
    
     rotate:function(){
      var spd=this.Speed,lft=this.lft+=spd,ssz=this.ssz;
      this.slider.style.left=lft+'px';
      if ((spd<0&&lft<-ssz)||(spd>0&&lft>-ssz)){
       lft+=ssz*(spd<0?1:-1);
      }
      this.lft=lft;
     }
    
    }
    
    var S1=new TextMarquee({
     ID:'marquee1',
     Speed:-2
    });
    
    var S2=new TextMarquee({
     ID:'marquee2',
     Speed:2
    });
    /*]]>*/
    </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/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    shotdsherrif (04-11-2011)

  4. #3
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    This was very useful. Thank you.

    Though, I made a couple of changes to make the code fit into my framework:
    1) moved the inline style to the actual index.php file - because this header is just an html snippet in my view/ folder
    2) Also removed the of the <head> and <body> tags for the same reason as above.

    The result was worked except for the marquee is moving ALL the way across the page, not just within the 975px width. Also, the width of the element shrunk to contain only the text, not the 25px it was set to.

    http://dev.bhglaar.com/index.php

    I imagine this has something to with how the scripts and style are called within the DOM, but like I had said before, this stuff is still somewhat new to me.

    Any chance you can explain what happened or didn't happen here ...?

  5. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Just playing with it in firebug and adding overflow:hidden seem to work
    Code:
    <style type="text/css">/*<![CDATA[*/
       #marquee1 {position:relative;left:0px;top:-5px;width:975px;background-Color:#4D6A8D;overflow:hidden;}
     /*]]>*/</style>
    edit: if you add some padding it looks better (imho)
    Code:
    <style type="text/css">/*<![CDATA[*/
       #marquee1 {position:relative;left:0px;top:-5px;width:975px;background-Color:#4D6A8D;overflow:hidden;padding-top:7px;padding-bottom:7px;}
     /*]]>*/</style>
    Last edited by azoomer; 04-11-2011 at 10:06 PM.

  6. The Following User Says Thank You to azoomer For This Useful Post:

    shotdsherrif (04-11-2011)

  7. #5
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Yep, that looks great. Thank you. I really appreciate it.

    I was able to move both the inline style and script to external files and it still worked great.

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
  •