PDA

View Full Version : Scroll bar - set where it starts



thb
03-26-2006, 01:36 PM
I have a table with a horizontal scrollbar. I would like to set where the scroll bar starts when the user loads the page. Is this possible?

In other words, if the table were, let's say, a TV guide for all of Monday and only four hours showed at a time, I want to set that the table initially shows 10am -2pm. The user could them scroll back and forth to see other hours.

All tables/images that I see always start with the scroll bar all the way to the left.

Twey
03-26-2006, 01:55 PM
I don't think that's possible, unless you use an iframe to contain the table.

thb
03-26-2006, 02:18 PM
Even with an iframe, can you determine where the scroll bars start?

I was wondering if there was some javascript code, that scrolls?? So load the page and then instantly scroll to the correct location?

.alias.
03-26-2006, 02:19 PM
perhaps you could use scrollTo() in some way if the obj can only scroll left and right it might work.
this works with you normal scroll bar on the actual window but if you adapt it yo something like below it might work
eg

document.onLoad.getElementById("id").scrollTo()

hope it works

Twey
03-26-2006, 02:29 PM
window.scrollTo() is available, as are window.pageYOffset and window.pageXOffset (Gecko) and window.document.body.scrollTop and window.document.body.scrollLeft (IE).

.alias.
03-26-2006, 02:33 PM
Yes but they would only scroll the main window its self.

but im hoping the code there would get the actual element and scroll it rather than the entire page. Because thb TV guide would not take up the whole page. It would just be a part of the page.

Twey
03-26-2006, 02:58 PM
Yes but they would only scroll the main window its self.Or an iframe.

.alias.
03-26-2006, 03:00 PM
Yea it would work an iframe if you wanted to do it with iframes. That would work well actualy. I hope you get it to work

jscheuer1
03-26-2006, 06:07 PM
Well there is the (not universally supported):

element.scrollLeft=value

Or, if your element is position:absolute;overflow:hidden; inside another that is position:relative; then the inner element's style.left can be set.

djr33
03-26-2006, 10:05 PM
When I saw this, I thought it was an easy answer, but I guess not.
If you were doing it vertically, all you'd need to do is use targets and an anchor, but I don't know if there's an equivalent for horizontal stuff. Seems like no.

jscheuer1
03-26-2006, 10:27 PM
No, it actually is rather simple using the nested elements:


<div id="container" style="position:relative;width:400px;height:300px;">
<table id="grid" style="position:absolute;overflow:hidden;">
insert rows and cells here
</table>
</div>
<script type="text/javascript">
onload=function(){document.getelementById('grid').style.left=(document.getelementById('grid').offsetWidth/2-parseInt(document.getelementById('container').style.width)/2)*-1+'px';}
</script>

If you know the table's width, then no script is needed. Simply add its width value and the container's width value, divide by 2 and make it a negative number, that will be the tables initial left value, say the table is 2000px wide:


<div id="container" style="position:relative;width:400px;height:300px;">
<table id="grid" style="position:absolute;left:-1200px;overflow:hidden;">
insert rows and cells here
</table>
</div>

The two above examples will put the table at the center position in the division, adjust the numbers, if needed to use a custom initial position.

.alias.
03-27-2006, 02:48 PM
I never thought about using CSS to postion it but yea that would work. as usual John you are right :p