Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > swapping divs -- when divs NOT positioned absolutely..

Reply
Thread Tools

swapping divs -- when divs NOT positioned absolutely..

 
 
maya
Guest
Posts: n/a
 
      11-14-2007
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...


 
Reply With Quote
 
 
 
 
maya
Guest
Posts: n/a
 
      11-15-2007
On Nov 14, 12:25 pm, Michael White <(E-Mail Removed)> 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!!


 
Reply With Quote
 
 
 
 
pr
Guest
Posts: n/a
 
      11-16-2007
maya wrote:
> On Nov 14, 12:25 pm, Michael White <(E-Mail Removed)> 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;
}

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-16-2007
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/ecmascript...Type=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>
 
Reply With Quote
 
maya
Guest
Posts: n/a
 
      11-16-2007
On Nov 16, 7:38 am, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
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...

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
swapping divs dynamically -- my code too funky....;) maya Javascript 4 02-26-2008 11:19 PM
swapping divs... maya Javascript 4 11-15-2007 08:53 PM
swapping or moving divs gimme_this_gimme_that@yahoo.com Javascript 2 03-16-2007 06:01 PM
Broken: absolutely positioned divs within a td in FF subp@wachtel.us HTML 13 05-05-2006 06:44 AM
Footer area with CSS not positioned at the bottom Remy HTML 2 01-06-2006 04:23 AM



Advertisments