• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 463
  • Last Modified:

Dynamic Java Panels

Im stuck. Infact i have no idea were to start. Using java panels, i would like each link that i click on in my page to create a new java panel and add it to a array. giving me a tabbed browser affect. any ideas on were to start would be great!! thank you.
0
ilaird
Asked:
ilaird
  • 6
  • 4
  • 2
  • +1
1 Solution
 
GwynforWebCommented:
what is a java panel?
0
 
ilairdAuthor Commented:
0
 
archrajanCommented:
u shud probably post in the JAVA TOPIC AREA
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 
ilairdAuthor Commented:
according the web page im looking at... i am.
Home: alltopics: Web Development: Web Languages: JavaScript: Q_2137760.html

I have used java panels before, I dont have the code right now, its on my work computer but i will post it tomorrow. i have a feeling that i might have the wrong name for it. But i konw its java.
Explained:
   Lets say you have a array.
       var Panels = new panel {'panel1','panel2','panel3'};

  Then you need some way to show the panels, this is were i would need to dig my code from...
    function ShowPanel(sender, panel)
    {
      //I cannot remember any of this for the life of me.
    }

  Then you have a Tab list that activates the panel
    <a onclick="ShowPanel(me, 'panel1');">Home</a>
    <a onclick="ShowPanel(me, 'panel2');">Products</a>
    <a onclick="ShowPanel(me, 'panel3');">Contact us</a>

I hope this helps. I realy have no idea what im talking about...
0
 
GwynforWebCommented:
you mean Divs in js/html terminology
0
 
ilairdAuthor Commented:
yes... as i said i have no idea what i am talking about...
0
 
dakydCommented:
ilaird,
  You're in the right TA, but to avoid any future confusion like the one above, Java & Javascript aren't the same thing.  In fact, Javascript used to go by the name Ecmascript.  Java is a full-blown object-oriented programming language, whereas Javascript is, as its name implies, a scripting language mostly limited to web pages/apps.  It's a common mistake, but it makes a difference in what people expect when they respond to your question.  Just my two cents ...
0
 
ilairdAuthor Commented:
Thank you dakyd. Im just a lowly little VB applicatoin programmer. thanks for setting me strait on that.
ok. here is wat i got...
this is alot of data but i hope you can weed through it. i want to edit this code to make it posable to dynamicly add more <div> sections wile the page is in use.

