Results 1 to 2 of 2

Thread: Scroll right to left

  1. #1
    Join Date
    Mar 2011
    Location
    Katoomba, Australia
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Scroll right to left

    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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 06-30-2011 at 03:12 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •