471,872 Members | 1,044 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,872 software developers and data experts.

Dynamically adding function to <DIV > element

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,
Expand|Select|Wrap|Line Numbers
  1. Error  Line 166, Column 28: there is no attribute "onscroll".
  3. <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

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3. function addIEonScroll() {
  4.     var thisContainer = document.getElementById('mainarea');
  5.     if (!thisContainer) { return; }
  7.     var onClickAction = 'scrollmain();';
  8.     thisContainer.onscroll = new Function(onClickAction);
  9. }
  11. window.onload = function() { addIEonScroll(); }
  12. -->
  13. </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.

Attached Files
File Type: zip xml#1.d090227.exec.zip (3.5 KB, 177 views)
Feb 28 '09 #1
8 9777
16,027 Expert Mod 8TB
You should be looking to add it like this:
Expand|Select|Wrap|Line Numbers
  1. function addOnScroll() {
  2.     var thisContainer = document.getElementById('mainarea');
  3.     if (!thisContainer) { return; }
  4.     thisContainer.onscroll = scrollmain;
  5. }
  7. window.onload = addOnScroll;
Feb 28 '09 #2
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. :(

Expand|Select|Wrap|Line Numbers
  1. 6a7,17
  2. > <script type="text/javascript">
  3. > <!--
  4. > function addOnScroll() {
  5. >      var thisContainer = document.getElementById('mainarea');
  6. >      if (!thisContainer) { return; }
  7. >      thisContainer.onscroll = scrollmain;
  8. >  }
  9. > window.onload = addOnScroll;
  10. > -->
  11. > </script>
  12. >
  13. 166c177
  14. < <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..   -->
  15. ---
  16. > <div id="mainarea"><span id="topofdata">***************************** Top of Data ******************************</span><!-- Formatted data follows; do NOT break this line apart or insert additional line breaks..   -->
Feb 28 '09 #3
16,027 Expert Mod 8TB
Does it scroll properly with the onscroll in the markup (but failing validation)?
Mar 1 '09 #4
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.


Attached Files
File Type: zip ehiasm.rex.t175123.zip (10.6 KB, 109 views)
Mar 1 '09 #5
16,027 Expert Mod 8TB
You could use Transitional instead. One other thing: IE doesn't support XHTML, so HTML should be fine.
Mar 4 '09 #6
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

Expand|Select|Wrap|Line Numbers
  1.   var thisContainer = document.getElementById('mainarea');
  2.   if (thisContainer) 
  3.     { 
  4.      var onClickAction = 'scrollmain();';
  5.      thisContainer.onscroll = new Function(onClickAction);
  6.     }  
as the first statements in the function 'setwidth' near the bottom and that works, making me a pretty happy bunny. ;)

Mar 4 '09 #7
8,658 Expert Mod 8TB
because the MIME type is probably set to (or defaults to) text/html, which renders the document as HTML.
Mar 5 '09 #8
16,027 Expert Mod 8TB
Expand|Select|Wrap|Line Numbers
  1. 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?
Mar 5 '09 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Jens Kristensen | last post: by
3 posts views Thread by bissatch | last post: by
8 posts views Thread by localhost | last post: by
2 posts views Thread by Daves | last post: by
reply views Thread by YellowAndGreen | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.