<html>
      <head>
            <!--Menu Includes-->
            <link rel="stylesheet" type="text/css" href="js/office_xp/office_xp.css" title="Office XP" />
            <script type="text/javascript" src="js/jsdomenu.js"></script>
            <script type="text/javascript" src="js/mnu.js"></script>
            <!--End Menu Includes-->
            <!--Panel Styals-->
            <STYLE>BODY{BACKGROUND-COLOR:#EDEBE3;FONT-SIZE:66.67%;FONT-FAMILY:tahoma;}A.tab{      CURSOR:hand;BORDER-RIGHT:#aaa 1px solid;PADDING-RIGHT:25px;BORDER-TOP:#aaa 1px solid;PADDING-LEFT:25px;BACKGROUND:#fffae1;left;PADDING-BOTTOM:3px;MARGIN:0px 0px 0px 0px;BORDER-LEFT:#aaa 1px solid;COLOR:#000000;PADDING-TOP:2px;POSITION:relative;TOP:-3px;TEXT-DECORATION:none;CURSOR:pointer;}.panel{      BORDER-RIGHT:#252525 1px solid;PADDING-RIGHT:0px;BORDER-TOP:#252525 1px solid;PADDING-LEFT:0px;PADDING-BOTTOM:0px;OVERFLOW:auto;BORDER-LEFT:#252525 1px solid;PADDING-TOP:0px;BORDER-BOTTOM:#252525 1px solid;WIDTH:100%;
            HEIGHT:97%;BACKGROUND-COLOR:white}#subtabs UL{      PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:4px;MARGIN:0px;PADDING-TOP:4px;LIST-STYLE-TYPE:none;}#subtabs LI{      PADDING-RIGHT:8px;PADDING-LEFT:8px;FLOAT:left;PADDING-BOTTOM:0px;BORDER-LEFT:#ccc 1px solid;PADDING-TOP:0px;WHITE-SPACE:nowrap;}#subtabs LI:unknown{      BORDER-LEFT-STYLE:none;}#subtabs{      PADDING-RIGHT:0px;PADDING-LEFT:5px;BACKGROUND:#fff3b3;PADDING-BOTTOM:0px;COLOR:#666;PADDING-TOP:0px;}</STYLE>
            <style fprolloverstyle>A:hover{color:#CC9900;font-size:8pt;font-family:Tahoma;font-weight:bold}</style><PARAM NAME="ScrollBars" VALUE="0"><base target="_blank">
            <style>.clsclock{color:black;font-family:tahoma;font-size:8pt;height:40px;}</style><style>.clCMAbs{position:absolute;visibility:hidden;left:0;top:0}.clCMEvent{position:absolute;width:99%;height:99%;clip:rect(0,100%,100%,0);left:0;top:0;visibility:visible}.clBar{position:absolute;width:10;height:10;background-color:#0044cc;layer-background-color:#000000;visibility:hidden}.clLevel0,.clLevel0over{position:absolute;padding:3px;font-family:tahoma;font-size:11px;font-weight:normal}.clLevel0{background-color:#0044cc;layer-background-color:#000000;color:#ffffff;}.clLevel0over{background-color:#0000cc;layer-background-color:#000000;color:#ffffff;cursor:pointer;cursor:hand;font-weight:bold}.clLevel0border{position:absolute;background-color:#3333cc;layer-background-color:#000000}.clLevel1,.clLevel1over{position:absolute;padding:3px;font-family:tahoma,arial,helvetica;font-size:11px;font-weight:normal}.clLevel1{background-color:#1564E6;layer-background-color:#000000;color:#FFFFFF;}.clLevel1over{background-color:#0000cc;layer-background-color:#000000;color:#FFFFFF;cursor:pointer;cursor:hand;font-weight:normal}.clLevel1border{position:absolute;background-color:darkblue;layer-background-color:#000000}</style>
            <SCRIPT language="JavaScript" type="text/javascript">
                        var panels = new Array('panel1', 'panel2', 'panel3', 'panel4', 'panel5', 'panel6', 'panel7', 'panel8', 'panel9');
                        var selectedTab = null;
                        function showPanel(tab, name)
                        {
                              if (selectedTab)
                              {
                              selectedTab.style.backgroundColor = '';
                              selectedTab.style.paddingTop = '';
                              selectedTab.style.paddingBottom = '';
                              selectedTab.style.fontWeight = 'normal';
                              selectedTab.style.borderTop = '#aaa 1px solid';
                              selectedTab.style.borderRight = '#aaa 1px solid';
                              selectedTab.style.borderLeft = '#aaa 1px solid';

                              }

                              selectedTab = tab;
                              selectedTab.style.backgroundColor = '#fff3b3';
                              selectedTab.style.marginTop = '0px';
                              selectedTab.style.paddingBottom = '4px';
                              selectedTab.style.fontWeight = 'bold';
                              selectedTab.style.color = '#555555';
                              selectedTab.style.borderTop = '#000 1px solid';
                              selectedTab.style.borderRight = '#000 1px solid';
                              selectedTab.style.borderLeft = '#000 1px solid';
                              for(i = 0; i < panels.length; i++)
                              {
                              document.getElementById(panels[i]).style.display = (name == panels[i]) ? 'block':'none';
                              }
                              return false;
                        }
                        
            </SCRIPT>
            <!--END Panel Styals-->
      </head>
      <body onload="initjsDOMenu()">
            <!--Header Image-->
            <TABLE cellpadding="0" cellspacing="0" border="0" width="100%" ID="Table1">
                  <TR bgcolor="#8C8C8C">
                        <TD width="15" background="/images/bg_phonestrip.gif" colspan="2">
                              &nbsp;
                        </TD>
                  </TR>
                  <TR bgcolor="#0066CC">
                        <TD height="44">&nbsp;&nbsp;&nbsp;<IMG src="/images/easy_as_site.gif" alt="Easy As site logo" width="95" height="25" border="0">
                        </TD>
                        <TD class="lnk_main_masthead" width="100%" valign="bottom" style="padding-bottom:10px"
                              style="color:#FFFFFF"><BR>
                              <b>GTS Tool Pit</b>
                        </TD>
                  </TR>
                  <TR height="1" bgcolor="#006699" colspan="2" width="100%">
                        <TD colspan="2">
                        </TD>
                  </TR>
                  <TR height="1" bgcolor="#97949D" colspan="3" width="100%">
                        <TD colspan="2">
                        </TD>
                  </TR>
                  <TR height="1" bgcolor="#A4AC9F" colspan="3" width="100%">
                        <TD colspan="2">
                        </TD>
                  </TR>
                  <TR height="1" bgcolor="#BCBFC6" colspan="3" width="100%">
                        <TD colspan="2">
                        </TD>
                  </TR>
                  <TR height="1" bgcolor="#CCCCCC" colspan="3" width="100%">
                        <TD colspan="2">
                        </TD>
                  </TR>
            </TABLE>
            <!--End Header Image-->
            <p>
                  <table width="100%" height="80%" border="0" onload="return showPanel(this, 'panel1');">
                        <tr>
                              <td valign="top" width=150px>
                                    <div id="staticMenu"></div>
                              </td>
                              <td valign="top">
                                    <table cellpadding="4" height=100% width=100%><tr><td valign=top height="100%">
                                    
                                    <A title="RCEC" class="tab" onclick="return showPanel(this, 'panel1');" id="gen">RCEC</A>
                                    <A title="Training" class="tab" onclick="return showPanel(this, 'panel2');" id="not">Training</A>
                                    <A title="GTS-TFW" class="tab" onclick="return showPanel(this, 'panel3');" id="tmz">GTS-TWF</A>
                                    <A title="Auditing" class="tab" onclick="return showPanel(this, 'panel4');" id="aud">RSL</A>
                                    <a title="DSN" class="tab" onclick="return showPanel(this, 'panel5');" id="newwin">DSN</a>
                                    <a title="Phone" class="tab" onclick="return showPanel(this, 'panel6');" id="A1">Phone#</a>
                                    <!--a title="NewWin" class="tab" onclick="return showPanel(this, 'panel7');" id="A2">NewWin</a-->
                                    <!--a title="NewWin" class="tab" onclick="return showPanel(this, 'panel8');" id="A3">NewWin</a-->
                                    <!--a title="NewWin" class="tab" onclick="return showPanel(this, 'panel9');" id="A4">NewWin</a-->
                                    
                                    <DIV class="panel" id="panel1" style="DISPLAY: True">
                                          <iframe src="http://rcec.us.site.com/cec/" width=100% height=100%></iframe>
                                    </DIV>
                                    <DIV class="panel" id="panel2" style="DISPLAY: none">
                                          <iframe src="http://training.us.site.com/training/new_products/" width=100% height=100%></iframe>
                                    </DIV>
                                    <DIV class="panel" id="panel3" style="DISPLAY: none">
                                          <iframe src="file://\\twfcs01\tfsite$\Gold_Tech_Support_Docs\Index.htm" width=100% height=100%></iframe>
                                    </DIV>
                                    <DIV class="panel" id="panel4" style="DISPLAY: none">
                                          <iframe src="http://rsl.us.site.com:49173/rslonline/" width=100% height=100%></iframe>
                                    </DIV>
                                    <DIV class="panel" id="panel5" style="DISPLAY: none">
                                          <iframe src="http://dsn.us.site.com/DSNCR/DSNGateway" width=100% height=100%></iframe>
                                    </DIV>
                                    <DIV class="panel" id="panel6" style="DISPLAY: none">
                                          <iframe src="http://directview.us.site.com/dv/mnureports/mnuquearpts/mnuccodata/CSSPhones.htm" width=100% height=100%></iframe>
                                    </DIV>
                                    <DIV class="panel" id="panel7" style="DISPLAY: none">
                                          <iframe src="cn.html" width=100% height=100%></iframe>
                                    </DIV>
                                    <DIV class="panel" id="panel8" style="DISPLAY: none">
                                          <iframe src="cn.html" width=100% height=100%></iframe>
                                    </DIV>
                                    <DIV class="panel" id="panel9" style="DISPLAY: none">
                                          <iframe src="cn.html" width=100% height=100%></iframe>
                                    </DIV>
                                    </td></tr></table>
                              </td>
                        </tr>
                  </table>
            </p>
            <p align="center"><FONT style="FONT-SIZE: 8pt"><A href="http://www.site.com/us/en/gen/misc/policy_002_policy.htm">Copyright</A> 1999-2005 site Inc.  |  site Confidential - Internal Use Only<br>Best if viewed in: 1280x1024 | <a href="mailto:ian_laird@site.com?subject=GTS-Tool pit">Feedback</a></FONT></p>
      </body>
</html>
0
 
dakydCommented:
Will this work?  I put a couple of test links for you to play with at the very top of the page, but you can
put them wherever you want.  I assumed that your links will only have text in them - whatever is between
the <a> and </a> tags gets turned into the text for the title.  Hope that helps.

<html>
     <head>
          <!--Menu Includes-->
          <link rel="stylesheet" type="text/css" href="js/office_xp/office_xp.css" title="Office XP" />
          <script type="text/javascript" src="js/jsdomenu.js"></script>
          <script type="text/javascript" src="js/mnu.js"></script>
          <!--End Menu Includes-->
          <!--Panel Styals-->
          <STYLE>
body {
  BACKGROUND-COLOR:#EDEBE3;
  FONT-SIZE:66.67%;
  FONT-FAMILY:tahoma;
}

A.tab{
  CURSOR:hand;
  BORDER-RIGHT:#aaa 1px solid;
  BORDER-TOP:#aaa 1px solid;
  BORDER-LEFT:#aaa 1px solid;
  PADDING: 2px 25px 3px 25px;
  BACKGROUND:#fffae1;
  MARGIN: 0;
  COLOR:#000000;
  POSITION:relative;
  TOP:-3px;
  TEXT-DECORATION:none;
  CURSOR:pointer;
}

.panel{
  BORDER:#252525 1px solid;
  PADDING:0;
  OVERFLOW:auto;
  WIDTH:100%;
  HEIGHT:97%;
  BACKGROUND-COLOR:white
}

#subtabs UL{
  PADDING: 4px 0;
  MARGIN:0;
  LIST-STYLE-TYPE:none;
}

#subtabs LI{
  PADDING: 0 8px;
  FLOAT:left;
  BORDER-LEFT:#ccc 1px solid;
  WHITE-SPACE:nowrap;
}

