Scroll right to left

**colourmind** · 06-27-2011, 10:39 AM

Hi

I need to make a large horizontally scrolled file, and I need the page to open with the scrollbar in the centre of the image, rather than on the left hand side as usual, so the user can decide whether to scroll 'previous' or 'after'.

Is this possible?

**jscheuer1** · 06-28-2011, 09:31 AM

Here's one way (requires jQuery Library Google Code API, highlighted):

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var w = $(window), p = $('#biggie'), wW, pO, pW;
	$(new Image()).load(function(){
		if((pO = p.offset().left) + (pW = p.outerWidth()) > (wW = w.width())){
			w.scrollLeft(pO + (pW - wW) / 2);
		}
	}).attr('src', p.attr('src'));
});
</script>
<style type="text/css">
#biggie { /* Width and Height Styles Optional */
	width: 1500px;
	height: 1000px;
}
</style>
</head>
<body>
<img id="biggie" src="1st.jpg" alt="original image" title="">
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/side/hscroll.htm

Added Later:

I was playing around with this a bit more and found a way to animate the center position into view. Let me know if you're interested in that.

Thread: Scroll right to left

Thread Tools

Search Thread

Scroll right to left

Bookmarks

Bookmarks

Posting Permissions