473,841 Members | 1,693 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Sections not collapsing properly in Firefox

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.normal ize() 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="javas cript" type="text/javascript">

<!--

// DOM function for >4 browsers

function toggle(toggleId , e)

{

if (!e) {

e = window.event;

}

if (!document.getE lementById) {

return false;

}

var body = document.getEle mentById(toggle Id);

if (!body) {

return false;

}

var im = toggleId + "_hide";

if (body.style.dis play == 'none') {

body.style.disp lay = 'block';

if (document.image s[im]) {

document.images[im].src = "images/close.png";

}

} else {

body.style.disp lay = 'none';

if (document.image s[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.stopPropagat ion) {

e.stopPropagati on();

}

}

}

//-->

</script>

</head>

....

<div onClick="toggle ('pkg100', event)">
<p><img src='images/close.png' name='pkg100_hi de'></p>
</div>
<div id='pkg100' style='display: block;'>
<p><b><i>Includ ed 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
4 1625
Jeremy Epstein wrote:
[snip]
var body = document.getEle mentById(toggle Id); [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
Fred Oz <oz****@iinet.n et.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/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #3
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2064
by: Chris Waddingham | last post by:
I am experiencing 2 problems with CDATA sections. These are: 1. Expat appears to be collapsing adjacent linefeeds into one inside CDATA sections. 2. Expat (XML_CharacterDataHandler) returns the wrong len value for CDATA sections containing ']'. I would be grateful of any help you can offer. My XML application contains code like this:
2
7082
by: Dave Matthews | last post by:
Hi folks, I'm writing a web-page editing tool for my company which will allow staff (with no "technical" expertise) to maintain their own Intranet sites. The content for each webpage is stored in the form of XHTML in an XML document (which, in turn, is stored in an XML database). So far so good. However the editing tool must allow users to paste in the contents of MS Word documents. I soon discovered that Word does not generate...
0
1660
by: Spartanicus | last post by:
I've been caught out by what I thought was an Opera 7.5p1 issue: http://www.spartanicus.utvinternet.ie/test/opera7.5p1_css_background_image_issue.htm but as was pointed out to me this is actually a fault in my code which is exposed by the improved CSS standards support in v7.5p1. The top margin on the <h1> collapses with the zero margin on the <body> element to form a single margin equal to the margin specified on the <h1>.
6
1833
by: Andreas Prilop | last post by:
What exactly are Chapters and Sections in the <LINK REL=...> tag? I have put some <LINK REL="Chapter"> tags into http://www.unics.uni-hannover.de/nhtcapri/bidirectional-text.html Is this the intended use? If not - how are Chapters and Sections supposed to be used? Are there any good examples?
5
1901
by: Borris | last post by:
<div style="background-color: blue; width: 500px; height: 300px"> <div style="background-color: red; margin-top: 100px; margin-left: 100px; width: 300px; height: 100px"> </div> </div> Where will the red box be positioned? Even experienced web developers often expect it to be in the middle of the blue box, but instead (on standards-compliant browsers) the blue box is lowered to line up its top edge with that of the red box. This is...
1
1741
by: yb | last post by:
Hi, I'm looking for clarification of css 2.1 specification in section 8.3.1 "Collapsing Margins" The 6th bullet reads "If the top and bottom margins of a box are adjoining ..." I won't paste the whole point here, its too long. But, from this first line does this mean that the element has empty
6
7401
by: Jack | last post by:
Hello, I would like some advice on how to disable the behavior of treeviews to expand and collapse when double clicked upon, but still allow the user to use the plus and minus on each node. Thanks in advance! Jack
5
1970
by: SlowArrow | last post by:
Here collapsing seems to work differently in vb.net 2005 from that I use to see in vb.net 2003: Using the collapsing in vb.net 2003 shows the whole interface of the methods, subroutines, functions, etc, while in vb.net 2005 those parts after the name (arguments, etc) are missing. Is there an option to show them as well, or this is the only working method of the collapsing? What amazed me that the collapsing in the vC.net 2005 shows the...
0
10926
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10609
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10666
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10302
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9445
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7024
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5879
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4081
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3140
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.