Scroll right to left [Archive] - Dynamic Drive Forums

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):

<!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.