IE problem with small bit of Javascript

Discussion in 'Javascript' started by lawrence, Dec 1, 2004.

  1. lawrence

    lawrence Guest

    I've a big form with lots of options, and to keep things simple most
    of the options are hidden in an invisible DIV. The basic options are
    visible from the start. If people want the advanced options, they
    click the "More Options?" link. You can see below a bit I'm using in
    the middle of my forms to start the hidden DIV. The Javascript you see
    works everywhere but in IE. On Netscape or FireFox, when the "More
    Options" link is clicked, the hidden DIV becomes visible and becomes
    500 pixels tall. On IE 6.0, however, the DIV becomes visible but only
    gets a height of a few pixels - almost nothing is visible inside. Why
    is this???





    <input type="Submit" value="Click here when done"> <br /> <br />
    <script language="javascript">
    document.getElementById('optionalDiv').style.visibility='hidden';
    document.getElementById('optionalDiv').style.display='none';

    function makeOptionalDivVisible() {
    document.getElementById('optionalDiv').style.visibility='visible';
    document.getElementById('optionalDiv').style.height='500px;'
    document.getElementById('optionalDiv').style.overflow='auto';
    document.getElementById('optionalDiv').style.display='block';

    }
    </script>
    <a href="#optionalDiv" onclick="makeOptionalDivVisible();">More
    options?</a>
    <div id="optionalDiv" class="optional">
    <h2>This section is Optional</h2><h4>for more advanced and detailed
    control</h4>
    <hr>
    lawrence, Dec 1, 2004
    #1
    1. Advertising

  2. lawrence

    RobG Guest

    lawrence wrote:
    [...]
    > document.getElementById('optionalDiv').style.height='500px;'

    [...]

    The rest of the code could do with a tidy-up (see below signature) the
    quick fix may be to move the semi-colon to outside the quotes.

    document.getElementById('optionalDiv').style.height='500px';

    I had to fill in quite a bit of code to get the snippet to work, so
    I've fixed a few other things too - I'll post a full explanation if
    you like. I haven't used feature detection, I've assumed you've done
    that in the real page...

    Also, if you are using the display attribute to hide the div, you don't
    need to mess with visibility too - just use display.

    --
    Rob
    In the head:
    <script type="text/javascript">
    function hideDiv() {
    var a = document.getElementById('optionalDiv');
    // a.style.visibility='hidden';
    a.style.display='none';
    }
    function makeOptionalDivVisible() {
    var a = document.getElementById('optionalDiv');
    alert(a)
    // a.style.visibility='visible';
    a.style.height='500px';
    a.style.overflow='auto';
    a.style.display='block';
    }
    </script>
    ..
    Add an onload function:
    <body onload="hideDiv();">
    ..
    Write the html
    <form action="">
    <input type="Submit" value="Click here when done"> <br /> <br />
    <a href="#optionalDiv"
    onclick="makeOptionalDivVisible();">More options?</a>
    <div id="optionalDiv" class="optional">
    <h2>This section is Optional</h2><h4>for more
    advanced and detailed control</h4>
    <hr>
    </div>
    </form>
    RobG, Dec 1, 2004
    #2
    1. Advertising

  3. lawrence

    RobG Guest

    lawrence wrote:
    [...]

    Better to post functional (though minimal) code, otherwise the bits we
    fill in may be where the real issue is:

    <form action="">

    >
    > <input type="Submit" value="Click here when done"> <br /> <br />


    I presume you are using HTML 4, so use <br>

    > <script language="javascript">


    Ditch language attribute, replace with type:

    <script type="text/javascript">

    > document.getElementById('optionalDiv').style.visibility='hidden';
    > document.getElementById('optionalDiv').style.display='none';
    >


    If hiding using display, there is no real need to also hide using
    visibility. Also, you have placed this code above the HTML element it
    refers to, so the browser will start executing the script possibly
    before the element is created in the DOM. I've put this into the
    header, however if there is a lot of stuff to load after, then the user
    may see the DIV shown, then hidden. In that case, put it just below
    the div.

    For posting, please don't use tabs, use indents of 2 or 4 spaces:

    > function makeOptionalDivVisible() {
    > document.getElementById('optionalDiv').style.visibility='visible';
    > document.getElementById('optionalDiv').style.height='500px;'
    > document.getElementById('optionalDiv').style.overflow='auto';
    > document.getElementById('optionalDiv').style.display='block';


    If using a function multiple times, it's better to replace it with a
    variable but not critical. Also, test for functionality first:

    if( a = document.getElementById('optionalDiv')) {
    // a.style.visibility='visible';
    a.style.height='500px';
    a.style.overflow='auto';
    a.style.display='block';

    > }
    > </script>
    > <a href="#optionalDiv" onclick="makeOptionalDivVisible();">More
    > options?</a>
    > <div id="optionalDiv" class="optional">
    > <h2>This section is Optional</h2><h4>for more advanced and detailed
    > control</h4>
    > <hr>


    So let's finish the markup so it works:

    </div>
    </form>


    --
    Rob
    RobG, Dec 1, 2004
    #3
  4. lawrence

    Guest

    RobG wrote:
    > lawrence wrote:
    > [...]
    > >

    document.getElementById('optionalDiv').style.height='500px;'
    > [...]


    Thanks so much!!! I looked at that a half dozen times without seeing
    what the problem was!!!






    > Also, if you are using the display attribute to hide the div, you

    don't
    > need to mess with visibility too - just use display.


    Good point. I was trying to cover my bases in terms of different
    browser renderings.
    , Dec 2, 2004
    #4
    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. ben

    small bit shifting q

    ben, Mar 4, 2004, in forum: C Programming
    Replies:
    4
    Views:
    378
    xarax
    Mar 5, 2004
  2. Replies:
    3
    Views:
    1,743
    Timothy Bendfelt
    Jan 19, 2007
  3. Replies:
    9
    Views:
    966
    Juha Nieminen
    Aug 22, 2007
  4. Jeff.M
    Replies:
    6
    Views:
    171
    Lasse Reichstein Nielsen
    May 4, 2009
  5. Wouter van Ooijen
    Replies:
    18
    Views:
    349
    Wouter van Ooijen
    Dec 9, 2013
Loading...

Share This Page