?
Solved

Javascript to swap layer visability onClick

Posted on 2004-11-23
7
Medium Priority
?
475 Views
Last Modified: 2012-06-27
I'm creating a layout with "tabbed pages" where clicking one "tab" shows that layer but hides the currently visable one.  I can't figure out how to handle both functions with the one even handler.  Does anyone have a simple sample script for this that will work in IE and NS?  If it is W3C I would think it would work in both, right?
0
Comment
Question by:nericksx
7 Comments
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12659923
<script>
function toggle(obj){
if (obj.style.zIndex==1){
 temp=document.getElementById('d2').style.zIndex
document.getElementById('d2').style.zIndex=document.getElementById('d1').style.zIndex
 document.getElementById('d1').style.zIndex=temp
  }
}
</script>

<body>
<div id="d1"
style="position:absolute;top:100;left:100;height:200;width:200;background-color=yellow;z-index:1"
 onclick="toggle(this)"></div>

<div id="d2"
style="position:absolute;top:130;left:130;height:200;width:200;background-color=aqua;z-index:2"
  onclick="toggle(this)">
</div>
</body>
0
 
LVL 31

Assisted Solution

by:GwynforWeb
GwynforWeb earned 600 total points
ID: 12660031
this is better

<script>
max=4
function toggle(obj){
max+=1
obj.style.zIndex=max
}
</script>


<body>
<div id="d1"
style="position:absolute;top:100;left:100;height:200;width:200;background-color=yellow;z-index:1"
onclick="toggle(this)"></div>
<div id="d2"
style="position:absolute;top:120;left:130;height:200;width:200;background-color=aqua;z-index:2"
onclick="toggle(this)"></div>
<div id="d3"
style="position:absolute;top:140;left:160;height:200;width:200;background-color=green;z-index:3"
onclick="toggle(this)"></div>
<div id="d4"
style="position:absolute;top:160;left:190;height:200;width:200;background-color=red;z-index:4"
onclick="toggle(this)"></div>
</body>
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12660053
background-color=red  should read  background-color:red  same for the other colors   else it will not run in NS
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:nericksx
ID: 12660060
Cool, but I don't want to swap their z-index because you'll still be able to see the layers underneath.  I need to swap the visabilty (visable, hidden).  I'm not sure how I would swap in the syntax for visability in the code above.  (I like how short it is, tho!)
0
 
LVL 10

Assisted Solution

by:Nash2334
Nash2334 earned 450 total points
ID: 12660157
nericksx -

Here is some code from a previous post I made.  You can swap the table tags for divs.  Note the cookie functions to remember the last visible table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
     <title>Show Hide Test</title>
 
  <script language="JavaScript" type="text/javascript">
  iNumTables = 2; // number of tables on page
 
  function showTable(iTableID)
  {
    var i;
    var objTable;
   
    // loop through all tables on page
    for (i = 1; i <= iNumTables; i ++)
    {
      // get table object
      objTable = document.getElementById("table" + i);
     
      // show table if specified by function and set displayed table cookie; hide all others
      if (i == iTableID)
      {
        objTable.style.display = "inline";
        setCookie("ckCurrentTable", i);
      }
      else
        objTable.style.display = "none";
    }
  }
 
  function showLastTable()
  {
    var iTableToShow = getCookie("ckCurrentTable");
   
    if (iTableToShow == null)
      showTable(1);
    else
      showTable(iTableToShow);
  }
 
  // cookie functions
  function setCookie (strName, strValue)
  {
    document.cookie = strName + "=" + escape(strValue);
  }

  function getCookie (strName)
  {
    var cookie = document.cookie;
    var iCookieStart = cookie.indexOf(strName + "=");
    var iCookieEnd;
   
    if (iCookieStart == -1)
      return null; // cookie does not exist
   
    iCookieStart = cookie.indexOf("=", iCookieStart) + 1;
    iCookieEnd = cookie.indexOf(";", iCookieStart);
   
    if (iCookieEnd == -1)
      iCookieEnd = cookie.length;
     
    return unescape(cookie.substring(iCookieStart, iCookieEnd));
  }
 
  </script>
 
</head>

<body onLoad="showLastTable();">

<div><a href="javascript:showTable(1);">Table 1</a> | <a href="javascript:showTable(2);">Table 2</a></div>

<table id="table1" border="1">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>

<table id="table2" border="1" style="display: none;">
  <tr>
    <td>
      Table 2
    </td>
  </tr>
</table>

</body>
</html>
0
 
LVL 25

Accepted Solution

by:
devic earned 450 total points
ID: 12660206
something like this:
========================
<script>
var lastTab=null;
function chTab(obj)
{
      obj.cont=document.getElementById("content"+obj.id.match(/\d/));
      obj.cont.style.display="";
      obj.style.fontWeight="bold";
      if(lastTab)
      {
            lastTab.cont.style.display="none";
            lastTab.style.fontWeight="normal";
      }
      lastTab=obj;
}
</script>

<button id=tab1 onclick=chTab(this)>Tab1</button>
<button id=tab2 onclick=chTab(this)>Tab2</button>
<button id=tab3 onclick=chTab(this)>Tab3</button>
<button id=tab4 onclick=chTab(this)>Tab4</button>
<button id=tab5 onclick=chTab(this)>Tab5</button>

<div style="display:none"id=content1>Tab1 Tab1 Tab1 Tab1 Tab1 Tab1</div>
<div style="display:none" id=content2>Tab2 Tab2 Tab2 Tab2 Tab2 Tab2</div>
<div style="display:none" id=content3>Tab3 Tab3 Tab3 Tab13 Tab3 Tab3</div>
<div style="display:none" id=content4>Tab4 Tab4 Tab4 Tab4 Tab4 Tab4</div>
<div style="display:none" id=content5>Tab5 Tab5 Tab5 Tab5 Tab5 Tab5</div>
0
 

Author Comment

by:nericksx
ID: 12660301
Ok, I totally cheated and used the built in behaviors in Dreamweaver.  I'm totally ashamed but it was pretty slick.  Thanks to everyone who responded, points for everyone for going to the effort (esp Gwyn who did write a very elegant script).
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question