DOCJSLIB Version 4.0: How to move a DHTML Element - www.docjavascript.com

Moving a DHTML Element

In order to make DOCJSLIB as cross-browser as possible, we have reverted our vertical movement algorithm to use the top property instead of the moveBy() one that we used in our previous column. In Internet Explorer we keep using the pixelTop property:

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

With this streamlining, our HTML Scroller from the previous column is much more compact. Let's take, for example, the section that moves the pages around. The moveUp() function moves up both pages and then switches between the pages when the lower one becomes negative:

function moveUp() {
    docjslib_moveVertically(firstPage, -Gincrement);
    docjslib_moveVertically(secondPage, -Gincrement);
    if (docjslib_getElementTop(lowerPage) <= 0) {
       docjslib_moveVertically(upperPage,
         docjslib_getElementHeight(upperPage) * 2);
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
       rotateThePages();
     }
}

Notice that there is not a single check for the browser identification. All browser-dependent stuff is handled by DOCJSLIB. The algorithm for rotating the pages is explained in detail in our previous column. Just as a reminder, when the lower page becomes negative, the upper page is moved down by two page heights and the designation of upperPage and lowerPage switches.