i would guess, and this is just off the top of my head:
validate your html
I believe the width="xxx" should have a unit i.e. px in the image tags
On Wed, Apr 23, 2008 at 1:53 PM, ben <[EMAIL PROTECTED]> wrote:
>
> This seems to be a subject of some discussion - and several apparent
> solutions - but either I'm looking for/at the wrong thing, or my
> implementation sucks.
>
> 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. Evidently I'm missing
> something. Any suggestions what it is?
>
> This is what I have:
>
> ----------------------------
>
> #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;}
>
>
> ----------------------------
>
> 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);
> });
>
> });
>
> ----------------------------
>
> <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="#">«
> Previous</a>
> <a id="pagination-next" class="bodylink right" href="#">»
> Next</
> a>
>
> </div>
>
>
> ----------------------------
>
> Thanks for any replies.
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to rubyonrails-spinoffs@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
