/    Sign up×
Community /Pin to ProfileBookmark

How to prevent layer scroll up when page is refreshing..

Copy linkTweet thisAlerts:
Jun 16.2006

hi..guys..
i have a problem here…

the problem is like this….
i have managed to create a chat application using PHP with the auto refresh…
for the chatting screen, i have used layer to contain all the user chatting messages..as u know..when user keep on typing and sending messages..the layer will eventually and automatically create a vertical scroll…
To retrieve the data from the database…i need to keep the chatting screen(layer page) to be frefreshed in every several seconds…
the problem is..when it is refreshing….the scroll bar in the layer will also be refreshed and the screen will scroll up back to the top of the messages…

so, i wanna ask who knows how to make the scrollbar not to back to top…but stay at the bottom (when page is refreshing)..so that the user can see the latest message they typed…

? any javascript methods or other functions can help this? ?

thanks…

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceJun 16.2006 — [I]objectElement[/I].scrollTop = [I]objectElement[/I].scrollHeight;
Copy linkTweet thisAlerts:
@dethlonauthorJun 19.2006 — dear PHPnovice;

thanks for giving me some clues on doing this...

however..

how actually should i use the "objectElement.scrollTop = objectElement.scrollHeight;" method?

is it like this scenario 1 or 2?? both i have tried....but none of them working...(the scrolling still going up when refreshing...)

(let's say i want to make the distance become 10000 from the top (scenario 2)

[B]scenario 1:[/B]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<script language="JavaScript" type="text/JavaScript">

<!--

function scrollUp()

{

document.Layer1.scrollTop = Layer1.scrollHeight;

}


//-->

</script>

<title>Untitled Document</title>

<META HTTP-EQUIV="refresh" content="2;URL=http://localhost/project/ww.php">

</head>

<body onload = "scrollUp()">

<div id="Layer1" style="position:absolute; left:-1px; top:1px; width:600px; height:100px; z-index:1; overflow: scroll; visibility: visible; background-color: #CCFFFF; layer-background-color: #CCFFFF; border: 1px">

1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

</div>

</body>

</html>



[B]scenario 2 :[/B]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<script language="JavaScript" type="text/JavaScript">

<!--

function scrollUp()

{

document.Layer1.scrollTop = 10000;

}


//-->

</script>

<title>Untitled Document</title>

<META HTTP-EQUIV="refresh" content="2;URL=http://localhost/project/ww.php">

</head>

<body onload = "scrollUp()">

<div id="Layer1" style="position:absolute; left:-1px; top:1px; width:600px; height:100px; z-index:1; overflow: scroll; visibility: visible; background-color: #CCFFFF; layer-background-color: #CCFFFF; border: 1px">

1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

</div>

</body>

</html>



hope to hear reply soon from u...

any doubt just tell me....

my email is [email][email protected][/email]..

? thanks alot~~
Copy linkTweet thisAlerts:
@phpnoviceJun 19.2006 — Change this:

document.Layer1.scrollTop = Layer1.scrollHeight;

to this:

document.getElementById("Layer1").scrollTop = document.getElementById("Layer1").scrollHeight;
Copy linkTweet thisAlerts:
@dethlonauthorJun 19.2006 — dear phpnovice,

i have tried your method......

and it works!!!!

thanks alot..............i am so glad.....thanks thanks thanks!!!!!!

love u~~~ hahaha....
Copy linkTweet thisAlerts:
@phpnoviceJun 19.2006 — You're welcome.

Cheers.
×

Success!

Help @dethlon spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...