Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts

    scriptaculous - scroll within div:overflow

    I want to scroll content into and out of a viewport that's defined by a div with overflow:hidden. But when I use the code below, although scrolling happens, the content that was previously hidden is still hidden - images, for instance, are cut in half.

    The page validates as XHTML transitional, and behaves exactly the same in FF2, IE7, Safari 3 and Opera 9 (WinXP).

    Clearly I'm misunderstanding something about Effect.Move() but the Scriptaculous documentation doesn't offer any clues and... well, if I was smart enough to figure out the code in effects.js I'd have written my own....


    Code:
    <style type="text/css">
    	#pagination_container{position:relative; width: 420px; height: 148px; overflow:hidden;}
    	#pagination_content{position: relative; width: 10000px;  height: 148px;}
    	.pagination_item{width:125px; float:left; margin:0 5px; font-size:10px; color:#b2b2b2; text-align:center;}
    	.pagination_item img{border:5px solid #e6e6e6;}
    	.pagination_item a{display:block; font-size:12px; color:#24a9ec; text-decoration:none;}
    </style>

    Code:
    <script type="text/javascript">
    
    document.observe("dom:loaded", function() {
    
    	$('pagination-prev').observe('click', function(event){
    		new Effect.Move($('pagination_content'),{x: 420, y: 0, duration: 1, mode:'relative'})
    		Event.stop(event);
    	});
    	
    	$('pagination-next').observe('click', function(event){
    		new Effect.Move($('pagination_container'),{x: -420, y: 0, duration: 1, mode:'relative'})
    		Event.stop(event);
    	});
    
    });
    
    </script>

    Code:
    <div id="latestwork_content">
    	
    	<p class="grey">Lorem ipsum yada yada</p>
    	
    	<div id="pagination_container">
    		
    		<div id="pagination_content">
    		
    			<div class="pagination_item"><img src="img/thumb_lg.jpg" width="115" height="113" alt="thumb" /><a href="">Some</a>Content</div>
    			<div class="pagination_item"><img src="img/thumb_lg.jpg" width="115" height="113" alt="thumb" /><a href="">Some</a>Content</div>
    			<div class="pagination_item"><img src="img/thumb_lg.jpg" width="115" height="113" alt="thumb" /><a href="">Some</a>Content</div>
    			<div class="pagination_item"><img src="img/thumb_lg.jpg" width="115" height="113" alt="thumb" /><a href="">Some</a>Content</div>
    			<div class="pagination_item"><img src="img/thumb_lg.jpg" width="115" height="113" alt="thumb" /><a href="">Some</a>Content</div>
    			<div class="pagination_item"><img src="img/thumb_lg.jpg" width="115" height="113" alt="thumb" /><a href="">Some</a>Content</div>
    			<div class="pagination_item"><img src="img/thumb_lg.jpg" width="115" height="113" alt="thumb" /><a href="">Some</a>Content</div>
    
    		</div>
    							
    	</div>
    	
    	<a id="pagination-prev" class="bodylink left" href="#">&laquo; Previous</a>
    	<a id="pagination-next" class="bodylink right" href="#">&raquo; Next</a>
    
    </div>

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    AAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHGGGGGGHHHHHHHHHHHHH



    Code:
    new Effect.Move($('pagination_container')
    i iz teh dumb


  •  

    Posting Permissions

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