#subtabs LI:unknown{
  BORDER-LEFT-STYLE:none;
}

#subtabs{
  PADDING: 0 0 0 5px;
  BACKGROUND:#fff3b3;
  COLOR:#666;
}
</STYLE>
<style fprolloverstyle>
A:hover{
color:#CC9900;
font-size:8pt;
font-family:Tahoma;
font-weight:bold;
}
</style>
<PARAM NAME="ScrollBars" VALUE="0"><base target="_blank">
<style>
.clsclock{
  color:black;
  font-family:tahoma;
  font-size:8pt;
  height:40px;
}
</style>
<style>
.clCMAbs{
position:absolute;
visibility:hidden;
left:0;
top:0;
}

.clCMEvent{
position:absolute;
width:99%;
height:99%;
clip:rect(0,100%,100%,0);
left:0;
top:0;
visibility:visible;
}

.clBar{
position:absolute;
width:10px;
height:10px;
background-color:#0044cc;
layer-background-color:#000000;
visibility:hidden
}

.clLevel0,.clLevel0over{
position:absolute;
padding:3px;
font-family:tahoma;
font-size:11px;
font-weight:normal;}

.clLevel0{
background-color:#0044cc;
layer-background-color:#000000;
color:#ffffff;}

.clLevel0over{
background-color:#0000cc;
layer-background-color:#000000;
color:#ffffff;
cursor:pointer;
cursor:hand;
font-weight:bold;}

.clLevel0border{
position:absolute;
background-color:#3333cc;
layer-background-color:#000000;}

.clLevel1,.clLevel1over{
position:absolute;
padding:3px;
font-family:tahoma,arial,helvetica;
font-size:11px;
font-weight:normal;}

.clLevel1{
background-color:#1564E6;
layer-background-color:#000000;
color:#FFFFFF;}

.clLevel1over{
background-color:#0000cc;
layer-background-color:#000000;
color:#FFFFFF;
cursor:pointer;
cursor:hand;
font-weight:normal;}

.clLevel1border{
position:absolute;
background-color:darkblue;
layer-background-color:#000000;}
</style>

<script language="JavaScript" type="text/javascript">
var panels = new Array('panel1', 'panel2', 'panel3', 'panel4', 'panel5', 'panel6', 'panel7', 'panel8', 'panel9');
var selectedTab = null;

function showPanel(tab, name)
{
  if (selectedTab)
  {
    selectedTab.style.backgroundColor = '';
    selectedTab.style.paddingTop = '';
    selectedTab.style.paddingBottom = '';
    selectedTab.style.fontWeight = 'normal';
    selectedTab.style.borderTop = '#aaa 1px solid';
    selectedTab.style.borderRight = '#aaa 1px solid';
    selectedTab.style.borderLeft = '#aaa 1px solid';
  }

  selectedTab = tab;
  selectedTab.style.backgroundColor = '#fff3b3';
  selectedTab.style.marginTop = '0px';
  selectedTab.style.paddingBottom = '4px';
  selectedTab.style.fontWeight = 'bold';
  selectedTab.style.color = '#555555';
  selectedTab.style.borderTop = '#000 1px solid';
  selectedTab.style.borderRight = '#000 1px solid';
  selectedTab.style.borderLeft = '#000 1px solid';
  for(i = 0; i < panels.length; i++)
  {
  document.getElementById(panels[i]).style.display = (name == panels[i]) ? 'block':'none';
  }
  return false;
}

num = 10;
function createPanel(src, tabLabel)
{
  // clone the "panel"
  var orig = document.getElementById("dummy");
  var clone = orig.cloneNode(true);
  clone.id = "panel" + num;
  var theFrame = clone.getElementsByTagName("iframe")[0];
  theFrame.src = src;

  // clone the tab
  var origTab = document.getElementById("dummytab");
  var cloneTab = origTab.cloneNode(true);
  cloneTab.id = "tab" + num;
  cloneTab.title = tabLabel;
  cloneTab.innerHTML = tabLabel;
  cloneTab.onclick = function() {
    var tabNum = this.id.replace(/^tab/, "");
    showPanel(this, "panel" + tabNum);
  };

  cloneTab.style.display = "inline";
  orig.parentNode.insertBefore(clone, orig);
  origTab.parentNode.insertBefore(cloneTab, origTab);

  // now add to array
  panels[panels.length] = "panel" + num;
  num ++;
}

function initLinks()
{
  var links = document.getElementsByTagName("a");
  for (var i = 0, n = links.length; i < n; i ++)
  {
    var curr = links[i];
    if (curr.href)
      curr.onclick = function() {createPanel(this.href, this.innerHTML); return false;};
  }
}
</SCRIPT>
<!--END Panel Styals-->
</head>

<body onload="initLinks(); initjsDOMenu();">
  <!--Header Image-->
  <a href="test.html">TEST TITLE</a>
  <a href="test2.html">TEST TITLE2</a>
          <TABLE cellpadding="0" cellspacing="0" border="0" width="100%" ID="Table1">
               <TR bgcolor="#8C8C8C">
                    <TD width="15" background="/images/bg_phonestrip.gif" colspan="2">
                         &nbsp;
                    </TD>
               </TR>
               <TR bgcolor="#0066CC">
                    <TD height="44">&nbsp;&nbsp;&nbsp;<IMG src="/images/easy_as_site.gif" alt="Easy As site logo" width="95" height="25" border="0">
                    </TD>
                    <TD class="lnk_main_masthead" width="100%" valign="bottom" style="padding-bottom:10px"
                         style="color:#FFFFFF"><BR>
                         <b>GTS Tool Pit</b>
                    </TD>
               </TR>
               <TR height="1" bgcolor="#006699" colspan="2" width="100%">
                    <TD colspan="2">
                    </TD>
               </TR>
               <TR height="1" bgcolor="#97949D" colspan="3" width="100%">
                    <TD colspan="2">
                    </TD>
               </TR>
               <TR height="1" bgcolor="#A4AC9F" colspan="3" width="100%">
                    <TD colspan="2">
                    </TD>
               </TR>
               <TR height="1" bgcolor="#BCBFC6" colspan="3" width="100%">
                    <TD colspan="2">
                    </TD>
               </TR>
               <TR height="1" bgcolor="#CCCCCC" colspan="3" width="100%">
                    <TD colspan="2">
                    </TD>
               </TR>
          </TABLE>
          <!--End Header Image-->
          <p>
               <table width="100%" height="80%" border="0" onload="return showPanel(this, 'panel1');">
                    <tr>
                         <td valign="top" width=150px>
                              <div id="staticMenu"></div>
                         </td>
                         <td valign="top">
                              <table cellpadding="4" height=100% width=100%><tr><td valign=top height="100%">
                             
                              <A title="RCEC" class="tab" onclick="return showPanel(this, 'panel1');" id="gen">RCEC</A>
                              <A title="Training" class="tab" onclick="return showPanel(this, 'panel2');" id="not">Training</A>
                              <A title="GTS-TFW" class="tab" onclick="return showPanel(this, 'panel3');" id="tmz">GTS-TWF</A>
                              <A title="Auditing" class="tab" onclick="return showPanel(this, 'panel4');" id="aud">RSL</A>
                              <a title="DSN" class="tab" onclick="return showPanel(this, 'panel5');" id="newwin">DSN</a>
                              <a title="Phone" class="tab" onclick="return showPanel(this, 'panel6');" id="A1">Phone#</a>
                              <!--a title="NewWin" class="tab" onclick="return showPanel(this, 'panel7');" id="A2">NewWin</a-->
                              <!--a title="NewWin" class="tab" onclick="return showPanel(this, 'panel8');" id="A3">NewWin</a-->
                              <!--a title="NewWin" class="tab" onclick="return showPanel(this, 'panel9');" id="A4">NewWin</a-->
                        <a title="" class="tab" id="dummytab" style="display: none;">NewWin</a>                              

                              <DIV class="panel" id="panel1" style="DISPLAY: True">
                                   <iframe src="http://rcec.us.site.com/cec/" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel2" style="DISPLAY: none">
                                   <iframe src="http://training.us.site.com/training/new_products/" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel3" style="DISPLAY: none">
                                   <iframe src="file://\\twfcs01\tfsite$\Gold_Tech_Support_Docs\Index.htm" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel4" style="DISPLAY: none">
                                   <iframe src="http://rsl.us.site.com:49173/rslonline/" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel5" style="DISPLAY: none">
                                   <iframe src="http://dsn.us.site.com/DSNCR/DSNGateway" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel6" style="DISPLAY: none">
                                   <iframe src="http://directview.us.site.com/dv/mnureports/mnuquearpts/mnuccodata/CSSPhones.htm" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel7" style="DISPLAY: none">
                                   <iframe src="cn.html" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel8" style="DISPLAY: none">
                                   <iframe src="cn.html" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel9" style="DISPLAY: none">
                                   <iframe src="cn.html" width=100% height=100%></iframe>
                              </DIV>

                        <div class="panel" id="dummy" style="display: none;">
                                   <iframe src="" width=100% height=100%></iframe>
                              </div>
                              </td></tr></table>
                         </td>
                    </tr>
               </table>
          </p>
          <p align="center"><FONT style="FONT-SIZE: 8pt"><A href="http://www.site.com/us/en/gen/misc/policy_002_policy.htm">Copyright</A> 1999-2005 site Inc.  |  site Confidential - Internal Use Only<br>Best if viewed in: 1280x1024 | <a href="mailto:ian_laird@site.com?subject=GTS-Tool pit">Feedback</a></FONT></p>
     </body>
</html>
0
 
ilairdAuthor Commented:
That is exactly what i wanted!!!! I can see that i have ALOT to learn. hehehe. Ok, 100 more points if you can tell me how to close a open one now... i would like a X in the corner of each tab but watever works, i can work on making it pritty later. . . . infact another 150 if you can get a tab to close and make it pritty. :D thank you very very much dakyd.
0
 
dakydCommented:
It's not super pretty, but this'll give you a red "X" in the right corner of each tab.  I had to add an array to "convert" some of the id's to panel numbers, to simplify the closePanel() function.  That means if you change any of the id's of the tabs, you'll have to change the array to match, or the script'll throw errors.  New tabs/panels will also have the close functionality included when they are created.  Hope it helps.

<html>
     <head>
          <!--Menu Includes-->
          <link rel="stylesheet" type="text/css" href="js/office_xp/office_xp.css" title="Office XP" />
          <script type="text/javascript" src="js/jsdomenu.js"></script>
          <script type="text/javascript" src="js/mnu.js"></script>
          <!--End Menu Includes-->
          <!--Panel Styals-->
          <STYLE>
body {
  BACKGROUND-COLOR:#EDEBE3;
  FONT-SIZE:66.67%;
  FONT-FAMILY:tahoma;
}

.tab{
  CURSOR:hand;
  BORDER-RIGHT:#aaa 1px solid;
  BORDER-TOP:#aaa 1px solid;
  BORDER-LEFT:#aaa 1px solid;
  PADDING: 2px 25px 3px 25px;
  BACKGROUND:#fffae1;
  MARGIN: 0;
  COLOR:#000000;
  POSITION:relative;
  TOP:-3px;
  TEXT-DECORATION:none;
  CURSOR:pointer;
  float: left;
}

.tab .close {
  position: absolute;
  right: 0;
  top: 3px;
  width: 15px;
  background-color: #c00;
  text-align: center;
}

.panel{
  BORDER:#252525 1px solid;
  PADDING:0;
  OVERFLOW:auto;
  WIDTH:100%;
  HEIGHT:97%;
  BACKGROUND-COLOR:white;
  clear: both;
}

#subtabs UL{
  PADDING: 4px 0;
  MARGIN:0;
  LIST-STYLE-TYPE:none;
}

#subtabs LI{
  PADDING: 0 8px;
  FLOAT:left;
  BORDER-LEFT:#ccc 1px solid;
  WHITE-SPACE:nowrap;
}

#subtabs LI:unknown{
  BORDER-LEFT-STYLE:none;
}

#subtabs{
  PADDING: 0 0 0 5px;
  BACKGROUND:#fff3b3;
  COLOR:#666;
}
</STYLE>
<style fprolloverstyle>
A:hover{
color:#CC9900;
font-size:8pt;
font-family:Tahoma;
font-weight:bold;
}
</style>
<PARAM NAME="ScrollBars" VALUE="0"><base target="_blank">
<style>
.clsclock{
  color:black;
  font-family:tahoma;
  font-size:8pt;
  height:40px;
}
</style>
<style>
.clCMAbs{
position:absolute;
visibility:hidden;
left:0;
top:0;
}

