CODEWITHSUNDEEP
javascriptcsshtml
Jason
Jason

Reputation: 11615

Scrollable Content With Javascript in a Div with overflow:hidden

I have a need to display a lot of image thumnails in a small space.

My idea is to have 3 columns of thumbnails with an undetermined amount of rows. I planned to put this content in a and then put that inside a viewport div. Like so:

        <div id="viewport" style="width: 300px; height: 300px; overflow: hidden;">
            <div id="content" style="width: 300px; height: 100000px;">
                 Rows of thumbnails go here
            </div>
        </div>
        <a href="javascript:ScrollUp()">Previous</a>
        <a href="javascript:ScrollDown()">Next</a>

Autotrader's image control is exactly what I am going for if an example helps illustrate my point.

I think what I need to do is change the topMargin of 'content' over a period of time with javascript for a scroll effect when one of the buttons is clicked.

I don't mess with javascript much and I'm not sure where to start. Can someone point me in the right direction?

Upvotes: 1

Views: 1002

Answers (1)

Jason
Jason

Reputation: 11615

So I finally took 30 seconds out of my day and learned what jQuery is and how to use it.

=0

This is a simple example doing the movement I was looking for.

You have to download jQuery to make it work. http://jquery.com/

I'll leave the question up in case anyone else needs something like this. 

    <script src="../jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#next").toggle(function() {
            $("#content").animate({ marginLeft: '0px'}, 'slow');
            }, function() {
            $("#content").animate({ marginLeft: '-100px' }, 'slow');
            });
        });

    </script>

        <div id="viewport" style="width: 300px; height: 300px; overflow: hidden;">
            <div id="content" style="width: 300px; height: 100000px;">
                 Rows of thumbnails go here
            </div>
        </div>
        <a id="next" href="">Previous</a>
        <a id="prev" href="">Next</a>

If there is a better way, let me know....

Upvotes: 3

Related Questions