Solved

Script working in IE6/7, not in FF or Safari.

Posted on 2006-10-31
5
338 Views
Last Modified: 2008-02-01
SCRIPT (text scroller):

<script type="text/javascript">
<!--
var w, s, d, id, up, lo, ow, oh;

function start(sp, di, container, marq) {
  w = document.getElementById(container).offsetWidth; // marquee width
  up = document.getElementById(container).offsetWidth; // upper boundary
  lo = document.getElementById(marq).offsetLeft; // lower boundary
  s = sp; // speed
  d = di; // direction 0=left, 1=right
  id = marq; // marquee id
  ow = document.body.clientWidth;
  oh = document.body.clientHeight;
  go(s);
  }

var tmr;
function go(s){
  tmr=setTimeout("go(s);",s);
  document.getElementById(id).style.left = w;
  //if(document.body.clientWidth != ow || document.body.clientHeight != oh) location.reload();
  if(d == 0) { // direction=left
      w--;
      w==lo - document.getElementById(id).offsetWidth ? w=up : null;
      } else {   // direction=right
      w++;
      w >=up ? w=lo - document.getElementById(id).offsetWidth : null;
      }
  }
//-->
</script>


CSS:

#ticker {
      position: relative;
      height: 16px;
      overflow: hidden;
      background: #efe;
      border: ridge 2px #666666;
      background-color: #1C1C1C;
      width:796px;
      color:#FFFFFF;
      padding:0px;
      font-weight:bold;
      clear:both;
}
#tickertext {
      position: absolute;
      left:0px;
}


CODE:

<div id="ticker" onmouseover="clearTimeout(tmr)" onmouseout="go(s)"><span id="tickertext">
      <nobr>
 
      THIS IS THE HEADER STRING THAT SHOULD SCROLL..........
      
      </nobr></span>
</div>
<script>start(5, 0, 'ticker', 'tickertext')</script>
0
Comment
Question by:Oneiroid
  • 3
  • 2
5 Comments
 
LVL 30

Expert Comment

by:callrs
ID: 17846981
I tried it & it works OK in FF but not in IE (IE cuts off the bottom part of the text).

Which part doesn't seem to work in FF?
0
 
LVL 4

Author Comment

by:Oneiroid
ID: 17847018
It doesn't scroll. Maybe it is the context I have it in? Check the source?

See http://www.mastersfx.com/

Works in IE6/7, not in FF or Safari.
0
 
LVL 4

Author Comment

by:Oneiroid
ID: 17847249
It seems to have something to do with the doctype. When I change it to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">, the scroll works in FF, but the rest of the site gets mucked up.

Do you suggest anything?
0
 
LVL 30

Accepted Solution

by:
callrs earned 500 total points
ID: 17847507
Transitional and default doctypes seem forgiving of leaving out the "px", but not the strict doctype. So change
  document.getElementById(id).style.left = w;
to
  document.getElementById(id).style.left = w+"px";

So now these should work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

---
http://www.topxml.com/css/css_pseudo_class_left.asp  CSS left property
http://www.htmlhelp.com/tools/validator/doctype.html   Choosing a DOCTYPE



0
 
LVL 4

Author Comment

by:Oneiroid
ID: 17847625
Brilliant, that was right on the money! Thank you!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now