.clCMEvent{
position:absolute;
width:99%;
height:99%;
clip:rect(0,100%,100%,0);
left:0;
top:0;
visibility:visible;
}

.clBar{
position:absolute;
width:10px;
height:10px;
background-color:#0044cc;
layer-background-color:#000000;
visibility:hidden
}

.clLevel0,.clLevel0over{
position:absolute;
padding:3px;
font-family:tahoma;
font-size:11px;
font-weight:normal;}

.clLevel0{
background-color:#0044cc;
layer-background-color:#000000;
color:#ffffff;}

.clLevel0over{
background-color:#0000cc;
layer-background-color:#000000;
color:#ffffff;
cursor:pointer;
cursor:hand;
font-weight:bold;}

.clLevel0border{
position:absolute;
background-color:#3333cc;
layer-background-color:#000000;}

.clLevel1,.clLevel1over{
position:absolute;
padding:3px;
font-family:tahoma,arial,helvetica;
font-size:11px;
font-weight:normal;}

.clLevel1{
background-color:#1564E6;
layer-background-color:#000000;
color:#FFFFFF;}

.clLevel1over{
background-color:#0000cc;
layer-background-color:#000000;
color:#FFFFFF;
cursor:pointer;
cursor:hand;
font-weight:normal;}

.clLevel1border{
position:absolute;
background-color:darkblue;
layer-background-color:#000000;}
</style>

<script language="JavaScript" type="text/javascript">
var panels = new Array('panel1', 'panel2', 'panel3', 'panel4', 'panel5', 'panel6', 'panel7', 'panel8', 'panel9');
var idConversion = new Array();
idConversion["gen"] = "1";
idConversion["not"] = "2";
idConversion["tmz"] = "3";
idConversion["aud"] = "4";
idConversion["newwin"] = "5";
idConversion["A1"] = "6";
idConversion["A2"] = "7";
idConversion["A3"] = "8";
idConversion["A4"] = "9";
var selectedTab = null;

function showPanel(tab, name)
{
  if (selectedTab)
  {
    selectedTab.style.backgroundColor = '';
    selectedTab.style.paddingTop = '';
    selectedTab.style.paddingBottom = '';
    selectedTab.style.fontWeight = 'normal';
    selectedTab.style.borderTop = '#aaa 1px solid';
    selectedTab.style.borderRight = '#aaa 1px solid';
    selectedTab.style.borderLeft = '#aaa 1px solid';
  }

  selectedTab = tab;
  selectedTab.style.backgroundColor = '#fff3b3';
  selectedTab.style.marginTop = '0px';
//  selectedTab.style.paddingBottom = '4px';
  selectedTab.style.fontWeight = 'bold';
  selectedTab.style.color = '#555555';
  selectedTab.style.borderTop = '#000 1px solid';
  selectedTab.style.borderRight = '#000 1px solid';
  selectedTab.style.borderLeft = '#000 1px solid';
  for(i = 0; i < panels.length; i++)
  {
    document.getElementById(panels[i]).style.display = (name == panels[i]) ? 'block':'none';
  }
  return false;
}

num = 10;
function createPanel(src, tabLabel)
{
  // clone the "panel"
  var orig = document.getElementById("dummy");
  var clone = orig.cloneNode(true);
  clone.id = "panel" + num;
  var theFrame = clone.getElementsByTagName("iframe")[0];
  theFrame.src = src;

  // clone the tab
  var origTab = document.getElementById("dummytab");
  var cloneTab = origTab.cloneNode(true);
  cloneTab.id = "tab" + num;
  cloneTab.title = tabLabel;
  cloneTab.childNodes[0].nodeValue = tabLabel;
  cloneTab.childNodes[1].onclick = closePanel;
  cloneTab.onclick = function() {
    var tabNum = this.id.replace(/^tab/, "");
    showPanel(this, "panel" + tabNum);
  };

  cloneTab.style.display = "inline";
  orig.parentNode.insertBefore(clone, orig);
  origTab.parentNode.insertBefore(cloneTab, origTab);

  // now add to array
  panels[panels.length] = "panel" + num;
  num ++;
}

function closePanel()
{
  // fix array first
  var tab = this.parentNode;
  var tabNum = idConversion[tab.id]? idConversion[tab.id]: tab.id.replace(/^tab/, "");
  var index = -1;
  for (var i = 0, n = panels.length; i < n; i ++)
  {
    if (panels[i] == "panel" + tabNum)
    {
      index = i;
      break;
    }
  }
  panels.splice(index, 1);

  // remove panel
  var p = document.getElementById("panel" + tabNum);
  p.parentNode.removeChild(p);

  // remove tab
  tab.parentNode.removeChild(tab);
}

function initPanelSystem()
{
  var divs = document.getElementsByTagName("div");
  for (var i = 0, n = divs.length; i < n; i ++)
  {
    var curr = divs[i];
    if (curr.className && curr.className == "tab")
      curr.getElementsByTagName("div")[0].onclick = closePanel;
  }

  var links = document.getElementsByTagName("a");
  for (var i = 0, n = links.length; i < n; i ++)
  {
    var curr = links[i];
    if (curr.href)
      curr.onclick = function() {createPanel(this.href, this.innerHTML); return false;};
  }
}
</SCRIPT>
<!--END Panel Styals-->
</head>

<body onload="initPanelSystem();initjsDOMenu();">
  <!--Header Image-->
  <a href="test.html">TEST TITLE</a>
  <a href="test2.html">TEST TITLE2</a>
          <TABLE cellpadding="0" cellspacing="0" border="0" width="100%" ID="Table1">
               <TR bgcolor="#8C8C8C">
                    <TD width="15" background="/images/bg_phonestrip.gif" colspan="2">
                         &nbsp;
                    </TD>
               </TR>
               <TR bgcolor="#0066CC">
                    <TD height="44">&nbsp;&nbsp;&nbsp;<IMG src="/images/easy_as_site.gif" alt="Easy As site logo" width="95" height="25" border="0">
                    </TD>
                    <TD class="lnk_main_masthead" width="100%" valign="bottom"

style="padding-bottom:10px"
                         style="color:#FFFFFF"><BR>
                         <b>GTS Tool Pit</b>
                    </TD>
               </TR>
               <TR height="1" bgcolor="#006699" colspan="2" width="100%">
                    <TD colspan="2">
                    </TD>
               </TR>
               <TR height="1" bgcolor="#97949D" colspan="3" width="100%">
                    <TD colspan="2">
                    </TD>
               </TR>
               <TR height="1" bgcolor="#A4AC9F" colspan="3" width="100%">
                    <TD colspan="2">
                    </TD>
               </TR>
               <TR height="1" bgcolor="#BCBFC6" colspan="3" width="100%">
                    <TD colspan="2">
                    </TD>
               </TR>
               <TR height="1" bgcolor="#CCCCCC" colspan="3" width="100%">
                    <TD colspan="2">
                    </TD>
               </TR>
          </TABLE>
          <!--End Header Image-->
          <p>
               <table width="100%" height="80%" border="0" onload="return showPanel(this, 'panel1');">
                    <tr>
                         <td valign="top" width=150px>
                              <div id="staticMenu"></div>
                         </td>
                         <td valign="top">
                              <table cellpadding="4" height=100% width=100%><tr><td valign=top

height="100%">
                             
                              <div title="RCEC" class="tab" onclick="return showPanel(this, 'panel1');"

id="gen">RCEC<div class="close">X</div></div>
                              <div title="Training" class="tab" onclick="return showPanel(this,

'panel2');" id="not">Training<div class="close">X</div></div>
                              <div title="GTS-TFW" class="tab" onclick="return showPanel(this,

'panel3');" id="tmz">GTS-TWF<div class="close">X</div></div>
                              <div title="Auditing" class="tab" onclick="return showPanel(this,

'panel4');" id="aud">RSL<div class="close">X</div></div>
                              <div title="DSN" class="tab" onclick="return showPanel(this, 'panel5');"

id="newwin">DSN<div class="close">X</div></div>
                              <div title="Phone" class="tab" onclick="return showPanel(this, 'panel6');"

id="A1">Phone#<div class="close">X</div></div>
                              <!--div title="NewWin" class="tab" onclick="return showPanel(this,

'panel7');" id="A2">NewWin<div class="close">X</div></div-->
                              <!--div title="NewWin" class="tab" onclick="return showPanel(this,

