DHTML InnerHTML problem

[AsciiSmoke]

http://insideout.fcsjobshop.co.uk/cart/search.asp

If you follow this link, click 'Search jobs...', you'll see there are
'more info...' buttons against each job, this changes the 'InnerHTML'
of the display text to a longer version of the same. for some reason
the expanding of the text makes the whole page go screwy.

It doesn't happen on the first 'more info...' button so maybe theres
something about that, that causes it, dunno. absolutely stumped.

Cheers.

AsciiSmoke

[AsciiSmoke]

Well, I've simplified the issue right down now.

If you paste this into a fresh HTML file you'll be able to reproduce it
and I'm sure you'll be as shocked as I was at the fix:
<DIV style="OVERFLOW: auto; HEIGHT:80px">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top">
<script>function ExpandBoxJ000800(){MiniDescJ000800.innerHTML =
LongDescJ000800.innerHTML;}</script>
<a href="javascript://" onClick="ExpandBoxJ000800();">CLICK</div>
<div id="MiniDescJ000800">123<br>456<br>789</div>
<div id="LongDescJ000800" style="position:absolute;
top:-1000000px;
visibility:hidden">123<br>456<br>789<br>ABC<br>DEF <br>GHI123<br>456<br>789</div>
</td>
</tr>
</table>
</DIV>
When you run this you'll notice that the text shifts downwards when you
click the 'CLICK' link. If you change the 'align="center"' code on the
second line to 'align="left"' the problem dissapears!.

It seems that when IE has to re-align the page when dynamically adding
a scrollbar it get's it wrong in this case.
This can also be proved by removing the <div> tag that surrounds the
table (thus removing the dynamically added scroll bar)

So, in the end I've found a way around my issue, but there still seems
to be a bug in IE.

AsciiSmoke

[RobG]

As********@gmail.com wrote:

http://insideout.fcsjobshop.co.uk/cart/search.asp

If you follow this link, click 'Search jobs...', you'll see there are
'more info...' buttons against each job, this changes the 'InnerHTML'
of the display text to a longer version of the same. for some reason
the expanding of the text makes the whole page go screwy.

It doesn't happen on the first 'more info...' button so maybe theres
something about that, that causes it, dunno. absolutely stumped.

Cheers.

AsciiSmoke

Firefox reports use of "MainMenu" in global scope rather than as an
ID (this is an IE-ism). The comp.lang.javascript FAQ suggests a fix:

<URL:http://jibbering.com/faq/#FAQ4_15>

There also seems to be no point in using innerHTML to change the
description. Why change the display property of the div containing
the extended description to 'none' onload. Then when the user clicks
'More information...' change it to ''.

That way users can show/hide whatever, you don't need an explicit
function to hide and show each individual extended description and
non-JavaScript users can see the descriptions too.

--
Rob