swapping divs -- when divs NOT positioned absolutely..

Discussion in 'Javascript' started by maya, Nov 14, 2007.

  1. maya

    maya Guest

    hi,

    I need to swap divs.. I know how to do this very well when the divs are
    positioned absolutely and thus they are "on top of" each other with
    z-index, etc...

    but now at work I have to do this w/divs that are not positioned
    absolutely, they use two very large js files here for it (swapTabs.js
    and prototype.js.. in case they sound familiar to anyone..) and every
    time I have a hard time implementing it.. I was wondering if somebody
    has a simpler formula to do this..

    thank you very much...
     
    maya, Nov 14, 2007
    #1
    1. Advertising

  2. maya

    maya Guest

    On Nov 14, 12:25 pm, Michael White <> wrote:
    > maya wrote:
    > > hi,

    >
    > > I need to swapdivs.. I know how to do this very well when thedivsare
    > > positioned absolutely and thus they are "on top of" each other with
    > > z-index, etc...

    >
    > > but now at work I have to do this w/divsthat are not positioned
    > > absolutely, they use two very large js files here for it (swapTabs.js
    > > and prototype.js.. in case they sound familiar to anyone..) and every
    > > time I have a hard time implementing it.. I was wondering if somebody
    > > has a simpler formula to do this..

    >
    > > thank you very much...

    >
    > temp=div1.innerHTML;
    > div1.innerHTML=div2.innerHTML;
    > div2.innerHTML=temp;
    >
    > //or use Elem.cloneNode(), for a purer solution
    > Mick
    >
    > Mick


    oh my gosh, thank you so much!!

    I thought of innerHTML also.. but I haven't used it much.. (used it
    about a year ago when was attempting to learn AJAX.. another
    story....;)

    but I had thought that to use that I had to put all content of div
    (like innerHTML = <content of div>..) in function.. didn't know you
    could do like you said.. I don't quite understand how this works but
    it works!!! :)

    how I organized functions now:

    function getDiv2(id1, id2) {
    var div1 = document.getElementById(id1);
    var div2 = document.getElementById(id2);
    temp=div1.innerHTML;
    div1.innerHTML=div2.innerHTML;
    div2.innerHTML=temp;
    }

    function getDiv1(id1, id2) {
    var div1 = document.getElementById(id1);
    var div2 = document.getElementById(id2);
    temp=div2.innerHTML;
    div2.innerHTML=div1.innerHTML;
    div1.innerHTML=temp;
    }

    I'm sure functions can be consolidated into one, but not sure how to
    do this..
    (not sure how I would do it with Elem.cloneNode() have also never
    used this.. )

    calls:
    <a href="#" onClick="getDiv2('div1','div2');">get div2</
    a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" onClick="getDiv1('div1','div2');">get div1</a>


    thank you very much!!
     
    maya, Nov 15, 2007
    #2
    1. Advertising

  3. maya

    pr Guest

    maya wrote:
    > On Nov 14, 12:25 pm, Michael White <> wrote:
    >> maya wrote:
    >>> hi,
    >>> I need to swapdivs..

    [...]
    >> temp=div1.innerHTML;
    >> div1.innerHTML=div2.innerHTML;
    >> div2.innerHTML=temp;
    >>
    >> //or use Elem.cloneNode(), for a purer solution

    >
    > oh my gosh, thank you so much!!
    >

    [...]
    > how I organized functions now:
    >
    > function getDiv2(id1, id2) {
    > var div1 = document.getElementById(id1);
    > var div2 = document.getElementById(id2);
    > temp=div1.innerHTML;
    > div1.innerHTML=div2.innerHTML;
    > div2.innerHTML=temp;
    > }
    >
    > function getDiv1(id1, id2) {
    > var div1 = document.getElementById(id1);
    > var div2 = document.getElementById(id2);
    > temp=div2.innerHTML;


    *var* temp=...

    > div2.innerHTML=div1.innerHTML;
    > div1.innerHTML=temp;
    > }
    >
    > I'm sure functions can be consolidated into one, but not sure how to
    > do this..


    Call one of them swapDivs() and delete the other. Which way round it
    works depends on the order in which you pass the ids.

    > (not sure how I would do it with Elem.cloneNode() have also never
    > used this.. )


    see below

    >
    > calls:

    [...]
    > <a href="#" onClick="getDiv1('div1','div2');">get div1</a>
    >


    <a href="server_equivalent.php"
    onclick="return swapsDivs('div1', 'div2');">...</a>

    where swapDivs() returns false to prevent the link being followed.

    To do this using standard DOM 2.0 methods you don't actually need
    cloneNode(), but a document fragment:

    function swapDivs(sourceID, destID) {
    var d = document;

    if (d.implementation.hasFeature("Core", "2.0") ||
    /function|object/.test(typeof d.createDocumentFragment)) {

    var src = d.getElementById(sourceID),
    dest = d.getElementById(destID), c,
    f = d.createDocumentFragment();

    if (src && dest) {
    while ((c = dest.firstChild)) {
    f.appendChild(dest.removeChild(c));
    }
    while ((c = src.firstChild)) {
    dest.appendChild(src.removeChild(c));
    }
    src.appendChild(f);
    }
    return false;
    }
    return true;
    }
     
    pr, Nov 16, 2007
    #3
  4. pr wrote:
    > [using innerHTML to "swap DIVs"]
    > To do this using standard DOM 2.0 methods you don't actually need
    > cloneNode(), but a document fragment:


    IBTD. It is far better to hide one element and show another,
    and there would be nothing not-"DOM 2.0" about it.

    > function swapDivs(sourceID, destID) {
    > var d = document;
    >
    > if (d.implementation.hasFeature("Core", "2.0") ||


    That method call and result is known to be unreliable.

    Compare http://www.w3.org/2003/02/06-dom-support.html and
    http://www.w3.org/2004/04/ecmascrip...Tests=true&autoRun=true&contentType=text/html,
    for example.

    > /function|object/.test(typeof d.createDocumentFragment)) {


    d.createDocumentFragment may be `null' in which case it would be typeof
    "object" but could not be called. Therefore, you will have to write

    /function|object/.test(typeof d.createDocumentFragment)
    && d.createDocumentFragment

    Since that test is required often, I have written isMethodType() long ago,
    and posted it here frequently:

    http://PointedEars.de/scripts/types.js


    PointedEars
    --
    "Use any version of Microsoft Frontpage to create your site. (This won't
    prevent people from viewing your source, but no one will want to steal it.)"
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
     
    Thomas 'PointedEars' Lahn, Nov 16, 2007
    #4
  5. maya

    maya Guest

    On Nov 16, 7:38 am, Thomas 'PointedEars' Lahn <>
    wrote:
    > pr wrote:
    > > [using innerHTML to "swapDIVs"]
    > > To do this using standard DOM 2.0 methods you don't actually need
    > > cloneNode(), but a document fragment:

    >
    > IBTD. It is far better to hide one element and show another,
    > and there would be nothing not-"DOM 2.0" about it.
    >
    > > function swapDivs(sourceID, destID) {
    > > var d = document;

    >
    > > if (d.implementation.hasFeature("Core", "2.0") ||

    >
    > That method call and result is known to be unreliable.
    >
    > Comparehttp://www.w3.org/2003/02/06-dom-support.htmlandhttp://www.w3.org/2004/04/ecmascript/jsunit/testRunner.html?testpage=...,
    > for example.
    >
    > > /function|object/.test(typeof d.createDocumentFragment)) {

    >
    > d.createDocumentFragment may be `null' in which case it would be typeof
    > "object" but could not be called. Therefore, you will have to write
    >
    > /function|object/.test(typeof d.createDocumentFragment)
    > && d.createDocumentFragment
    >
    > Since that test is required often, I have written isMethodType() long ago,
    > and posted it here frequently:
    >
    > http://PointedEars.de/scripts/types.js
    >
    > PointedEars
    > --
    > "Use any version of Microsoft Frontpage to create your site. (This won't
    > prevent people from viewing your source, but no one will want to steal it.)"
    > -- from <http://www.vortex-webdesign.com/help/hidesource.htm>




    once again thank you all very much for yr help.. now have it working
    fine here.. http://www.mayacove.com/misc/test_divs3.html

    however, have one more issue.. links to the function-calls are now
    images.. I need to do the usu. rollover thing (onmouseover=this.src..
    etc..) but in addition to that the _roll.jpg img has to be loaded
    when div that goes with it is loaded.. so added to function
    document.<img-tag name>.src.. etc..

    but it conflicts with onMouseOut in function-call.. so it's doing the
    opposite now of what I want it to do.. how do I solve this conflict??

    I have not consolidated functions yet (as suggested by poster 'pr' --
    can't find his post in google interface, can only see in my news
    client, but can't connect to server now...;) need to solve this
    problem first..

    thank you very much...
     
    maya, Nov 16, 2007
    #5
    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. John A Grandy
    Replies:
    3
    Views:
    351
    darrel
    Jun 15, 2004
  2. Guybrush Threepwood
    Replies:
    1
    Views:
    503
    Mitja Trampus
    Dec 14, 2005
  3. Replies:
    13
    Views:
    984
    =?ISO-8859-1?Q?G=E9rard_Talbot?=
    May 5, 2006
  4. jonefer

    Absolutely Positioned controls and tables

    jonefer, Aug 23, 2007, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    733
    jonefer
    Aug 23, 2007
  5. Replies:
    5
    Views:
    155
Loading...

Share This Page