469,612 Members | 1,673 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,612 developers. It's quick & easy.

Dynamically adding function to <DIV > element

prino
4
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".
  2.  
  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; }
  6.  
  7.     var onClickAction = 'scrollmain();';
  8.     thisContainer.onscroll = new Function(onClickAction);
  9. }
  10.  
  11. window.onload = function() { addIEonScroll(); }
  12. -->
  13. </script>
  14.  
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
Attached Files
File Type: zip xml#1.d090227.exec.zip (3.5 KB, 161 views)
Feb 28 '09 #1
8 9664
acoder
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. }
  6.  
  7. window.onload = addOnScroll;
  8.  
Feb 28 '09 #2
prino
4
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..   -->
Robert
Feb 28 '09 #3
acoder
16,027 Expert Mod 8TB
Does it scroll properly with the onscroll in the markup (but failing validation)?
Mar 1 '09 #4
prino
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.

Regards,

Robert
Attached Files
File Type: zip ehiasm.rex.t175123.zip (10.6 KB, 104 views)
Mar 1 '09 #5
acoder
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
prino
4
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. ;)

Robert
Mar 4 '09 #7
Dormilich
8,652 Expert Mod 8TB
@prino
because the MIME type is probably set to (or defaults to) text/html, which renders the document as HTML.
Mar 5 '09 #8
acoder
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 gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.