Setting position within a CSS scrollable window??? 1

[theniteowl]

I have a scrollable div tag with a large amount of information in it. On displaying the page with this scrollable div I would like the information in the middle of the div to be centered in the window.

Any easy way to do this?

Why? This is a calendar loaded from a database and I want to be able to display a month prior and a month future but have the current week be the one centered on the screen when it is first displayed.

Is there an easy way to do this? Can the properties for the scrollbars be determined and set to automatically control the position? I have never worked with these before. I have been searching but have not found anything yet and any advice would be appreciated.

BTW, I only have to code for IE 5.5 and up, no other browsers.

Thanks.

 

[BillyRayPreachersSon]

You would need to use JavaScript or VBScript to do this. Personally, I'd use JavaScript (but I'm biased ;o) and something like the scrollTo, scrollBy, or scrollIntoView methods.

I'd ask in the JavaScript forum (forum216) if you need more help with those.

Dope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[ChrisHunt]

Could you not link to a named anchor on the page? Put this where you want visitors to start from:

<a name="start" id="start"></a>

and link to it like this:

<a href="calendar.htm#start">Calendar</a>

That said, I don't know how/whether this would work in a CSS scrolling div.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

Good point, Chris... I've just realised that the scrollIntoView method I mentioned would probably suffer from the same problem as using anchors - they may only scroll within the context of the window, not a scrollable div.

I guess we'll find out soon enough!

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[theniteowl]

Yesterday I discovered the scrollTop property which allows me to push the scroll bar down where I need it.
This seems to be what I need but I will have to look at the other properties you mentioned and see what they are capable of also.

The only odd thing I rant into was this: I setup a test page with a scrollable div on it. At the bottom of the page within script tags I used some javascript to directly access and set the scrollTop property so that once the page finished displaying it would then push the scrollbar down.
But no matter what I set the scrollTop value to it only pushed down a small amount.
I moved the code into a function and then called that function from where it used to execute directly and now it works perfectly.
I am not sure why it would not be as effective directly as it is when called as a function but the code was not otherwise changed. Perhaps the first method was causing a change before the page dimensions had fully resolved themselves or somehting odd like that.

This code is for a calendar. I want to load calendar data for one month prior and one month post of the current week, build the calendar display within the scrollable div and set the position so that the current week is the one centered in the window. This seems to do the trick.

Now I have another obstacle and that is, if I have a scrollable window and the person wants to scroll past the currently loaded information I need another indicator to tell the script to go and grab more data and rebuild the calendar display. If I went without a scrollable window then up or down arrows would suffice as the trigger, it just would not be as quick or efficient.
I have to think about it a bit.

Thanks for the help.