'panel8');" id="A3">NewWin<div class="close">X</div></div-->
                              <!--div title="NewWin" class="tab" onclick="return showPanel(this,

'panel9');" id="A4">NewWin<div class="close">X</div></div-->
                     <div title="" class="tab" id="dummytab" style="display: none;">NewWin<div class="close">X</div></div>

<DIV class="panel" id="panel1" style="DISPLAY: True">
                                   <iframe src="http://rcec.us.site.com/cec/" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel2" style="DISPLAY: none">
                                   <iframe src="http://training.us.site.com/training/new_products/" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel3" style="DISPLAY: none">
                                   <iframe src="file://\\twfcs01\tfsite$\Gold_Tech_Support_Docs\Index.htm" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel4" style="DISPLAY: none">
                                   <iframe src="http://rsl.us.site.com:49173/rslonline/" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel5" style="DISPLAY: none">
                                   <iframe src="http://dsn.us.site.com/DSNCR/DSNGateway" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel6" style="DISPLAY: none">
                                   <iframe src="http://directview.us.site.com/dv/mnureports/mnuquearpts/mnuccodata/CSSPhones.htm" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel7" style="DISPLAY: none">
                                   <iframe src="cn.html" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel8" style="DISPLAY: none">
                                   <iframe src="cn.html" width=100% height=100%></iframe>
                              </DIV>
                              <DIV class="panel" id="panel9" style="DISPLAY: none">
                                   <iframe src="cn.html" width=100% height=100%></iframe>
                              </DIV>

                           <div class="panel" id="dummy" style="display: none;">
                                   <iframe src="test2.html" width=100% height=100%></iframe>
                              </div>
                              </td></tr></table>
                         </td>
                    </tr>
               </table>
          </p>
          <p align="center"><FONT style="FONT-SIZE: 8pt"><A href="http://www.site.com/us/en/gen/misc/policy_002_policy.htm">Copyright</A> 1999-2005 site Inc.  |  
site Confidential - Internal Use Only<br>Best if viewed in: 1280x1024 | <a href="mailto:ian_laird@site.com?subject=GTS-Tool pit">Feedback</a></FONT></p>
     </body>
</html>
0
 
ilairdAuthor Commented:
It works for me. i can figure out how to make it pritty on my own. Thank you very much. you errned all 400 points as far as I'm concerned!
0
 
dakydCommented:
No sweat, glad to hear you got what you wanted.  Thanks for the points & the "A".  Cheers.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 6
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now