December 29, 1999 - Moving Up DHTML Elements

Yehuda Shiran December 29, 1999
Moving Up DHTML Elements
Tips: December 1999

Yehuda Shiran, Ph.D.
Doc JavaScript

One of the ways to implement a cross-browser vertical movement is to use the top property in Netscape Navigator and the pixelTop property in Internet Explorer. The DOCJSLIB's function docjslib_moveVertically() accepts as parameters the DHTML element id and a pixel increment by which to move it vertically:

function docjslib_moveVertically(id, increment) {
  if (NS4) eval(id).top += increment
  else eval(id).style.pixelTop += increment;
}

Let's see a typical example. The moveUp() function moves up two pages, firstPage and secondPage, and then switches between the pages when the top value of lowerPage becomes negative:

function moveUp() {
    docjslib_moveVertically(firstPage, -Gincrement);
    docjslib_moveVertically(secondPage, -Gincrement);
    if (docjslib_getElementTop(lowerPage) 0) { 
       docjslib_moveVertically(upperPage, docjslib_getElementHeight(upperPage) * 2);
       rotateThePages();
     }
}

Notice that there is not a single check for the browser identification. All browser-dependent stuff is handled by DOCJSLIB. To learn more about DOCJSLIB library and its usage in implementing a scroller, read Column33, DOCJSLIB Version 4.0: Scrollers, Watermarks, and Games.