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
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

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.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

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

Whitepapers and eBooks

Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Microsoft PDF: Top 10 Reasons to Move to Server Virtualization with Hyper-V
Microsoft PDF: Six Reasons Why Microsoft's Hyper-V Will Overtake Vmware
Microsoft Step-by-Step Guide: Hyper-V and Failover Clustering
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Microsoft PDF: Top 11 Reasons to Upgrade to Windows Server 2008
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
  PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
HP eBook: Guide to Storage Networking
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Crucial Triples Up With New Three-Channel DDR3 Kits · Meet the Finalists: Excellence in Technology Awards · Tealeaf Offers Insight to Mobile Customer Behavior


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

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