Dynamic Drive© Marquee script optimized for HTML5

**shotdsherrif** · 04-07-2011, 08:20 PM

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:

http://dev.bhglaar.com/

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:

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

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

**vwphillips** · 04-08-2011, 12:07 PM

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>

**shotdsherrif** · 04-11-2011, 09:32 PM

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 ...?

**azoomer** · 04-11-2011, 09:49 PM

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>

**shotdsherrif** · 04-11-2011, 10:29 PM

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.

Thread: Dynamic Drive© Marquee script optimized for HTML5

Thread Tools

Search Thread

Dynamic Drive© Marquee script optimized for HTML5

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

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

Bookmarks

Bookmarks

Posting Permissions