Solved

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

Posted on 2006-10-31
5
343 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Slush on text 2 27
sort Multi-dimensional array 6 45
Google Chrome: Debugging AJAX call 6 38
Global version website variable for clearing cache 10 30
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

738 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