Saving position in Horizontal Div Scroller

[minli98]

Hi,

I am trying to create a css-based horizontal div scroller (a div that allows user to scroll the content left and right).

Here's what I have:

#window{
 position:relative;
 border:solid 2px;
 width:760px;
 height:330px;
}
#windowscroll{
 top:0px;
 left:0px;
 margin:0;
 padding:0;
 overflow:auto;
}
#content{
 margin:0;
 padding:0;
}

<div id="window">
  <div id="windowscroll">
    <div id="content">
        Item1...Item2...Item3...Item4 ...
    </div>
  </div>
</div>

This scroller works fine, but here's my problem: say a user scrolls to the right, and sees an item that she likes. She clicks on it and is taken to the page for that item. I would like to save in a cookie the position of the scroller (how far to the right she has scrolled to just before exiting the page), so that when she returns to the page, she will be taken back to where she was.

My question is what element controls how far to the right she has scrolled to? Say she has scrolled 200px to the right, when she returns to the page what element shall I set to 200px in order to return her to her last position?

I would have thought, it should be the left=-200px in #content, but it doesn't work for me. Any suggestion?

Regards,
Min

 

[kaht]

Pull the scrollLeft value from the div when the page is submitted, and reset the same value after the page has reloaded.

[B][I]when submitting:[/I][/B]
cookievalue = document.getElementById("divName").scrollLeft;


[B][I]on page reload[/I][/B]
document.getElementById("divName").scrollLeft = cookieValue;

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[minli98]

Hi Kaht,

Thank you for your help. I managed to get it working for IE6.0, but I notice an annoying quirk with Firefox (1.0.7).

I've uploaded a sample to

http://65.36.249.254/temp/forum/viewSelection.htm

To illustrate the quirk, do the following:
1. Scroll to the right up to a point where the scrollbar is just below Widget 10.
2. Click on Widget 10.
3. Go back to the previous page

Notice that the scrollbar position has now shifted to the left. And when you move the scrollbar, you can see that the content div suddenly shifts to the left and re-aligns with the scrollbar.

Any idea how I can fix this?

Regards,
Min

 

[kaht]

Don't cache your pages?

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[minli98]

I don't think we can afford to not cache the pages, as this would be a main page that users repeatedly hit.

Any other suggestions?

 

[BillyRayPreachersSon]

It works fine for me in Fx 1.5 - is it still broken for you in Fx 1.0.7?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[minli98]

Unfortunately, yes. Haven't had the time to install v1.5, but if I can't fix it for 1.0.7 then I don't think I can use it. I don't think the majority of people have upgraded yet.

Min

 

[BillyRayPreachersSon]

Does pageXOffset help for Firefox?

http://www.mozilla.org/docs/dom/domref/dom_window_ref80.html

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[minli98]

Dan,

I changed scrollLeft to pageXOffset, but unfortunately the problem is still there.

Min