Re: IE7 -- What a lousy browser
Posted: Sun Jan 11, 2009 11:09 pm
Well first the code and then a basic explanation...
What has to happen is you need to first check the clientHeight of the overflow element (scroll_id where the element scrolls).
Then you need to subtract the clientHeight from the scrollHeight which gives you the difference.
Any way if you look at the code this essentially is a dynamic way of scrolling regardless of the height of the overflow element, even if you resize it in say Webkit with the CSS3 resize property.
Another reason it's written this way is so that if your scrollbar is at the bottom of the overflow element it will automatically continue to scroll to the bottom when you AJAX to check for new messages.
However if your scrollbar is not at the bottom then we must presume (for the sake of technical design) that the visitor is reading older messages. It would be rude for us to automatically scroll each time we check for new messages!
Any way I have not yet implemented a work around for IE though I do know what I'm likely to try first. I currently have JavaScript use setTimeout with a number (representing the id of the last message's divisible element) so it increments each time. Any way IE won't automatically scroll by default unless you manually scroll down though it will scroll once the element gains overflow and you manually scroll to the bottom. So the trick is to determine the height of each chat div up until it matches the clientHeight of the overflow element. Once it reaches that you'll want to have a special function (or part of your script) automatically scroll that one time (only). It's obnoxious as hell and it's necessary for even IE8!
...and my latest project is an AJAX chat room too.
My baby is about 80% complete on critical functionality (as far as I can tell) and is about 10KB (uncompressed) while working in all browsers including as far back as IE 5.5. I'm taking special care to do a few things. First and foremost I'm going to dump as much load on to the client as I can. For example if you curse in the chat room the server won't do anything but I'll likely regex it at the client. It's also almost completely W3C DOM compliant (at the moment) so I can interact with the DOM dynamically as much as I want. I'll be exploding things soon via JavaScript (JavaScript calls it split) once I get to the AJAX POST to record messages in MySQL though that won't be until later tonight. I've got a lot of goodies planned to spice up the chat room as well but I want to get the critical parts working first. My chat room will be a registered feature only though. Any one who is curious is welcomed to have a look at the design an development screenshots I've been taking as I've made reasonable steps of progress in Firefox.
Code: Select all
var cm_id = document.getElementById('scroll_id'); var cm_scroll = cm_id.scrollHeight; var cm_client = cm_id.clientHeight; var cm_difference = cm_scroll - cm_client; var cm_top = cm_id.scrollTop; if (cm_difference == cm_top) {var scroll = '1';} if (cm_difference == cm_top) {cm_id.scrollTop = cm_id.scrollHeight;}Then you need to subtract the clientHeight from the scrollHeight which gives you the difference.
Any way if you look at the code this essentially is a dynamic way of scrolling regardless of the height of the overflow element, even if you resize it in say Webkit with the CSS3 resize property.
Another reason it's written this way is so that if your scrollbar is at the bottom of the overflow element it will automatically continue to scroll to the bottom when you AJAX to check for new messages.
However if your scrollbar is not at the bottom then we must presume (for the sake of technical design) that the visitor is reading older messages. It would be rude for us to automatically scroll each time we check for new messages!
Any way I have not yet implemented a work around for IE though I do know what I'm likely to try first. I currently have JavaScript use setTimeout with a number (representing the id of the last message's divisible element) so it increments each time. Any way IE won't automatically scroll by default unless you manually scroll down though it will scroll once the element gains overflow and you manually scroll to the bottom. So the trick is to determine the height of each chat div up until it matches the clientHeight of the overflow element. Once it reaches that you'll want to have a special function (or part of your script) automatically scroll that one time (only). It's obnoxious as hell and it's necessary for even IE8!
...and my latest project is an AJAX chat room too.