SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stop page scrolling in horizontal gallery.

    Stop page scrolling in horizontal gallery.

    Hi all

    I have this simple demo here to illustrate my problem.

    http://www.ttmt.org.uk/forum/gallery/

    It's a list of images float horizontally to the left and a logo above the gallery.

    When you scroll to the right I would like the logo to stay in the same position. To do this
    I have set the position to fixed.

    Because the number of images in the gallery might change I have set the width of container holding the
    images really high so it will cover the width of the image.

    If you scroll to the right to continues to scroll past the last image.

    If I remove the position:fixed from the logo and don't float the images left the page stops scrolling at the last image
    but the logo is no longer in a fixed position above.

    http://www.ttmt.org.uk/forum/gallery/index1.html

    How can I have the logo in a fixed position above the gallery and stop the page scrolling at the last image.

    Thanks in advance for any help.

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>Title of the document</title>
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
      
      <style type="text/css">
        ul#gallery{
          width:30000px;
          margin:80px 0 0 0;
          float:left;
        }
        ul li{
          display:inline;
        }
        ul li img{
          float:left;
          opacity:0.6;
        }
        ul li img:hover{
          opacity:1;
        }
        #header{
          position:fixed;
        }
        #lightbox {
    			position:fixed; 
    			top:0; 
    			left:0; 
    			width:100%; 
    			height:100%; 
    			background:url(overlay.png) repeat; 
    			text-align:center;
    		}
    		#lightbox p {
    			text-align:right; 
    			color:#fff; 
    			margin-right:20px; 
    			font-size:12px; 
    		}
    		#lightbox img {
    			box-shadow:0 0 25px #111;
    			-webkit-box-shadow:0 0 25px #111;
    			-moz-box-shadow:0 0 25px #111;
    			max-width:940px;
    		}
    		#content img{
    		  height:80%;
    		  max-width:100%;
    		}
      </style>
      
      </head>
      
    <body>
      
      <div id="header">
        <ul>
          <li><img src="images/logo.gif" alt="" /></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      
      <ul id="gallery">
        <li><a href="images/01.jpg" class="lightbox_trigger"><img src="images/01.jpg" /></a></li>
        <li><a href="images/02.jpg" class="lightbox_trigger"><img src="images/02.jpg" /></a></li>
        <li><a href="images/03.jpg" class="lightbox_trigger"><img src="images/03.jpg" /></a></li>
        <li><a href="images/04.jpg" class="lightbox_trigger"><img src="images/04.jpg" /></a></li>
        <li><a href="images/05.jpg" class="lightbox_trigger"><img src="images/05.jpg" /></a></li>
        <li><a href="images/06.jpg" class="lightbox_trigger"><img src="images/06.jpg" /></a></li>
        <li><a href="images/07.jpg" class="lightbox_trigger"><img src="images/07.jpg" /></a></li>
        <li><a href="images/08.jpg" class="lightbox_trigger"><img src="images/08.jpg" /></a></li>
        <li><a href="images/09.jpg" class="lightbox_trigger"><img src="images/09.jpg" /></a></li>
        <li><a href="images/10.jpg" class="lightbox_trigger"><img src="images/10.jpg" /></a></li>
        <li><a href="images/11.jpg" class="lightbox_trigger"><img src="images/11.jpg" /></a></li>
        <li><a href="images/12.jpg" class="lightbox_trigger"><img src="images/12.jpg" /></a></li>
        <li><a href="images/13.jpg" class="lightbox_trigger"><img src="images/13.jpg" /></a></li>
        <li><a href="images/14.jpg" class="lightbox_trigger"><img src="images/14.jpg" /></a></li>
        <li><a href="images/15.jpg" class="lightbox_trigger"><img src="images/15.jpg" /></a></li>
      </ul>
    
    
    <script>
      jQuery(document).ready(function($) {
    
      	$('.lightbox_trigger').click(function(e) {
    
      		e.preventDefault();
    
      		var image_href = $(this).attr("href");
                
      		if ($('#lightbox').length > 0) { // #lightbox exists
    
      			$('#content').html('<img src="' + image_href + '" />');
    
      			//$('#lightbox').show();
      			
      			$('#lightbox').fadeIn('2000');
      		}
    
      		else { 
    
      			var lightbox = 
      			'<div id="lightbox">' +
      				'<p>Click to close</p>' +
      				'<div id="content">' + 
      					'<img src="' + image_href +'" />' +
      				'</div>' +	
      			'</div>';
    
      			$('body').append(lightbox);
      		}
    
      	});
    
      	$('#lightbox').live('click', function() { 
      		$('#lightbox').hide();
      	});
    
      });
      </script>
    </body>
    
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The answer was just given in the thread below this one

    Remove the width and add a negative right margin to the container as follows.

    Code:
    ul#gallery {
    	margin:80px 0 0 0;
    	float:left;
    	margin-right:-30000px;/* close to browser limit */
    }


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
  •