Set the scrollbar to the bottom after reloading an IFRAME

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

Set the scrollbar to the bottom after reloading an IFRAME

Post by SBukoski »

I'm writing a chat script (mostly for my own learning purposes since I know there are a ton of them out there) and I'm using several IFRAME objects to handle the different sections of the chat. One IFRAME points to a PHP file which displays all the chat text which has been typed.

When the user enters new text, another invisible IFRAME is run which posts the message to the database, and then the IFRAME containing the transcript is reloaded. I do all this via JavaScript as outlined below:

Code: Select all

function sndMessage(usrId) {
	window.frames.runphp.location.href = 'sendmsg.php?user_id='+usrId+'&msgtxt='+document.postmsg.msgtxt.value;
	window.frames.winTalk.location.href = 'talk.php';
	document.postmsg.msgtxt.value = '';
	document.postmsg.msgtxt.focus;
	return false;
}
Now, when the transcript iframe is reloaded, the scrollbar is always at the top most position. How can I make this so upon reload, it positions the scrollbar at the bottom of the iframe?
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

Post by SBukoski »

Or better yet, since it could happen, have the scrollbar set to the same position it was at prior to the page reload.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

have each "message" have a <a name="#message_number"> and when you call it, the last messageon your screen will be the message number.

that should have the desired affect
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post by JAM »

Run these on single pages for more ideas. (Displaying the usage of scrollTo()).

Code: Select all

<script type="text/javascript">
var i = 0
function populate() &#123;
    document.getElementById("mydiv").innerHTML += "this is line " + ++i + "<br />"
    scrollTo(0,document.getElementById("mydiv").offsetHeight)
&#125;
</script>
<body onload="setInterval(populate,100)">
<div id="mydiv"></div>

Code: Select all

<script type="" language="JavaScript">
    function toTop() &#123;
        self.scrollTo(0, 0)
    &#125;
</script>

<?php
 echo str_repeat('<br />',200);
?>

<form action="" method="POST" id="myForm">
<input type="Button" name="" value="Top" id="Top" onClick=toTop()>
</form>
Post Reply