By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,492 Members | 1,289 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,492 IT Pros & Developers. It's quick & easy.

Sections not collapsing properly in Firefox

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Jeremy Epstein wrote:
[snip]
var body = document.getElementById(toggleId); [snip]

Run your code through the w3c validator (it takes perhaps 10 seconds),
fix the issues, then try again. Even so, your page works OK in Safari.

http://validator.w3.org/

I'd change your "body" variable name to something else purely on the
notion that it's bad form to use a HTML tag name as a JavaScript
variable - but it will not fix your problem.
<div onClick="toggle('pkg100', event)">


I'm somewhat leery of putting an onclick event on a div - some
others here may comment on that (or not...).

Cheers, Fred.
Jul 23 '05 #2

P: n/a
Fred Oz <oz****@iinet.net.au> writes:
I'd change your "body" variable name to something else purely on the
notion that it's bad form to use a HTML tag name as a JavaScript
variable - but it will not fix your problem.


Why? I can't see any problem with using an HTML tag name as a variable,
local or global. Even "body" isn't a problem, since the only attribute
that it might collide with is document.body, but that's safely tucked
into the document object.
> <div onClick="toggle('pkg100', event)">


I'm somewhat leery of putting an onclick event on a div - some
others here may comment on that (or not...).


It's valid HTML, so your only concern might be that some browsers doesn't
understand it. Luckily, that's not any recent browser :)

I think Netscape 4 is the only noticable browser that doesn't undestand
onclick events on div elements. IE 4 does, as does Mozilla.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #3

P: n/a
Jeremy Epstein wrote:
Hi guys,

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.


It works fine in Safari (and IE on Mac), so I downloaded Netscape 7.2
for Mac and it happens in NS too as well as Firefox (and also Camino,
but that's no surprise). The collapse/expand doesn't work at all in
Opera, but that's OK since it doesn't affect the use of the page and
even though they call it 6.03, it's really a beta on Mac IMHO.

I downloaded your page and tried it locally in NS, but the strange
behaviour didn't happen.

I hadn't download your .css file, so I did and the bad behaviour
returned. My guess was that it's a stylesheet problem and nothing to
do with JavaScript. The size of your stylesheet made me nearly give up
right there, but since I'd started I thought I'd have a go.

So I started commenting out slabs of your styles and found it is your
sidemenu style. Get rid of the "height: 100%" entry and most of your
problem is fixed. There is still a slab of blue (200px or so) at the
bottom that isn't there in Safari, I'll let you find that.
Cheers, Fred.
Jul 23 '05 #4

P: n/a
Fred Oz wrote:
So I started commenting out slabs of your styles and found it is your
sidemenu style. Get rid of the "height: 100%" entry and most of your
problem is fixed. There is still a slab of blue (200px or so) at the
bottom that isn't there in Safari, I'll let you find that.


Thanks a million for finding that one, Fred! I have gotten rid of the
"height: 100%" entry for the sidemenu style, and it is looking better
now. I originally put that in to fix a problem I had, when I was using a
layout table for the side menu - but since I replaced that table with
DIV's and CSS (which was quite a while ago), I haven't needed the
attribute - should have gotten rid of it before.

As for the slab of blue at the bottom, I'm getting it too, and it's
really puzzling me. The scrollbars seem to be resizing to an extent now,
but not enough to collapse the page as much as they should be doing.
I've got a feeling that this too is a problem with my CSS: probably some
transparent or borderless DIVs that are extending into the bottom of
the page.

I'll see if I can figure out what's causing it. Thanks for your help -
and my apologies that you had to wade through my messy style sheet - I
will tidy it up as soon as I get a chance!

Peace,
Jeremy
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.