Results 1 to 10 of 10

Thread: Toggle a layer while toggling another simultaneously

  1. #1
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Toggle a layer while toggling another simultaneously

    If I set a div to display:none, I have this script to show a layer.

    function toggleLayer( whichLayer )
    {
    var elem, vis;
    if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
    else if( document.all ) // this is the way old msie versions work
    elem = document.all[whichLayer];
    else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
    vis = elem.style;
    // if the style.display value is blank we try to figure it out here
    if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
    vis.display = (vis.display==''||vis.display=='block')?'none':'block';
    }
    </script>

    <a href="javascript:showHide();" onClick="toggleLayer('sendlg');return false;">do this</a>


    How could I adjust it to show one layer but hide another layer

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .div {
      display:none;width:100px;height:100px;background-Color:#8B8B8B
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    function toggleLayer(id){
     var obj=document.getElementById(id);
     if (this.obj&&this.obj!=obj){
      this.obj.style.display='none';
     }
     obj.style.display=obj.style.display!='block'?'block':'none';
     this.obj=obj;
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <a href="#" onClick="toggleLayer('d0');return false;">d0</a>
    <a href="#" onClick="toggleLayer('d1');return false;">d1</a>
    <div id="d0" class="div" >Div 0</div>
    <div id="d1" class="div" >Div 1</div>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thanks I think I miscommunicated.

    What I was trying to do was show one layer and hide another with the same link.

    I think the code now hides both layers by default.

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #d0 {
      display:block;width:100px;height:100px;background-Color:#8B8B8B
    }
    
    #d1 {
      display:none;width:100px;height:100px;background-Color:#8B8B8B
    }
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    function toggleLayer(id1,id2){
     var obj=document.getElementById(id1);
     obj.style.display=obj.style.display=='none'?'block':'none';
     document.getElementById(id2).style.display=obj.style.display=='block'?'none':'block';
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <a href="#" onclick="toggleLayer('d0','d1');return false;">d0</a>
    <div id="d0" >Div 0</div>
    <div id="d1" >Div 1</div>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    That works great! I was trying to modify it so that the link changes when the layers are switched

    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    function toggleLayer(id1,id2){
     var obj=document.getElementById(id1);
     obj.style.display=obj.style.display=='none'?'block':'none';
     document.getElementById('loginmsg').innerHTML = 'register';
    document.getElementById(id2).style.display=obj.style.display=='block'?'none':'block';
     document.getElementById('loginmsg').innerHTML = 'login';
    }
    /*]]>*/
    </script>
    It worked good with only the first code block I added. So when you click login it would switch to register, but then when you click register again it doesn't go back to login

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #d0 {
      display:block;width:100px;height:100px;background-Color:#8B8B8B
    }
    
    #d1 {
      display:none;width:100px;height:100px;background-Color:#8B8B8B
    }
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    function toggleLayer(obj,id1,id2){
     var div=document.getElementById(id1);
     div.style.display=div.style.display=='none'?'block':'none';
     document.getElementById(id2).style.display=div.style.display=='block'?'none':'block';
     obj.innerHTML=div.style.display=='none'?'d1':'d0';
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <a href="#" onclick="toggleLayer(this,'d0','d1');return false;">d0</a>
    <div id="d0" >Div 0</div>
    <div id="d1" >Div 1</div>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Right now, d0 shows by default, but d1 won't show when the link is clicked but when clicked again d0 shows again.

    Is it me, or does it work on your end.

  8. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    works for me IE7 and FF
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    I see what I mean now.

    I was trying to make the hyperlink say to show the hidden layer not the one that's already showing.

    i.e. link d1 should show when layer d1 is hidden and vice versa, link d0 should show when layer d0 is hidden.

    hope that makes sense

  10. #10
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
     obj.innerHTML=div.style.display=='none'?'d0':'d1';
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

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