swapping divs -- when divs NOT positioned absolutely..
maya
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...
Michael White
temp=div1.innerHTML;
div1.innerHTML=div2.innerHTML;
div2.innerHTML=temp;
//or use Elem.cloneNode(), for a purer solution
Mick
Mick
maya
> > positioned absolutely and thus they are "on top of" each other with
> > z-index, etc...
>
> > 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>
<a href="#" onClick="getDiv1('div1','div2');">get div1</a>
thank you very much!!
pr
> On Nov 14, 12:25 pm, Michael White <m...@mickweb.com> 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
>
>
> 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/ecmascript/jsunit/testRunner.html?testpage=http://www.w3.org/2004/04/ecmascript/level2/core/alltests.html&implementation=iframe&skipIncompatibleTests=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>
maya
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.
>
> 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...