DHTML InnerHTML problem

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View


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.



Re: DHTML InnerHTML problem

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">
    <td valign="top">
     <script>function ExpandBoxJ000800(){MiniDescJ000800.innerHTML =
     <a href="javascript://" onClick="ExpandBoxJ000800();">CLICK</div>
     <div id="MiniDescJ000800">123<br>456<br>789</div>
     <div id="LongDescJ000800" style="position:absolute;

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.


Re: DHTML InnerHTML problem

AsciiSmoke@gmail.com wrote:
Quoted text here. Click to load it

  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:


  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.


Site Timeline