By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,919 Members | 1,043 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,919 IT Pros & Developers. It's quick & easy.

Dynamically adding function to <DIV > element

prino
P: 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, 136 views)
Feb 28 '09 #1
Share this Question
Share on Google+
8 Replies


acoder
Expert Mod 15k+
P: 16,027
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
P: 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
Expert Mod 15k+
P: 16,027
Does it scroll properly with the onscroll in the markup (but failing validation)?
Mar 1 '09 #4

prino
P: 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, 83 views)
Mar 1 '09 #5

acoder
Expert Mod 15k+
P: 16,027
You could use Transitional instead. One other thing: IE doesn't support XHTML, so HTML should be fine.
Mar 4 '09 #6

prino
P: 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
Expert Mod 5K+
P: 8,639
@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
Expert Mod 15k+
P: 16,027
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.