Get and set position and size of html nodes

Benjamin Kalytta

Hi there,

How do I get and set position and size of a html node (certain elements)?

Following will not work for non absolute elements:

document.defaul tView.getComput edStyle(element ,null).getPrope rtyValue("left" )
/ getPropertyValu e("width") ...

It will return "auto" in certain circumstances.

Using offsetLeft / offsetWidth to get the size and position seems also
not to be the best since values sometimes seems to be incorrect. Setting
control width to offsetWidth will causes the control to get larger than
before.

What is the best way to do this?

Is there any open source javascript "library" (js file) for this purpose?

yours
Benjamin

Apr 23 '07 #1

Subscribe Reply

12921

RobG

On Apr 23, 11:41 am, Benjamin Kalytta <bkau...@web.de wrote:

Hi there,

How do I get and set position and size of a html node (certain elements)?

Following will not work for non absolute elements:

document.defaul tView.getComput edStyle(element ,null).getPrope rtyValue("left" )
/ getPropertyValu e("width") ...

It will return "auto" in certain circumstances.

Using offsetLeft / offsetWidth to get the size and position seems also
not to be the best since values sometimes seems to be incorrect. Setting
control width to offsetWidth will causes the control to get larger than
before.

What is the best way to do this?

Is there any open source javascript "library" (js file) for this purpose?

Have a look at Matt Kruse's position library in his Javascript
Toolbox:

<URL: http://www.javascripttoolbox.com/lib...tion/index.php >
--
Rob

Apr 23 '07 #2

Peter Michaux

On Apr 22, 7:53 pm, RobG <r...@iinet.net .auwrote:

On Apr 23, 11:41 am, Benjamin Kalytta <bkau...@web.de wrote:

Hi there,

How do I get and set position and size of a html node (certain elements)?

Following will not work for non absolute elements:

document.defaul tView.getComput edStyle(element ,null).getPrope rtyValue("left" )
/ getPropertyValu e("width") ...

It will return "auto" in certain circumstances.

Using offsetLeft / offsetWidth to get the size and position seems also
not to be the best since values sometimes seems to be incorrect. Setting
control width to offsetWidth will causes the control to get larger than
before.

What is the best way to do this?

Is there any open source javascript "library" (js file) for this purpose?

Have a look at Matt Kruse's position library in his Javascript
Toolbox:

<URL:http://www.javascriptt oolbox.com/lib/objectposition/index.php>

Matt's is a good one for position reporting when the page is simple.
My tests showed it doesn't work in all combinations of nested elements
where some of the elements are scrolling, tables, frames, and other
oddities in a wide range of browsers (IE6, O8, S2, FF1.5, I believe).
I haven't seen a library that can do it all. Richard Cornford probably
has some of the most complete knowledge in this area and contests
repeatedly that such a library would be huge.

Peter

Apr 23 '07 #3

Similar topics

2628

xsl: grouping radiobuttons by name; name should be position of parent node

by: discomiller | last post by:

Mario Mueller: Hello *, radiobuttons belong to other radiobuttons by the "name="any_value"" attribut. Thats a fakt. I got the following XML: **************************************************************

.NET Framework

5304

resize the browser and change the CSS position settings

by: Matt | last post by:

When the user resize the browser, the "Frequently Used Link" and "Table 1" and "Table 2" will shift to the left hand side, but table position is unchanged. I really have no idea how to fix that. I don't know what's the correct approach, I just try in different figures manually. Please advise. Thanks!! --------------------- test.html ------------------------------

HTML / CSS

2333

return character position on page?

by: jen_designs | last post by:

Is there a way to return the character position on a page? Not the x and y coordinates, but the number of characters on a page. For instance i have a html page with the following text: This is my string. Then character postion for m would be 9. Any thoughts?

Javascript

7989

I thought it was "impossible" to precisely dictate image position with html commands?

by: Doc | last post by:

I've read in a couple of different places including the archives of this forum that html doesn't allow you to precisely dictate the position of an image, but I found this command (again in the archives of this forum) that apparently allows you to do exactly that. <img src="whateveryourfilelocationis" style="position:absolute; left:Xpx; top:Xpx"> What do you call this command? The responder of the particular message where I found it...

HTML / CSS

2949

can i control the literal position?

by: dale zhang | last post by:

Hi, I have a web form page. it has gridlayout and a table at top like a template. When I have the literal or requiredfieldvalidator ErrorMsg displayed, they are all over the page. Is there any way to control their locations? Thanks. -dale PS: The html code is below:

C# / C Sharp

14202

Finding my position in a Treeview

by: meh | last post by:

I can figure out the total number of nodes in a given tree but what I'd like to know is what is the Selected Nodes relationship to the entire tree i.e This is node n out of nnn nodes. In most of my database apps its common place to tell the user that they are working on record x of xxx records I'm trying to provide the same functionality using the tree control. TIA meh

Visual Basic .NET

3362

How to make text boxes keep their relative position as text is added to them?

by: Edward | last post by:

I used to do this all the time in HTML-table layouting. How do I do this in CSS? -------------------------------------------------- <table width="400px"> <tr> <td bgcolor="beige">one line of text</td> </tr> <tr> <td bgcolor="#eeeeee" align="center">this is another line of text</td>

HTML / CSS

5942

Iframes and Mouse Position

by: wmanzo | last post by:

I have a really professional conspiracy movie site and I use tons of layers and an external scroll bar assembly. I would like to put the various sections into MS Iframes and in order to clean up the page but I find that the iframes interfere with the getting the mouse coords from the screen which is essential in moving the scroll bar around. My test html is given below. With the iframe hidden the mouse coords are obtainable. With the...

Javascript

5758

Background position inccorect in IE 7 or AOL

by: VividWeb | last post by:

Hi. I am relatively new to CSS and HTML but have a basic understanding of most things. One of my backgrounds is not positioning correctly in IE 7 or AOL. The background behind the content (small chocolate area) is positioning slightly down the page instead of at the top. I have used the same techniques in the navigation and it positions fine. Its fine in Fire Fox Opera & Safari. I have run my HTML & CSS through W3c and all is clean. ...

HTML / CSS

9587

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10211

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9993

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8870

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

5298

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5447

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3958

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3561

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2815

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General