469,286 Members | 2,522 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,286 developers. It's quick & easy.

Function to move a DIV?

Hi,

Does anyone have a cross-browser function that given an id of a DIV
element, can move the DIV to an absolute x,y position on the screen?

Thanks, - Dave

Oct 25 '06 #1
10 2914
ASM
la***********@zipmail.com a écrit :
Does anyone have a cross-browser function that given an id of a DIV
element, can move the DIV to an absolute x,y position on the screen?
Not on the screen, but in the window :

function moveDiv(id,x,y) {
id = document.getElementById(id);
id.style.position = 'absolute';
id.style.top = y+'px';
id.style.left = x+'px';
document.body.appendChild(id);
}

--
ASM
Oct 25 '06 #2

ASM wrote:
la***********@zipmail.com a écrit :
Does anyone have a cross-browser function that given an id of a DIV
element, can move the DIV to an absolute x,y position on the screen?

Not on the screen, but in the window :

function moveDiv(id,x,y) {
id = document.getElementById(id);
id.style.position = 'absolute';
id.style.top = y+'px';
id.style.left = x+'px';
document.body.appendChild(id);
The last line is unnecessary unless the OP has a reason to remove the
element from its current position in the DOM tree and place it the last
child of the body element. I can't see any benefit in that, it has the
detraction of making it more difficult to return the element to its
original position (though that hasn't been stated as a requirement).
--
Rob

Oct 26 '06 #3
Rik
RobG wrote:
ASM wrote:
>la***********@zipmail.com a écrit :
>>Does anyone have a cross-browser function that given an id of a DIV
element, can move the DIV to an absolute x,y position on the screen?

Not on the screen, but in the window :

function moveDiv(id,x,y) {
id = document.getElementById(id);
id.style.position = 'absolute';
id.style.top = y+'px';
id.style.left = x+'px';
document.body.appendChild(id);

The last line is unnecessary unless the OP has a reason to remove the
element from its current position in the DOM tree and place it the
last child of the body element. I can't see any benefit in that, it
has the detraction of making it more difficult to return the element
to its original position (though that hasn't been stated as a
requirement).
Well, the OP sais 'on the screen', and I think ASM correctly changed that
to 'in the window', as it is not really possible to leave the browser
window. There could be several parent elements for that div, that have
either position absolute or relative, which will affect the positioning for
the div itself. It will be relative to them, not to the window. By making
sure it's a direct child from the body it will be positioned on the
position the OP probably wants.
--
Rik Wasmus
Oct 26 '06 #4

Rik wrote:
RobG wrote:
ASM wrote:
la***********@zipmail.com a écrit :
Does anyone have a cross-browser function that given an id of a DIV
element, can move the DIV to an absolute x,y position on the screen?

Not on the screen, but in the window :

function moveDiv(id,x,y) {
id = document.getElementById(id);
id.style.position = 'absolute';
id.style.top = y+'px';
id.style.left = x+'px';
document.body.appendChild(id);
The last line is unnecessary unless the OP has a reason to remove the
element from its current position in the DOM tree and place it the
last child of the body element. I can't see any benefit in that, it
has the detraction of making it more difficult to return the element
to its original position (though that hasn't been stated as a
requirement).

Well, the OP sais 'on the screen', and I think ASM correctly changed that
to 'in the window', as it is not really possible to leave the browser
window.
I have no problem with that.
There could be several parent elements for that div, that have
either position absolute or relative, which will affect the positioning for
the div itself. It will be relative to them, not to the window. By making
sure it's a direct child from the body it will be positioned on the
position the OP probably wants.
As I said: "unless the OP has a reason to remove the element from its
current position in the DOM tree". Further discussion regarding style
should be conducted in comp.infosystems.www.authoring.stylesheets.

--
Rob

Oct 26 '06 #5
ASM
RobG a écrit :
ASM wrote:
>la***********@zipmail.com a écrit :
>>Does anyone have a cross-browser function that given an id of a DIV
element, can move the DIV to an absolute x,y position on the screen?
Not on the screen, but in the window :

function moveDiv(id,x,y) {
id = document.getElementById(id);
id.style.position = 'absolute';
id.style.top = y+'px';
id.style.left = x+'px';
document.body.appendChild(id);

The last line is unnecessary unless the OP has a reason to remove the
element from its current position in the DOM tree and place it the last
child of the body element.
The goal, it I did right understand, is to place the div in absolute in
*front view*.
The easiest way to get this feature is to place it in last position in
document, automatically that gives to it the highest z-index.

(I do not know if there is another absolute div at this position
declared farther in the html code)
detraction of making it more difficult to return the element to its
original position (though that hasn't been stated as a requirement).
Continuation(suite) in the next serial :-)

--
ASM
Oct 26 '06 #6
ASM
RobG a écrit :
As I said: "unless the OP has a reason to remove the element from its
current position in the DOM tree". Further discussion regarding style
should be conducted in comp.infosystems.www.authoring.stylesheets.
N'importe quoi !

You can't serial interactions this way :-(
To want to act on dom/html structure for resulting appearance at screen
without managing css means nothing.

--
ASM
Oct 26 '06 #7
Hi,
Just for the heck of it, I tried out this code, and it does not work for my
situation on IE6. Works OK on FF and Opera.
Here's the scenario:
3 absolutely positioned DIV's that simulate a framed page:
1: A nonscrolling #header
2. A scrolling #middle with overflow:auto
3. A nonscrolling #footer
When this type of page is viewed as a "popup" from another page, I only want
the middle to be visible.
So, in the onload code, I sense if parent!=self and set
header.style.display='none' and footer.style.display='none' .
Now this is ALL I have to do in FF and Opera, i.e., the middle is reflowed
so that it appears at the top and occupies the entire popup.
With IE, the top and bottom DIV's are not displayed, but their whitespace is
still viewable (acts as if visibility='hidden' vs. display='none')
So I attempted to use your moveDiv function to translate the middle DIV to
the top-left corner of the popup.
Didn't work
The only way I can get the desired effect is by using an alternate style
sheet for the popup situation (uses 'document.write's for the conditional
links to the different CSS's in the <headsection). In that CSS the hidden
DIV's have display: none.
Is there something going on with IE that I don't understand?
Mike
"ASM" <st*********************@wanadoo.fr.invalidwrote in message
news:45***********************@news.orange.fr...
RobG a écrit :
>ASM wrote:
>>la***********@zipmail.com a écrit :
Does anyone have a cross-browser function that given an id of a DIV
element, can move the DIV to an absolute x,y position on the screen?
Not on the screen, but in the window :

function moveDiv(id,x,y) {
id = document.getElementById(id);
id.style.position = 'absolute';
id.style.top = y+'px';
id.style.left = x+'px';
document.body.appendChild(id);

The last line is unnecessary unless the OP has a reason to remove the
element from its current position in the DOM tree and place it the last
child of the body element.

The goal, it I did right understand, is to place the div in absolute in
*front view*.
The easiest way to get this feature is to place it in last position in
document, automatically that gives to it the highest z-index.

(I do not know if there is another absolute div at this position declared
farther in the html code)
>detraction of making it more difficult to return the element to its
original position (though that hasn't been stated as a requirement).

Continuation(suite) in the next serial :-)

--
ASM

Oct 26 '06 #8
ASM
Mike a écrit :
Hi,
Just for the heck of it, I tried out this code, and it does not work for my
situation on IE6. Works OK on FF and Opera.
so for your popup you just need :

truc = false;
function pop() {
if(!truc || truc.closed)
truc= window.open('','','width=700,height=500,resizable= 1');
truc.onload = function() {
truc.document.getElementById('header').style.visib ility='hidden';
truc.document.getElementById('footer').style.displ ay='none';
truc.document.getElementById('middle').style.posit ion='relative';
truc.document.getElementById('middle').style.top=0 ;
truc.document.getElementById('middle').style.left= 0;
truc.document.getElementById('middle').style.margi nTop=0;
truc.document.getElementById('middle').style.margi nLeft=0;
}
truc.location = self.location;
truc.focus();
}
So I attempted to use your moveDiv function to translate the middle DIV to
the top-left corner of the popup.
Didn't work
You also can try to *delete* div 'header'

var H = truc.document.getElementById('header');
while(H.firstChild) H.remove(H.firstChild);

then to position 'middle' in relative with margin to 0

and, of course delete 'footer'

--
ASM

Oct 26 '06 #9
Thanks for your help.
The "problem" was that IE was retaining initial style values (borderTop and
borderBottom) while the other browsers apparently didn't or reset them.
Soon as set those to zero, the other settings took effect.
Almost seems "cleaner" to use an alternate style sheet than twiddling around
with properties.
Mike

"ASM" <st*********************@wanadoo.fr.invalidwrote in message
news:45**********************@news.orange.fr...
Mike a écrit :
>Hi,
Just for the heck of it, I tried out this code, and it does not work for
my situation on IE6. Works OK on FF and Opera.

so for your popup you just need :

truc = false;
function pop() {
if(!truc || truc.closed)
truc= window.open('','','width=700,height=500,resizable= 1');
truc.onload = function() {
truc.document.getElementById('header').style.visib ility='hidden';
truc.document.getElementById('footer').style.displ ay='none';
truc.document.getElementById('middle').style.posit ion='relative';
truc.document.getElementById('middle').style.top=0 ;
truc.document.getElementById('middle').style.left= 0;
truc.document.getElementById('middle').style.margi nTop=0;
truc.document.getElementById('middle').style.margi nLeft=0;
}
truc.location = self.location;
truc.focus();
}
>So I attempted to use your moveDiv function to translate the middle DIV
to the top-left corner of the popup.
Didn't work

You also can try to *delete* div 'header'

var H = truc.document.getElementById('header');
while(H.firstChild) H.remove(H.firstChild);

then to position 'middle' in relative with margin to 0

and, of course delete 'footer'

--
ASM

Oct 27 '06 #10
ASM
Mike a écrit :
Thanks for your help.
The "problem"
The problem is : never enough infos
It's always better to have a page in line to see exactly all what you have.
From this point it is possible to give a real lighted help.
Almost seems "cleaner" to use an alternate style sheet than twiddling around
with properties.
or a class to

Oct 27 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Dooza | last post: by
3 posts views Thread by dibblm | last post: by
4 posts views Thread by VBTricks.de.vu Webmaster | last post: by
6 posts views Thread by hharry | last post: by
83 posts views Thread by Anonymous | last post: by
5 posts views Thread by john_woo | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.