[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Dynamic Java Panels

Posted on 2005-04-05
14
Medium Priority
?
458 Views
Last Modified: 2008-09-08
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
Comment
Question by:ilaird
  • 6
  • 4
  • 2
  • +1
13 Comments
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 13713267
what is a java panel?
0
 
LVL 2

Author Comment

by:ilaird
ID: 13713433
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13713638
u shud probably post in the JAVA TOPIC AREA
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 2

Author Comment

by:ilaird
ID: 13713686
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 13713736
you mean Divs in js/html terminology
0
 
LVL 2

Author Comment

by:ilaird
ID: 13713881
yes... as i said i have no idea what i am talking about...
0
 
LVL 19

Expert Comment

by:dakyd
ID: 13717835
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
 
LVL 2

Author Comment

by:ilaird
ID: 13721419
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
 
LVL 19

Expert Comment

by:dakyd
ID: 13723357
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
 
LVL 2

Author Comment

by:ilaird
ID: 13723850
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
 
LVL 19

Accepted Solution

by:
dakyd earned 1600 total points
ID: 13728086
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
 
LVL 2

Author Comment

by:ilaird
ID: 13729110
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
 
LVL 19

Expert Comment

by:dakyd
ID: 13729461
No sweat, glad to hear you got what you wanted.  Thanks for the points & the "A".  Cheers.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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

810 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