swapping divs -- when divs NOT positioned absolutely..

[maya]

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]

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!!

 

[pr]

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;
}

 

[Thomas 'PointedEars' Lahn]

[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

 

[maya]

[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.h...4/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

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