PDA

View Full Version : 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


<!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


<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)


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