IE problem with small bit of Javascript

12-01-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.visib ility='hidden';
document.getElementById('optionalDiv').style.displ ay='none';

function makeOptionalDivVisible() {
document.getElementById('optionalDiv').style.visib ility='visible';
document.getElementById('optionalDiv').style.heigh t='500px;'
document.getElementById('optionalDiv').style.overf low='auto';
document.getElementById('optionalDiv').style.displ ay='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>

12-01-2004

lawrence wrote:
[...]
> document.getElementById('optionalDiv').style.heigh t='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.heigh t='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>

12-01-2004

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.visib ility='hidden';
> document.getElementById('optionalDiv').style.displ ay='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.visib ility='visible';
> document.getElementById('optionalDiv').style.heigh t='500px;'
> document.getElementById('optionalDiv').style.overf low='auto';
> document.getElementById('optionalDiv').style.displ ay='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

12-02-2004

RobG wrote:
> lawrence wrote:
> [...]
> >
document.getElementById('optionalDiv').style.heigh t='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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
What is the point of having 16 bit colour if a computer monitor can only display 8 bit colour? How do you edit 16 bit colour when you can only see 8 bit?	Scotius	Digital Photography	6	07-13-2010 03:33 AM
Reversing Bit Order.. i.e. MSB becomes bit 0, LSB becomes bit 15	benn686@hotmail.com	C++	9	08-22-2007 12:13 AM
"LoadLibrary" of a 32 bit so with 64 bit java on a 64 bit machine	markryde@gmail.com	Java	3	01-19-2007 10:30 PM
64 bit - Windows Liberty 64bit, Windows Limited Edition 64 Bit, Microsoft SQL Server 2000 Developer Edition 64 Bit, IBM DB2 64 bit - new !	vvcd	Computer Support	0	09-17-2004 08:15 PM
64 bit - Windows Liberty 64bit, Windows Limited Edition 64 Bit,Microsoft SQL Server 2000 Developer Edition 64 Bit, IBM DB2 64 bit - new!	Ionizer	Computer Support	1	01-01-2004 07:27 PM