Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2002
    Location
    Orlando
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning Problem

    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.

  • #2
    Regular Coder
    Join Date
    Dec 2002
    Location
    a bit west of pittsburgh
    Posts
    236
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yay for pseudocode!

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

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    185
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Dec 2002
    Location
    Orlando
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How about for Netscape

    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

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    With Netscape 4 you loose the dynamic page effects so you have to go back to the methods of positioning everything.

  • #6
    New Coder
    Join Date
    Dec 2002
    Location
    Orlando
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    but what about with later versions of netscape, 6 and 7? it would seem like they would support some of these properties.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Netscape 6 and Netscape 7 are just fine, it's only the older Netscape which requires heroic measures to accomplish simple tasks.

  • #8
    New Coder
    Join Date
    Dec 2002
    Location
    Orlando
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Odd - tried the above code in 7 and I didn't seem to work for me. Can you get it to work?

    - Matt

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Making a slight adjustment to the code from BrainJar which depends on a non-standard IE extension to the DOM

    Code:
    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).

  • #10
    New Coder
    Join Date
    Dec 2002
    Location
    Orlando
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Beautiful, Roy. Thanks.
    Any suggestions on good DOM sites where I could more readily determine how to write cross-browser code?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •