Member Avatar for flageolet

Hi:

I want to get some movement into some words. The only things I want to change are the layervisibility and the layerposition.

This code below works fine in IE and Opera, but doesn't do anything in Netscape 8 (except when watching in IE view).

How come: thx :)

<html>
<head>
<!--verschuiven tekst-->
<SCRIPT>
function move()
{
  var j = document.getElementById('tekst').style;
  var d = document.getElementById('tekst2').style;
  var a = document.getElementById('tekst3').style;
  if ( j.pixelLeft < 212 ) {j.pixelLeft +=4; d.pixelLeft -=2;}
  if ( j.pixelLeft == 40 ) d.visibility = "visible";
  if ( j.pixelLeft == 68 ) j.visibility = "visible";
  if ( j.pixelLeft == 212 ) {a.visibility = "visible"; clearInterval(intervalvar);}
}
</SCRIPT>
</head>
<body ONLOAD="intervalvar = setInterval('move()',20)"  >
<div id="tekst3" style="position: absolute; top: 50px; left: 264px; visibility: hidden;">
 Art
</div>
<div id="tekst" style="position: absolute; top: 50px; left: 0px; visibility: hidden;">
Jacobus 
</div>
<div id="tekst2" style="position: absolute; top: 50px; left: 270px; visibility: hidden;">
Dustin  
</div>
</body>
</html>
  • 1 Contributor
  • 1 Reply
  • 81 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by flageolet

Dani AI

Generated

This thread shows a classic cross‑browser issue. As discovered, the page worked in IE (and in Netscape 8 when using IE view) because the original script relied on an Internet Explorer–only property. Netscape/Gecko does not implement pixelLeft, so the movement code never ran there.

Fix in two parts: read and write the standard left CSS value, and use a cross‑browser way to get the current computed value. Prefer using a numeric parse of style.left with a getComputedStyle fallback, and avoid passing a string to setInterval (and consider requestAnimationFrame for smoother animation). Example pattern:

function getLeftPx(el) {
  var s = el.style.left;
  if (!s) s = window.getComputedStyle ? getComputedStyle(el, null).left : el.currentStyle.left;
  return parseInt(s, 10) || 0;
}

el.style.left = (getLeftPx(el) + 4) + 'px';

For modern pages, requestAnimationFrame gives better timing and battery/CPU behavior than setInterval (see MDN on requestAnimationFrame). Also ensure elements have an explicit left (for example left: 0px;) so parseInt has something to read. If you need simple fades or movements, consider CSS transitions/transforms instead of manual JS for best performance.

References: window.getComputedStyle (https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle), window.requestAnimationFrame (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).

Member Avatar for flageolet

solved by the belgian Marnix Forum.

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.