swapping divs...

M

maya

hi,

I need to swap divs, but the divs cannot be positioned absolutely; I'm
used to doing it with absolutely-positioned divs, but now have to do it
with divs that are not positioned absolutely..

here's what I've done so far..

http://www.mayacove.com/misc/test_divs.html

it works fine except I don't know to make that second div appear in same
position where div1 is.. would appreciate some suggestions..

thank you very much..
 
R

RobG

hi,

I need to swap divs, but the divs cannot be positioned absolutely; I'm
used to doing it with absolutely-positioned divs, but now have to do it
with divs that are not positioned absolutely..

here's what I've done so far..

http://www.mayacove.com/misc/test_divs.html

it works fine except I don't know to make that second div appear in same
position where div1 is.. would appreciate some suggestions..
Click to expand...

I've copied part of your script below as if it were quoted, comments
are interleaved:

<script language="JavaScript" type="text/javascript">
Click to expand...

The language attribute is deprecated so remove it, keep the required
type attribute.

function getDiv2(newDiv,currDiv) {
var divTop = eval('document.getElementById(' + "currDiv" + ')');
var divNew = eval('document.getElementById(' + "newDiv" + ')');
Click to expand...

Just don't use eval, it is a sign of someone with a very limited
understanding of javascript.

var divTop = document.getElementById(currDiv);
var divNew = document.getElementById(newDiv);

divTop.style.visibility = "hidden";
divNew.style.visibility = "visible";
Click to expand...

Use the display property. An element with display set to 'none' is
removed from the document flow:

divTop.style.display = "none";
divTop.style.display = ""; // use an empty string

Modify the second function the same way. You could use a simple
function to toggle both divs:

function toggleDivs(id1, id2) {

var div1 = document.getElementById(id1);
var div2 = document.getElementById(id2);

if (div1.style.display == 'none') {
div1.style.display == '';
div2.style.display == 'none';

} else {
div1.style.display == 'none';
div2.style.display == '';
}
}

It needs some feature detection and error handling added, hopefully it
demonstrates the concept.
 
T

Thomas 'PointedEars' Lahn

maya said:
I need to swap divs, but the divs cannot be positioned absolutely;
I'm used to doing it with absolutely-positioned divs, but now have to do
it with divs that are not positioned absolutely..

here's what I've done so far..

http://www.mayacove.com/misc/test_divs.html

it works fine except I don't know to make that second div appear in same
position where div1 is.. would appreciate some suggestions..
Click to expand...

1. Apply http://validator.w3.org/ on your markup and fix the problems that
will be found:

http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

2. The line

var divTop = eval('document.getElementById(' + "currDiv" + ')');

and the like are UUOE (`Useless Use Of eval()'):

var divTop = document.getElementById("currDiv");

See also http://www.jibbering.com/faq/#FAQ4_40

3. Instead of writing a method for each `div' element, write and call a
general method that hides all fitting `div' elements but one, and that
shows that one. Use arguments to pass (a part of) the ID of the element
to show.

4. Call that method onload instead of hiding elements initially with inline
CSS (what if there was no script support?):

<body onload="showOnly(1);">

5. Toggle o.display = ("block" | "none") instead of
o.visibility = ("visible" | "hidden").

http://www.w3.org/TR/CSS21/visuren.html#propdef-display

6. Generate all script-dependent content dynamically (again, think of or
test what would happen if there was no script support with the current
code):

<script type="text/javascript">
document.write('<a href="#" onclick="showOnly(1);">'
+ 'get div1<\/a>');
</script>

7. Do a runtime feature test for DOM methods before you call them, and test
their return value before you use it:

http://www.jibbering.com/faq/faq_notes/not_browser_detect.html


HTH

PointedEars
 
M

maya

I've copied part of your script below as if it were quoted, comments
are interleaved:


The language attribute is deprecated so remove it, keep the required
type attribute.


Just don't use eval, it is a sign of someone with a very limited
understanding of javascript.

var divTop = document.getElementById(currDiv);
var divNew = document.getElementById(newDiv);


Use the display property. An element with display set to 'none' is
removed from the document flow:

divTop.style.display = "none";
divTop.style.display = ""; // use an empty string

Modify the second function the same way. You could use a simple
function to toggle bothdivs:

function toggleDivs(id1, id2) {

var div1 = document.getElementById(id1);
var div2 = document.getElementById(id2);

if (div1.style.display == 'none') {
div1.style.display == '';
div2.style.display == 'none';

} else {
div1.style.display == 'none';
div2.style.display == '';
}

}

It needs some feature detection and error handling added, hopefully it
demonstrates the concept.
Click to expand...

thank you very much, Rob..

ok, put function you said, it's perfect :)

http://www.mayacove.com/misc/test_divs2.html

HOWEVER: it's not working! :( (??)
when I click on function-call it gets ignored (and I don't even get
an error..)

what I have in function-calls:

<a href="#" onClick="toggleDivs('div1','div1');">get div2</
a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" onClick="toggleDivs('div1','div2');">get div1</a>

I assume need to pass div-id's in order 1,2 in both cases since in
function itself you have

toggleDivs(id1, id2)

thank you very much...

it would be AWESOME if I get this to work the way I want, I use it a
lot at work....
 
M

maya

1. Applyhttp://validator.w3.org/on your markup and fix the problems that
will be found:

http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

2. The line

var divTop = eval('document.getElementById(' + "currDiv" + ')');

and the like are UUOE (`Useless Use Of eval()'):

var divTop = document.getElementById("currDiv");

See alsohttp://www.jibbering.com/faq/#FAQ4_40

3. Instead of writing a method for each `div' element, write and call a
general method that hides all fitting `div' elements but one, and that
shows that one. Use arguments to pass (a part of) the ID of the element
to show.

4. Call that method onload instead of hiding elements initially with inline
CSS (what if there was no script support?):

<body onload="showOnly(1);">

5. Toggle o.display = ("block" | "none") instead of
o.visibility = ("visible" | "hidden").

http://www.w3.org/TR/CSS21/visuren.html#propdef-display

6. Generate all script-dependent content dynamically (again, think of or
test what would happen if there was no script support with the current
code):

<script type="text/javascript">
document.write('<a href="#" onclick="showOnly(1);">'
+ 'get div1<\/a>');
</script>

7. Do a runtime feature test for DOM methods before you call them, and test
their return value before you use it:

http://www.jibbering.com/faq/faq_notes/not_browser_detect.html

HTH

PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
Click to expand...

hmmm.. this is code used at present where I work for all this...

http://www.mayacove.com/misc/swapTabs.js
http://www.mayacove.com/misc/prototype.js

I don't think anybody here wrote this code, I think they grabbed it
from somewhere, I don't know from where.... not sure if this code
contains code for stuff you mention (browser-detection, whether
browser is script-enabled or not..) if this code does contain stuff
like this I think I need to include it in mine too...)

this is how I finally made it work as per someone else's post...
(2nd post here..
http://groups.google.com/group/comp...1ea8?lnk=gst&q=swapping+divs#76e605834e711ea8)
http://www.mayacove.com/misc/test_divs3.html

thank you very much, PointedEars..:)
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

swapping divs dynamically -- my code too funky....;) 4
swapping divs -- when divs NOT positioned absolutely.. 4
How to properly insert a landing page within same container beneath an image element? 0
Overlapping elements don't quite match 6
May anyone tell me why the values aren't swapping? 0
Encryption 6
jquery fadein /fadeout a few divs in one place 20
mousemove for overlapping divs 2

Members online

No members online now.
Total: 55 (members: 0, guests: 55)
Robots: 459

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,810
Latest member
Kassie0918

Latest Threads

Top