spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column33


Moving a DHTML Element

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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.

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business


Created: January 4, 1999
Revised: January 4, 1999

URL: http://www.webreference.com/js/column33/move.html