spacer

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

home / experts / javascript / column33


Deriving and Setting a DHTML Element's Coordinates

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

In this page we round up the new functions that you can use to get and set a DHTML element's coordinates. First we show how to get a DHTML element's top and height:

function docjslib_getElementTop(id) {
  if (NS4) return eval(id).top
  else return eval(id).style.pixelTop;
}
function docjslib_getElementHeight(id) {
  if (NS4) return eval(id).clip.height
  else return eval(id).clientHeight;
}

Netscape Navigator and Internet Explorer use similar property names to denote the y coordinate of an element, top and pixelTop, respectively. Finding the element's height is more complicated. In Netscape Navigator, you have to use the height property of the element's clip object. In Internet Explorer, we use the clientHeight property. Setting the element's coordinates and size is very similar between the browsers. The top, left, width, and height are all common to both browsers:

function docjslib_setElementTop(id, elementTop) {
  if (NS4) eval(id).top = elementTop
  else eval(id).style.top = elementTop;
}

function docjslib_setElementLeft(id, elementLeft) {
  if (NS4) eval(id).left = elementLeft
  else eval(id).style.left = elementLeft;
}

function docjslib_setElementWidth(id, elementWidth) {
  if (NS4) eval(id).width = elementWidth
  else eval(id).style.width = elementWidth;
}

function docjslib_setElementHeight(id, elementHeight) {
  if (NS4) eval(id).height = elementHeight
  else eval(id).style.height = elementHeight;
}

The background color properties are different between the browsers. Internet Explorer uses backgroundColor while Netscape Navigator uses bgColor:

function docjslib_setElementBgColor(id, elementColor) {
  if (NS4) eval(id).bgColor = elementColor
  else eval(id).style.backgroundColor = elementColor;
}

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

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

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint


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

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