J
Joshua
I'm trying to set up a simple web site that can toggle through
multiple div's. The below code works, but I would like them to be
centered as well (now with the absolute position they are hugging the
side).
Does anybody have any ideas? Thank you.
<html xmlns="http://www.w3.org/1999/xhtml" >
<body onload="ToggleTab(1)">
<script type="text/javascript">
function ToggleTab(t)
{
showhide(document.getElementById('div1'), (t=='1') ? 'visible' :
'hidden');
showhide(document.getElementById('div2'), (t=='2') ? 'visible' :
'hidden');
showhide(document.getElementById('div3'), (t=='3') ? 'visible' :
'hidden');
showhide(document.getElementById('div4'), (t=='4') ? 'visible' :
'hidden');
showhide(document.getElementById('div5'), (t=='5') ? 'visible' :
'hidden');
}
function showhide(o, v)
{
if (v=='visible')
{
o.style.top=20;
}
o.style.visibility = v;
}
</script>
<form id="form1" runat="server">
<div>
<table width=100%>
<tr align=center>
<td align=top>
<div class="BillingNav_Box">
<a href="javascript:void(0)" id="A1"
onclick="ToggleTab('1');">Home</a>
<a href="javascript:void(0)" id="A2"
onclick="ToggleTab('2');">Services</a>
<a href="javascript:void(0)" id="A3"
onclick="ToggleTab('3');">Clients</a>
<a href="javascript:void(0)" id="A4"
onclick="ToggleTab('4');">Case Studies</a>
<a href="javascript:void(0)" id="A5"
onclick="ToggleTab('5');">Contact</a>
</div>
</td>
</tr>
<tr align=center>
<td align=top>
<div id="div1" style="position:absolute;" >
<br />
Home
</div>
<div id="div2" style="position:absolute;" >
<br />
Services
</div>
<div id="div3" style="position:absolute">
<br />
Clients
</div>
<div id="div4" style="position:absolute">
<br />
Case Studies
</div>
<div id="div5" style="position:absolute">
<br />
Contact
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
multiple div's. The below code works, but I would like them to be
centered as well (now with the absolute position they are hugging the
side).
Does anybody have any ideas? Thank you.
<html xmlns="http://www.w3.org/1999/xhtml" >
<body onload="ToggleTab(1)">
<script type="text/javascript">
function ToggleTab(t)
{
showhide(document.getElementById('div1'), (t=='1') ? 'visible' :
'hidden');
showhide(document.getElementById('div2'), (t=='2') ? 'visible' :
'hidden');
showhide(document.getElementById('div3'), (t=='3') ? 'visible' :
'hidden');
showhide(document.getElementById('div4'), (t=='4') ? 'visible' :
'hidden');
showhide(document.getElementById('div5'), (t=='5') ? 'visible' :
'hidden');
}
function showhide(o, v)
{
if (v=='visible')
{
o.style.top=20;
}
o.style.visibility = v;
}
</script>
<form id="form1" runat="server">
<div>
<table width=100%>
<tr align=center>
<td align=top>
<div class="BillingNav_Box">
<a href="javascript:void(0)" id="A1"
onclick="ToggleTab('1');">Home</a>
<a href="javascript:void(0)" id="A2"
onclick="ToggleTab('2');">Services</a>
<a href="javascript:void(0)" id="A3"
onclick="ToggleTab('3');">Clients</a>
<a href="javascript:void(0)" id="A4"
onclick="ToggleTab('4');">Case Studies</a>
<a href="javascript:void(0)" id="A5"
onclick="ToggleTab('5');">Contact</a>
</div>
</td>
</tr>
<tr align=center>
<td align=top>
<div id="div1" style="position:absolute;" >
<br />
Home
</div>
<div id="div2" style="position:absolute;" >
<br />
Services
</div>
<div id="div3" style="position:absolute">
<br />
Clients
</div>
<div id="div4" style="position:absolute">
<br />
Case Studies
</div>
<div id="div5" style="position:absolute">
<br />
Contact
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>