Sections not collapsing properly in Firefox

Discussion in 'Javascript' started by Jeremy Epstein, Oct 16, 2004.

  1. 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
     
    Jeremy Epstein, Oct 16, 2004
    #1
    1. Advertising

  2. Jeremy Epstein

    Fred Oz Guest

    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.
     
    Fred Oz, Oct 16, 2004
    #2
    1. Advertising

  3. Fred Oz <> 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 -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Oct 16, 2004
    #3
  4. Jeremy Epstein

    Fred Oz Guest

    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.
     
    Fred Oz, Oct 16, 2004
    #4
  5. 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
     
    Jeremy Epstein, Oct 16, 2004
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Raman
    Replies:
    6
    Views:
    4,726
    santosh
    Aug 3, 2007
  2. Chris K.
    Replies:
    4
    Views:
    878
    Bergamot
    Jun 4, 2008
  3. dorayme

    Re: Div not collapsing in IE

    dorayme, Sep 7, 2008, in forum: HTML
    Replies:
    4
    Views:
    637
    dorayme
    Sep 8, 2008
  4. Chris Snyder

    Collapsing sections of a web page - ideas?

    Chris Snyder, Jan 15, 2004, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    108
    Chris Snyder
    Jan 15, 2004
  5. john
    Replies:
    2
    Views:
    246
Loading...

Share This Page