Function to move a DIV?

[laredotornado]

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

 

[ASM]

(e-mail address removed) 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);
}

 

[RobG]

(e-mail address removed) a écrit :

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).

 

[RobG]

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.

 

[ASM]

RobG a écrit :

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]

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.

 

[Mike]

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 <head> section). In that CSS the hidden
DIV's have display: none.
Is there something going on with IE that I don't understand?
Mike

 

[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.visibility='hidden';
truc.document.getElementById('footer').style.display='none';
truc.document.getElementById('middle').style.position='relative';
truc.document.getElementById('middle').style.top=0;
truc.document.getElementById('middle').style.left=0;
truc.document.getElementById('middle').style.marginTop=0;
truc.document.getElementById('middle').style.marginLeft=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'

 

[Mike]

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]

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