Tabs on a html page with a grid on each tab

Here is a simple page with tabs. I have tried to put a grid on the third tab but the grid does not display correctly. The scrollbar is missing and there are some other unusual behaviours.
I would really like to be able to display a series of tabs with a different grid on each one. Does anyone know why this code does not work?
Thanks for any help.
Chris

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>
<title>DHTML Tabs</title><style type="text/css">
body { background-color: white; }
a.tab {
border-collapse: collapse;
border-style: solid solid none solid;
border-color: black;
border-width: 1px 1px 0px 1px;
background-color: silver;
padding: 2px 0.5em 0px 0.5em;
margin-top: 4px;
font-family: arial;
text-decoration: none;
}
a.tab:hover {
border-color: black;
background-color: white;
}
.panel { border: solid 1px black; background-color: white; padding: 5px; height: 300px; overflow: auto;}
</style>
<script language="JavaScript" type="text/javascript">
var panels = new Array('panel1', 'panel2', 'panel3', 'panel4', 'panel5', 'panel6', 'panel7');
var selectedTab = null;
function showPanel(tab, name)
{
if (selectedTab)
{
selectedTab.style.backgroundColor = '';
selectedTab.style.paddingTop = '';
selectedTab.style.paddingBottom = '';
}
selectedTab = tab;
selectedTab.style.backgroundColor = 'white';
selectedTab.style.paddingTop = '6px';
for(i = 0; i < panels.length; i++)
{
document.getElementById(panels[i]).style.display = (name == panels[i]) ? 'block':'none';
}
return false;
}
</script>


<style>
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>


<script>
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];

var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>

</head>

<body>

<h1>Super-Simple DHTML Tabs</h1>

<a href="" class="tab" onclick="return showPanel(this, 'panel1');">Tab 1</a>
<a href="" class="tab" onclick="return showPanel(this, 'panel2');">Tab 2</a>
<a href="" class="tab" onclick="return showPanel(this, 'panel3');">Tab 3</a>
<a href="" class="tab" onclick="return showPanel(this, 'panel4');">Tab 4</a>
<a href="" class="tab" onclick="return showPanel(this, 'panel5');">Tab 5</a>
<a href="" class="tab" onclick="return showPanel(this, 'panel6');">Tab 6</a>
<a href="" class="tab" onclick="return showPanel(this, 'panel7');">Tab 7</a>
<div class="panel" id="panel1" style="display: none;">
Panel 1
</div>
<div class="panel" id="panel2" style="display: none;">
Panel 2
</div>
<div class="panel" id="panel3" style="display: none;">
<script>

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// set number of rows/columns
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 5);

// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});

// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");

// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});

// write grid html to the page
document.write(obj);

</script>
</div>
<div class="panel" id="panel4" style="display: none;">
Panel 4
</div>
<div class="panel" id="panel5" style="display: none;">
Panel 5
</div>
<div class="panel" id="panel6" style="display: none;">
Panel 6
</div>
<div class="panel" id="panel7" style="display: none;">
Panel 7
</div>
<hr>

</body></html>

Chris

April 2,

Hi Chris

Try using the tab widget here (http://www.phyrix.com/webtabs.html) - hope it helps.

Joe

April 2,

I think problem there is DOCTYPE strict. ActiveWidgets grid only works in 'quirks', not standard-compliant mode.

http://www.activewidgets.com/general.faq.standards/strict.html

Alex (ActiveWidgets)

April 4,

hi yr problem can be resolve if u remove style property in the line -- <div class="panel" id="panel7" style="display: none;"> , in which grid is shown

July 3,

This topic is archived.

Tabs on a html page with a grid on each tab

See also:

Search

New Data Grid

Version 2