Member Avatar for Ann Drew

Hello,
I have got a problem.

In my forum software the DOCTYPE is for some reason set to XHTML

Now I have implemented a scroller using setInterval. This scroller works fine if there is no DOCTYPE specified or even if I specify it as HTML 4.01

The scroller does not work if the Doctype is XHTML.

Is there any reason for that? Why is that so? Which script do I have to use to make 'setInterval' work as it is supposed to?

here the script:
try it out under:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
or under:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script language='JavaScript' type='text/javascript'>
bb = 0;
function test()
{
aa = document.body.scrollTop + 17;
//cc = window.event.x ;
bb -= aa;
bb *= 0.8;
bb += aa;

name1.style.top = bb+9;
}
setInterval("test()",20);
</script>

'name1' is the name of a <DIV> tag I am using for an image.


Any ideas, suggestions?

  • 2 Contributors
  • 1 Reply
  • 271 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

Quick diagnosis for : an XHTML DOCTYPE usually forces browsers into standards mode and that changes a few behaviors your script accidentally relies on. Typical causes for a scroller working in quirks/HTML4 but failing under XHTML are: implicit global element references no longer being created, reading the wrong scroll property, assigning style values without units, and inline script rules when the page is served as XML (application/xhtml+xml).

Try this checklist first:

  • Select the DIV explicitly (give it an id and use document.getElementById) instead of relying on a bare global name.
  • Declare your variables (var / let) so aa/bb are not accidental globals.
  • Read scroll position with a cross-browser fallback: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop.
  • Always include units when setting CSS values: e.g. set style.top = (value) + "px".
  • Prefer passing a function to the timer (setInterval(fn, 20)) or, for smoother modern animation, use requestAnimationFrame.
  • If the page is actually served as application/xhtml+xml, inline scripts must follow XML rules (use external scripts or wrap carefully), and some older browsers behave differently.

A compact, modern replacement pattern (does not repeat your original code) to make the motion robust:

var el = document.getElementById('name1');
var bb = 0;

function tick(){
  var st = window.pageYOffset !== undefined
    ? window.pageYOffset
    : (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop || 0;
  var aa = st + 17;
  bb = (bb - aa) * 0.8 + aa;
  el.style.top = (bb + 9) + 'px';
  requestAnimationFrame(tick);
}

requestAnimationFrame(tick);

Follow ’s validation advice and also verify the server Content-Type. Fixing the element lookup, units, scroll fallback and variable declarations will resolve almost all XHTML-related failures.

Member Avatar for tgreer

The DOCTYPE declaration informs the browser which particular "code flavor" your page uses. You can read about DOCTYPE's here:

http://htmlhelp.com/tools/validator/doctype.html

If you don't specify a DOCTYPE, the the browser will use it's defaults. In some cases, with IE for example, this means that you can get away with code that isn't strictly "correct". IE won't complain.

XHTML is very strict, intentionally. I prefer it because it forces me to write clean, tight code.

I don't see anything about your script that XHTML wouldn't like, at first glance. So there is probably something else on the page that isn't XHTML-friendly. You can use the following validator to troubleshoot your page:

http://validator.w3.org/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.