Hide/Show Multiple Div Centered (in firefox and ie)

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>
 
P

pr

Joshua said:
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" >

You almost certainly mean <html>. You also need a <head>, and normally
the script would go there. HTML Tidy is your friend:

http://tidy.sourceforge.net/
<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');
}

Yoinks! Try this:

function toggleTab(t) { /* use an initial cap only for constructor
functions */
var i, d;
for (i = 1; i < 6; i++) {
d = document.getElementById("div" + i);
d.className = (i == t) ? "visible" : "hidden";
}
return false;
}

We'll come to className in a minute.
function showhide(o, v)
{
if (v=='visible')
{
o.style.top=20;
}
o.style.visibility = v;
}

Well you /could/, but you're better using CSS. Stick this in the <head>
we mentioned:

<style type="text/css">
.visible { display: block; top: 2ex; } /* use exes, ems or
percents, not px: CTRL +
mousewheel to see why */

.hidden { display: none; }
</style>

These are the classes used in className.
</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>

Avoid 'javascript:' urls - instead:

<a href="noscript.html" id="A1" onclick="return toggleTab(1)">

where noscript.html is where you go when scripting's turned off.
<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;" >

You can lose that style attribute now.
<br />
Home
</div>
....
 
P

pr

Randy said:
pr said the following on 10/18/2007 8:20 AM:

<a href="thisPageURL.php?1" .....>

And then the server can toggle the div's when script isn't present :)

Even better.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top