Dynamically adding function to <DIV > element

[prino]

Hi all,

I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF editor. A fellow member of the PCG has helped me by creating a bit of Javascript to emulate the scrolling and using Google I've now gotten it into a state where it almost passes the W3C Markup Validation Service. However, the one error,

Error  Line 166, Column 28: there is no attribute "onscroll".
 
<div id="mainarea" onscroll="scrollmain();">

seems to defy all my attempts of killing it. I've Googled myself silly, there are lots of links to dynamically modifying DOM elements and I've even found a link in my bookmarks to (Almost) Pure CSS Scrollable Table with Fixed Header, which contains such code. Reduced to what I need, and with re required function-name changed to what I needed, it looks like

<script type="text/javascript">
<!--
function addIEonScroll() {
    var thisContainer = document.getElementById('mainarea');
    if (!thisContainer) { return; }
 
    var onClickAction = 'scrollmain();';
    thisContainer.onscroll = new Function(onClickAction);
}
 
window.onload = function() { addIEonScroll(); }
-->
</script>
 

But it doesn't work (we're talking Firefox 3.0.6) and I end up with a non-scrolling left column (the one with the sequence numbers).

Also, the attached file (with onscroll in the &lt;div&gt; element) loads flawlessly in FF and IE(6), but if I take a somewhat larger (as in 10,000) line file, loading in FF takes a bit longer (~ 10 seconds), but IE6 completely hangs, tried this earlier today before taking the dog for a walk, two hours later it was still no further...

Any hints would be most welcome.

Robert

[acoder]

You should be looking to add it like this:

function addOnScroll() {
    var thisContainer = document.getElementById('mainarea');
    if (!thisContainer) { return; }
    thisContainer.onscroll = scrollmain;
}
 
window.onload = addOnScroll;
 

[prino]

Nope, here is the diff, result is, as expected, because I think this is essentially what I already did, that the sequence-numbers column no longer scrolls. :(

6a7,17
> <script type="text/javascript">
> <!--
> function addOnScroll() {
>      var thisContainer = document.getElementById('mainarea');
>      if (!thisContainer) { return; }
>      thisContainer.onscroll = scrollmain;
>  }
> window.onload = addOnScroll;
> -->
> </script>
>
166c177
< <div id="mainarea" onscroll="scrollmain();"><span id="topofdata">***************************** Top of Data ******************************</span><!-- Formatted data follows; do NOT break this line apart or insert additional line breaks..   -->
---
> <div id="mainarea"><span id="topofdata">***************************** Top of Data ******************************</span><!-- Formatted data follows; do NOT break this line apart or insert additional line breaks..   -->

Robert

[acoder]

Does it scroll properly with the onscroll in the markup (but failing validation)?

[prino]

Yes, it does, that's what's so very annoying! I've made some more changes to it and this is the only thing that stops it from validating error-less for XHTML 1.0 Strict. Very frustrating! New file is attached, bit bigger, has another problem in that it kills off IE6.

Regards,

Robert

[acoder]

You could use Transitional instead. One other thing: IE doesn't support XHTML, so HTML should be fine.

[prino]

IE7 doesn't complain about XHTML and the good news is that I've solved the problem, if validates errorless right now. Rather than trying to add the 'onscroll' to the code in the earlier attachment, I've now added

  var thisContainer = document.getElementById('mainarea');
  if (thisContainer) 
    { 
     var onClickAction = 'scrollmain();';
     thisContainer.onscroll = new Function(onClickAction);
    }  

as the first statements in the function 'setwidth' near the bottom and that works, making me a pretty happy bunny. ;)

Robert

[Dormilich]

@prino
because the MIME type is probably set to (or defaults to) text/html, which renders the document as HTML.

[acoder]

thisContainer.onscroll = scrollmain;

should be enough for lines 3-6. It should've worked onload, but since you've found a reasonable alternative, that's not a problem. Did you manage to solve the IE6 loading problem?