Solved

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

Posted on 2006-10-31
5
339 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript Case Expression 7 29
execute script based on HTML event 7 23
Checking data with javascript 3 19
Index on a Table 6 11
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

776 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