Hi guys,
I've got a page that shows a number of packages available for sale. Each
package has a little description, and then a (sometimes long) list of
features for each package. I thought it would be a good idea to let
visitors hide the details for each package, so that they can see just
the summaries together. So I borrowed some code (can't remember from
where), which was designed for expandable/collapsible menu trees, and
used it to show/hide the details of the packages.
The code works fine, but the only problem is that when you hide a
section, the page doesn't resize itself. The text underneath moves up,
but below that a huge empty space is left. The scroll bars should change
to reflect the page's new (smaller) length, but instead they stay the
same, and let you scroll through all the empty nothing at the bottom of
the page.
I've tested the page is IE6 and Firefox 0.9 - I only have this problem
in Firefox, in IE the whole page shrinks and the scroll bars change
accordingly. Any suggestions? I though maybe I need to call some
javascript function to refresh/recalculate the page - I tried using
document.normalize() straight after the section got hidden, but it
didn't help. Any other such functions that might do the trick?
Here's the code:
<script language="javascript" type="text/javascript">
<!--
// DOM function for >4 browsers
function toggle(toggleId, e)
{
if (!e) {
e = window.event;
}
if (!document.getElementById) {
return false;
}
var body = document.getElementById(toggleId);
if (!body) {
return false;
}
var im = toggleId + "_hide";
if (body.style.display == 'none') {
body.style.display = 'block';
if (document.images[im]) {
document.images[im].src = "images/close.png";
}
} else {
body.style.display = 'none';
if (document.images[im]) {
document.images[im].src = "images/open.png";
}
}
if (e) {
// Stop the event from propagating, which
// would cause the regular HREF link to
// be followed, ruining our hard work.
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
}
//-->
</script>
</head>
....
<div onClick="toggle('pkg100', event)">
<p><img src='images/close.png' name='pkg100_hide'></p>
</div>
<div id='pkg100' style='display:block;'>
<p><b><i>Included features: </i></b></p>
....
</div>
And here's the URI of the page (note: you click the little plus/minus
boxes to expand/collapse - I know they're crap, but haven't got round to
making better images yet):
http://www.greenash.net.au/webdesign.php
I'm thinking maybe it's because I'm breaking the golden rule of using
tables as part of the page layout. Maybe if I wholly used DIVs instead,
it would resize properly? And also, I heard that if you have any
elementds set to 'display:none;' when the page loads, Google blocks your
page. Is this true? Would this happen if I set the details to be hidden
when the page loads?
Anyway, any help with the resizing problem would be greatly appreciated.
Thanks,
Jeremy Epstein
GreenAsh Services
www.greenash.net.au
