Jump to content

Textarea Scroll Works In Ie But Not In Ff


tal
 Share

Recommended Posts

helloi am writing a chat, and having a problem with scrolling my textarea to the bottom after every ajax call, but only in FF, it seems to me like it does scroll and instantly jumps to the top again, while in IE8 it just scrolls to the bottom this is my code belowi would thank you a lot if you could take a look at itthank youTal---------------------------------------------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir=rtl> <head> <title>chat</title> <link rel="stylesheet" type="text/css" href="css/general.css" /> <style> div.detail { position:absolute; right:0px; font-family:arial,Sans-serif; font-size:200%; font-weight:bold; } </style> <script type="text/javascript"> <!-- function refresh() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } else { //think about what to do insted of the alert alert("Your browser does not support XMLHTTP!"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.chat_form.read_text.value=xmlhttp.responseText; } } xmlhttp.open("GET","im_chat_response.php",true); xmlhttp.send(null); document.chat_form.read_text.scrollTop=document.chat_form.read_text.scrollHeight; setTimeout("refresh()",5000); } //--> </script> </head> <body> <div class="content" style="width:384px;"> <img src="<?php echo $image_src ?>" width="384" height="602" border=0 style="z-index:-1;"> <!--==========form filling===============================================--> <form name="chat_form" method=post action="im_chat_update.php"> <div class="detail" style="width:354px;height:360px;position:absolute;top:190px;right:20px;"> <input type="hidden" name="file_name" value="<?php echo $file_name ?>"> <!--==========massage reading====================================--> <textarea name="read_text" id="read_text" rows="4" cols="20" style="width:340px;height:130px;position:absolute;top:5px;right:0px;font-family:arial,Sans-serif;font-size:50%;"><?php echo $file ?></textarea> <!--==========massage writing=====================================--> <textarea name="write_text" rows="4" cols="20" style="font-family:arial,Sans-serif;font-size:50%;width:340px;height:100px;position:absolute;top:180px;right:0px;" tabindex=0></textarea> <!--==========submit===========================================--> <input type="image" name="update" src="" value="submit" class="hidden" style="width:354px;height:30px;position:absolute;top:329px;right:-3px;" tabindex=3 /> </div> </form> </div> <script type="text/javascript"> <!-- refresh(); //var int=self.setInterval("refresh()",3000) //--> </script> </body></html>

Link to comment
Share on other sites

document.chat_form.read_text.scrollTop=document.chat_form.read_text.scrollHeight
IE still lets you use names and dot notation to get a reference to a page element, such as a form, but Firefox follows the W3 Standard and does not allow this. You have been using a VERY old technique. I guess you've been reading very old programming books or looking at very old code.Once you have a form reference, the W3 Standard lets you use names and dots to get a reference to a form element. Strictly speaking, only form elements and frames can have a name property.Unless you're writing a function that can operate on ANY form, and you're using a special naming system, it's usually better to get a reference to a form element using a different technique, like an id reference:
var el = document.getElementById("read_text");el.scrollTop=el.scrollHeight;

The id technique has been Standard since year 2000, so it's actually pretty old also. Admittedly, not all browsers adopted this standard immediately. Still, any code that gets references without it probably needs to be rewritten. Look out also for code that references document.all or document.layers. Code like that won't work consistently across browsers, if it even works at all.If you continue to have problems, it might be because your element uses the same string for the name property and the id property. I remember having some problems with that in the past. I always keep them distinct, more out of habit than anything I remember clearly. It's worth a try.

Edited by Deirdre's Dad
Link to comment
Share on other sites

thank you for correcting my code Deirdre's Dadbut it still behaves the same as beforethat is with FF 3.5.3 it does scroll to the bottom but then instantly scrolls beck to the topunlike IE8 where it scrolls to the bottom and stays therei now got a line as var read_text_id=document.getElementById("read_text_id");in the top of my refresh () function and line as read_text_id.scrollTop=read_text_id.scrollHeight;at the bottom of refresh ()thanks for the help any wayTal

Link to comment
Share on other sites

I got so hung up on the old-style code I didn't notice the AJAX stuff.Since you're operating asynchronously, you're adjusting the scroll before the responseText arrives and gets written into the textarea. So, yes, it jumps to the bottom immediately, and when the response arrives, it jumps back to the top. I can only guess that different browsers handle the scroll position differently when the textarea value gets changed. IE seems to preserve it; FF seems to start from scratch.Try putting the scroll statement in your readyState function, AFTER you update the textarea value.

Link to comment
Share on other sites

that is great Deirdre's Dadit did it now the scrolling is done as i wish now i see it is the readyState part that realy does the change if(xmlhttp.readyState==4){read_text_id.value=xmlhttp.responseText;read_text_id.scrollTop=read_text_id.scrollHeight;}as before i thought it was the send methodxmlhttp.send(null);-----------------------------------it is not the same subject but i do have another issuei am having a problem refreshing the text in IE (it works fine in FF)what i do is -write to a plain text file with a form submit from my write_text <textarea>-get back to my chat-and while in the chat refresh every 5 seconds with the ajax response from the plain text filethe symptom is when i write in IE it writes to the file but does not refresh after getting back to the chat (not even what i wrote right now and sent to the plain text file)is there any cash that i need to empty with IE ?thank you very much i really apprishiate the help you giveTal

Edited by tal
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...