...

View Full Version : Positioning Problem



mgersting
01-15-2003, 07:54 AM
OK, gang, thanks in advance.
Let's say I have a simple table. In a cell of the table there are two relative positioned DIVs. One is visible, the other hidden. I would a link that would not only switch the visibilty of the DIVs (which is not a problem) but ALSO switch their positions so that DIV-2 appears to have taken DIV-1's place (in effect, a rollover).

I have been able to effectively modify the run-time value of the top property, but it doesn't affect the visible location of the DIV.

Any suggestions would be greatly appreciated. :thumbsup:

joeframbach
01-15-2003, 01:21 PM
yay for pseudocode!

rollover function:
var temp=cell1.innerHTML;
cell1.innerHTML=cell2.innerHTML;
cell2.innerHTML=temp;

BrainJar
01-15-2003, 03:22 PM
Instead of using the visibility style, you could use the display style.

Make div 1 appear:

div1El.style.display="block";
div2El.style.display="none";

Make div 2 appear:

div1El.style.display="none";
div2El.style.display="block";

With display="none", the div will not appear on the screen at all, so you'd get the effect of one div replacing the other without having to move either div or replace their contents.

mgersting
01-16-2003, 05:36 AM
Hey BrainJar,
That works well - just what I need - except it doesn't seem compliant with Netscape. The site I'm developing has an older demographic and might be using older browsers.

Anyway that code could be adjusted to work with Netscape too?

Thanks a ton!
- Matt

Roy Sinclair
01-16-2003, 04:14 PM
With Netscape 4 you loose the dynamic page effects so you have to go back to the methods of positioning everything.

mgersting
01-16-2003, 08:34 PM
but what about with later versions of netscape, 6 and 7? it would seem like they would support some of these properties.

Roy Sinclair
01-16-2003, 10:32 PM
Netscape 6 and Netscape 7 are just fine, it's only the older Netscape which requires heroic measures to accomplish simple tasks.

mgersting
01-16-2003, 10:50 PM
Odd - tried the above code in 7 and I didn't seem to work for me. Can you get it to work?

- Matt

Roy Sinclair
01-17-2003, 05:02 PM
Making a slight adjustment to the code from BrainJar which depends on a non-standard IE extension to the DOM



Make div 1 appear:

document.getElementById("div1El").style.display="block";
document.getElementById("div2El").style.display="none";

Make div 2 appear:

document.getElementById("div1El").style.display="none";
document.getElementById("div2El").style.display="block";



This makes the code cross-browser compatible (by cross browser I mean that it'll work in any modern browser that supports a reasonable subset of the current W3C DOM standards).

mgersting
01-17-2003, 08:06 PM
Beautiful, Roy. Thanks.
Any suggestions on good DOM sites where I could more readily determine how to write cross-browser code?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum