Basic question about positioning DOM elements with JavaScript

Question

Hello everybody.

I recently started to learn JavaScript and how to manipulate DOM elements. So far it been great and I really enjoying the learning.

However, there is something that i am having a hard time to grasp. It is positioning elements with the JavaScript. All the offsets, clientsX(Y) and others just confusing me. And it is frustrating me, because I know HTML and css on very decent level, and i would like to learn and have control over JavaScript positioning as well.

Before writing this question here, I made very extensive search on Google and red somewhere between 20-30 examples (no joking here).

What I would like to get as answers is links to some articles over internet where concept of positioning elements with JavaScript explained in normal language.

I wrote here because I am really got frustrated with my inability to understand it on my own.

Thanks in advance.

Answer 1

This email may be helpful. I don't know if you came across it on google or not. It starts out talking about position with CSS but if you read your way down you'll see the JavaScript.

Hope this helps ;-)

Answer 2

The simpliest way to position a dom element on the page through javascript is manipulating the inline style of the element.

For instance, say I want to move a div to a spot 20px down from the top, and 100px to the left using javascript you just do this.

var myDiv = document.getElementById('myDiv');
myDiv.style.position = 'absolute';
myDiv.style.top = '20px';
myDiv.style.left = '100px';

That should move it to 100,20 on your browser window. All the css rules apply here, so this will work to your existing knowledge of CSS.

Most javascript frameworks support this basic functionality, YUI has a particularily useful DOM object for this. JQuery probably does as well, but since I am not an expert in JQuery, i will direct you to YUI's Dom object.

http://developer.yahoo.com/yui/examples/dom/index.html