target anchor onLoad

david_stev · 08-17-2005, 10:43 AM

I have a page with a div tag styled :

text-align: middle;
clear: both;
overflow: auto;
width: 95%;
height: 175px;

in this div is a list of projects pulled from a db.

This means that the content in the div tag when larger than the div height has a scroll bar at the side to view all the projects. Once the projects area displayed there is a image at the end of each row that when clicked goes to the db and pull back reports for that project. This is all done by passing vars in the querystring pulling info from the db and writing out the appropriate code.

<div>

ref status owner view reports
proj 1 | proj status 1 | owner 1 | +
proj 2 | proj status 2 | owner 2 | +
report1 | report status 1| owner 1 | update report
report2 | report status 2| owner 2 | update report
report3 | report status 3| owner 3 | update report
proj 3 | proj status 3 | owner 3 | +

</div>

My problem is when I click proj 18 all reports are expanded but the page resets and the scroll bar goes up to the top and projects 1, 2, 3
are displayed, meaning the user has to scroll down to see the reports. I have thought that I could pass an anchor value in the querystring, but I am not sure how I would set the page to go to that anchor when the page is loaded.

Thought it may be
<body onLoad="document.nameOfDiv.anchors('nameOfAnchor')">

but this does not work.

Any Ideas???

Kor · 08-17-2005, 11:12 AM

try
var y=50;//the y position of the desired scroll point
document.getElementById('thedivID').scrollTo(0,y)

david_stev · 08-17-2005, 11:20 AM

Just Tried

<body onLoad="document.getElementById('tableContainer').scrollTo(0,50)">

and it did not work.

Kor · 08-17-2005, 12:16 PM

hm... I see no solve than, maybe, build a clipped div and "pseudo-scroll" it using a DHTML scroller....

vwphillips · 08-17-2005, 05:59 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
</head>

<body>
    <div id="ScrollZone" style="width:200px;height:200px;overflow:auto;margin-left:10px;margin-right:20px;">
The quick brown fox 1<br>
The quick brown fox 2<br>
The quick brown fox 3<br>
The quick brown fox 4<br>
The quick brown fox 5<br>
The quick brown fox 6<br>
The quick brown fox 7<br>
The quick brown fox 8<br>
The quick brown fox 9<br>
The quick brown fox 10<br>
The quick brown fox 11<br>
The quick brown fox 12<br>
The quick brown fox 13<br>
<a id="fred" ></a>
The quick brown fox 14<br>
The quick brown fox 15<br>
The quick brown fox 16<br>
The quick brown fox 17<br>
    </div>
<script language="JavaScript" type="text/javascript">
<!--
setTimeout('document.getElementById(\'ScrollZone\').scrollTop=document.getElementById(\'fred\').offsetTop;',200);
//-->
</script>
</body>

</html>

Kor · 08-18-2005, 09:02 AM

nice trick, vwphillips

david_stev · 08-18-2005, 10:51 AM

Tried this and it took me a wee while to get it working in my page, but everything is fine now. Had tried scrollTo, but with no sucess. Tried google for more info as well and was stumped.

Thank You again.