This is what I have working so far. It is coded specifically for IE 6. If anybody wants to critique, comment, improve, I am most open to suggestions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Scrolling Tests</title> <style type="text/css"> body { margin: 0; padding: 10px; } div#container { position: relative; overflow: hidden; border: 2px solid black; } div#colHeaders { width: 400em; height: 120px; position: absolute; top: 0; left: 200px; background-color: #8093A4; } div#colHeaders table { position: absolute; bottom: 0; } div#rowHeaders { width: 200px; height: 1280px; position: absolute; top: 120px; left: 0; background-color: #D78F96; } div#content { position: absolute; top: 120px; left: 200px; overflow: auto; } div#corner { position: absolute; top: 0; left: 0; height: 120px; width: 200px; background-color: white; } div#colHeaders table, div#content table { width: 400em; } td { border: 1px solid #002649; width: 5em; height: 1em; } </style> <script type="text/javascript"> var t; function adjustScroll() { containerWidth = document.documentElement.clientWidth - 24; containerHeight = document.documentElement.clientHeight - 24; document.getElementById('container').style.width = containerWidth + 'px'; document.getElementById('container').style.height = containerHeight + 'px'; contentWidht = containerWidth - 200; contentHeight = containerHeight - 120 document.getElementById('content').style.width = contentWidht + 'px'; document.getElementById('content').style.height = contentHeight + 'px'; document.getElementById('colHeaders').style.left = 200 - document.getElementById('content').scrollLeft; document.getElementById('rowHeaders').style.top = 120 - document.getElementById('content').scrollTop; document.getElementById('horizontalScroll').value = document.getElementById('content').scrollLeft; document.getElementById('verticalScroll').value = document.getElementById('content').scrollTop; t = setTimeout("adjustScroll()",10); } </script> </head> <body onload="adjustScroll();"> <cfoutput> <div id="container"> <div id="colHeaders"> <table> <tr> <cfloop from="1" to="80" index="i"><td>#i#</td></cfloop> </tr> </table> </div> <div id="rowHeaders"> <table align="right"> <cfloop from="1" to="80" index="j"><tr><td>#j#</td></tr></cfloop> </table> </div> <div id="content"> <table> <cfloop from="1" to="80" index="i"><tr><cfloop from="1" to="80" index="j"><td>#i#-#j#</td></cfloop></tr></cfloop> </table> </div> <div id="corner"> <form> <input id="horizontalScroll" /> <input id="verticalScroll" /> </form> </div> </div> </cfoutput> </body> </html> -------------- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA --------- | 1 | | --------- Binary Soduko | | | --------- "C code. C code run. Run code run. Please!" - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting, up-to-date ColdFusion information by your peers, delivered to your door four times a year. http://www.fusionauthority.com/quarterly Archive: http://www.houseoffusion.com/cf_lists/message.cfm/forumid:4/messageid:246990 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
