Hi guys,

I'm trying to build a gallery which displays it's thumbnails horizontally with a scrollbar. Once the user clicks the thumb, a bigger picture is loaded in the other div. The problem is that the scrollbar returns to its zero position after the page refreshes. Is there a simple way to retain the scrollbars position? I have tried some examples but non seem to work.

    5 days later

    Actually you don't need a page refresh at all. In my opinion, this is by far the easiest way to retain the scrollbar in its position, while not annoying the user with an unneeded page reload. However, my answer falls under the client side part of this forum, so this thread might get moved.
    All you need to do is:
    - Either create an image element and append it to the div where you display the full size image (if no image exist)
    - Or update the src attribute of the existing image

    So, when you create the code for your thumbnails, include an onclick event with the filename (or URL if you prefer) of the full size image:

    <script type="text/javascript">
function displayFullSize(src) {
	var d = document;
	var dest = d.getElementById('picGoesHere');

var imgs = dest.getElementsByTagName('img');
if (imgs.length > 0) {
	imgs[0].src = "http://somewhere.com/original/"+src;
}
else {
	var img = d.createElement('img');
	img.alt = "";
	img.src = "http://somehwere.com/original/"+src;
	dest.appendChild(img);
}
}
</script>
</head>
<body>
	<div>
		<img src="http://somewhere.com/thumbnail/thumb1.jpg" alt=""
			onclick="displayFullSize('full1.jpg');"/>
		<img src="http://somewhere.com/thumbnail/thumb2.jpg" alt=""
			onclick="displayFullSize('full2.jpg');"/>
	</div>
	<div id="picGoesHere"></div>

    This obviously requires javascript enabled, but afaik, you can't set the scrollbar position without it anyway. And to do that, you'd

    document.getElementById('yourscrollbar').scrollLeft = NN;

    Where NN is a number you'd have to calculate according to what image was clicked so you know how far you need to scroll.

      3 years later

      Hi Guys,

      Use the below javascript code to retain the horizontal scroll bar position of div.
      "divScroll" is the id of DIV tag. If you want to retain the vertical scrollbar position use "scrollTop" instead of "scrollLeft".

      <script language="javascript" type="text/javascript">
      var scrollPosition;
      / calling the EndRequestHandler whenver Ajax post back happens/
      window.onload = function() {
      Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
      };
      function BeginRequestHandler() {
      scrollPosition = document.getElementById('divScroll').scrollLeft;
      }
      function EndRequestHandler() {
      document.getElementById('divScroll').scrollLeft = scrollPosition;
      }
      </script>

      Thanks,
      Vinay G.

        Write a Reply...