Function to move a DIV?

Discussion in 'Javascript' started by laredotornado@zipmail.com, Oct 25, 2006.

  1. Guest

    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, 2006
    #1
    1. Advertising

  2. ASM Guest

    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
     
    ASM, Oct 25, 2006
    #2
    1. Advertising

  3. RobG Guest

    ASM wrote:
    > 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
     
    RobG, Oct 26, 2006
    #3
  4. RobG Guest

    Rik wrote:

    > RobG wrote:
    > > ASM wrote:
    > >> 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
     
    RobG, Oct 26, 2006
    #4
  5. ASM Guest

    RobG a écrit :
    > ASM wrote:
    >> 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
     
    ASM, Oct 26, 2006
    #5
  6. ASM Guest

    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
     
    ASM, Oct 26, 2006
    #6
  7. Mike Guest

    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" <> wrote in message
    news:4540b903$0$25918$...
    > RobG a écrit :
    >> ASM wrote:
    >>> 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
     
    Mike, Oct 26, 2006
    #7
  8. ASM Guest

    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'

    --
    ASM
     
    ASM, Oct 26, 2006
    #8
  9. Mike Guest

    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" <> wrote in message
    news:45410f5d$0$5110$...
    > 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'
    >
    > --
    > ASM
    >
     
    Mike, Oct 27, 2006
    #9
  10. ASM Guest

    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
     
    ASM, Oct 27, 2006
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    809
  2. Eduardo78
    Replies:
    0
    Views:
    278
    Eduardo78
    Nov 3, 2005
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    236
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    359
    Martin Honnen
    Jun 26, 2005
  5. S
    Replies:
    1
    Views:
    115
Loading...

Share This Page