[Rails-spinoffs] scriptaculous - scroll within div:overflow

[ben]

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="#">&laquo;
Previous</a>
        <a id="pagination-next" class="bodylink right" href="#">&raquo; 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
-~----------~----~----~----~------~----~------~--~---