Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Acheving TAB based display.

Posted on 2005-04-27
4
Medium Priority
?
139 Views
Last Modified: 2010-04-09
Hi guys,

         Here is the requirement,  i have information coming from database to jsp, which i have to display on different tabbed panels.  I dont need tabs to navigate to another page, but need three tabs with information in them, but only when a particular tab is clicked will the information related to that tab be displayed on screen.

        Can anyone help me with this !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  

        Using DIV tags, with ILAYER tags, etc., will help... someone told me but i dont know exactly how to use them...  If you can show me three tabs with static data in them, i can convert that to use the data that i am getting from database.

Thank You,
0
Comment
Question by:letsbedecent
  • 3
4 Comments
 
LVL 13

Expert Comment

by:StormyWaters
ID: 13881820
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 13881827
Ah, yes, and ILAYER no longer exists. Don't use it. I assume that was just an example.
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 2000 total points
ID: 13881922
Stormy, that example uses iframes.
What (s)he wants is to have all the data in one page -> using javascript is probably the best.
So, here is my code example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Javascript Tabbed Layout</title>
<script type="text/javascript">
<!--

var numberOfTabs = 3;
var currentTab   = null;
var currentLink  = null;

function tab_show(tabidx) {

  if (currentTab != null) {
    currentTab.className  = "HiddenTabDiv";
    currentLink.className = "";
  }
  currentTab  = document.getElementById("tab" + tabidx);
  currentLink = document.getElementById("link" + tabidx);
  currentTab.className  = "VisibleTabDiv";
  currentLink.className = "Selected";

}

function tab_init() {

  for (var tabidx = 1; tabidx <= numberOfTabs; tabidx++) {
    curr = document.getElementById("tab" + tabidx);
    curr.className = "HiddenTabDiv";
  }

  // default selection = 1
  var selected = 1;

  // get the selection from the url search (basic implementation)
  var search = document.location.search;
  if (search.length == 2) {
    search = search.substring(1,2);
    if (0 < search && search <= numberOfTabs) {
      selected = search;
    }
  }
  tab_show(selected);

}

//-->
</script>
<style type="text/css">

body {
  background: black;
  color: beige;
}

div.TabNav {
  height: 1px;
}

div.TabNav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

div.TabNav ul li {
  float: left;
}

div.TabNav ul li a {
  display: block;
  padding: 0 1em;
  margin-right: .3em;
  color: lightblue;
  background-color: dimgray;
  border: 1px solid lightblue;
  border-bottom: none;
  text-decoration: none;
}

div.TabNav ul li a:hover {
  color: white;
  background-color: gray;
}

div.TabNav ul li a.Selected,
div.TabNav ul li a.Selected:hover {
  color: dimgray;
  background-color: lightblue;
}

div.HiddenTabDiv {
  display: none;
}

div.VisibleTabDiv {
  color: black;
  background-color: lightblue;
  clear: left;
  display: block;
  border: 1px solid lightblue;
  padding: 1em;
}


</style>
</head>
<body onload='tab_init();'>

  <div class="TabNav">
    <ul>
      <li><a id="link1" href="javascript: tab_show(1)">First</a></li>
      <li><a id="link2" href="javascript: tab_show(2)">Second</a></li>
      <li><a id="link3" href="javascript: tab_show(3)">Third</a></li>
    </ul>
  </div>

  <div class="VisibleTabDiv" id="tab1">
    Tab 1
  </div>

  <div class="VisibleTabDiv" id="tab2">
    Tab 2
  </div>

  <div class="VisibleTabDiv" id="tab3">
    Tab 3
  </div>

</body>
</html>
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 13881928
I'm sorry, I missed that part.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

581 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