We help IT Professionals succeed at work.

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

Oneiroid
Oneiroid asked
on
Medium Priority
359 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>
Comment
Watch Question

Awarded 2006
Top Expert 2006

Commented:
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?

Author

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

Author

Commented:
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?
Awarded 2006
Top Expert 2006
Commented:
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



Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Brilliant, that was right on the money! Thank you!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.