Controling scrolling DIV

job0107 · #1 (**permalink**) 02-12-07, 08:36 PM

Hello All, I have a <div> with a fixed width and height that I use as a window for requiring othe pages using PHPs' require() command. I have three different pages at the moment that are contained in that <div> and their display and visibility properties are toggled off and on with javascript. I have the overflow property of the <div> set to auto so I can scroll the pages thru the <div>s' window. And their position property is set to absolute so each page is on top of the other. Now, let's say that I am viewing page1 and I have to scroll the <div>s' window in order to view the whole page. Now let's say I have scrolled the page and I decide to view page2 instead, so I click on the page2 button and I have page2 in view, but the position of the scroll doesn't reset back to 0,0. It stays where it was set from the first page. My question is : how do you control the <div>s' inner windows' position with javascript or PHP or ?

jfulton · #2 (**permalink**) 02-12-07, 10:23 PM

Could you post some sample code or a link to the page?

job0107 · #3 (**permalink**) 02-13-07, 02:49 AM

Ok Here's the <div> that displays the pages.

Code:

<div id="window_div" style="text-align:center;position:absolute;left:125px;top:219px;width:750px;height:438px;background-color:#ffffe0;border-left:double 4 #000000;border-right:double 4 #000000;overflow:auto;padding-left:16px;padding-right:16px;">
<div id="page0" style="visibility:visible;display:'';"><font style="position:relative;top:50px;font-size:36;">Welcome aboard</font></div>
<div id="page1" style="visibility:hidden;display:none;"><?php require("new1.php"); ?></div>
<div id="page2" style="visibility:hidden;display:none;"><?php require("new4.php"); ?></div>
</div>

As you can see page0 is displayed as defualt. Then with javascript I change the visibility and display properties of the other pages which are both larger than the <div>s' window. When I have page1 or page2 displayed and I scroll the page in the <div> and then toggle the other page to be displayed(page1 or page2) then the scrolled position stays the same. I doesn't reset to the top of the page like I want it to.

jfulton · #4 (**permalink**) 02-13-07, 03:02 AM

Could you post the javascript too?

job0107 · #5 (**permalink**) 02-13-07, 04:05 AM

Code:

function make_visible_1()
{
 document.getElementById("page1").style.visibility = 'visible';
 document.getElementById("page2").style.visibility = 'hidden';
 document.getElementById("page0").style.display = 'none';
 document.getElementById("page1").style.display = '';
 document.getElementById("page2").style.display = 'none';
 }
function make_visible_2()
{
 document.getElementById("page1").style.visibility = 'hidden';
 document.getElementById("page2").style.visibility = 'visible';
 document.getElementById("page0").style.display = 'none';
 document.getElementById("page1").style.display = 'none';
 document.getElementById("page2").style.display = '';
 }

Vicious · #6 (**permalink**) 02-13-07, 04:41 AM

How about this? Haven't checked if it works

Code:

function make_visible_1()
{
 document.getElementById("page1").style.visibility = 'visible';
 document.getElementById("page2").style.visibility = 'hidden';
 document.getElementById("page0").style.display = 'none';
 document.getElementById("page1").style.display = '';
 document.getElementById("page2").style.display = 'none';
 document.getElementById("page1").scrollTop = 0;
 }

job0107 · #7 (**permalink**) 02-13-07, 05:56 AM

Quote:

Originally Posted by Vicious

How about this? Haven't checked if it works

Code:

function make_visible_1()
{
 document.getElementById("page1").style.visibility = 'visible';
 document.getElementById("page2").style.visibility = 'hidden';
 document.getElementById("page0").style.display = 'none';
 document.getElementById("page1").style.display = '';
 document.getElementById("page2").style.display = 'none';
 document.getElementById("page1").scrollTop = 0;
 }

That didn't work. But thanks to you this does:

Code:

function make_visible_1()
{
 document.getElementById("page1").style.visibility = 'visible';
 document.getElementById("page2").style.visibility = 'hidden';
 document.getElementById("page0").style.display = 'none';
 document.getElementById("page1").style.display = '';
 document.getElementById("page2").style.display = 'none';
 document.getElementById("window_div").scrollTop = 0;
 }