IE problem with small bit of Javascript

lawrence · Dec 1, 2004

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>

RobG · Dec 1, 2004

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

lawrence wrote:
[...]

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

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

I presume you are using HTML 4 said:
<script language="javascript">

Ditch language attribute, replace with type:

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>

lkrubner · Dec 2, 2004

RobG said:
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.

Javascript not hiding nested elements simultaneously	2	Apr 5, 2023
Only one table shows up with the information	2	Mar 29, 2023
Add recipes using JavaScript in table	20	Apr 17, 2023
make a div visible - works in IE on a pc but not in IE on a mac	5	Jun 27, 2004
Help with my responsive home page	2	Dec 14, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Please Help?	0	Jul 23, 2022

IE problem with small bit of Javascript

lawrence

RobG

RobG

lkrubner

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads