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
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Autscroll to next blog-post by clicking current post?

    Hello,

    I have a tumblr-blog that only blogs images (JPG and GIF) and if the user clicks on one of the posts (images), it should automatically scroll to the next post.

    I already found this code: http://webdesignerwall.com/tutorials...ts-with-jquery
    Which already autscrolls to the next post, but by using two fixed next/prev buttons. But I would like to get rid of the next/prev-buttons and make the browser scroll by clicking on the posts, not on additional buttons.

    Here's the code on how my posts are structured:

    Code:
    <div class="post">
    
            <div class="postcontent">
    
                <img src="{PhotoURL-500}" width="100%"/>
                <br />
                <div class="postinfo">
                    
                    <table width="100%">
                    <th align="left">
                        {block:Date}
                            {DayOfMonth}.{MonthNumber}.{Year}
                        {/block:Date}
                    </th>
                    
                    <th align="center">
                        {block:Caption}
                        {Caption}
                        {/block:Caption}
                    </th>
                    
                    <th align="right">
                        {block:Date}
                            {24Hour}:{Minutes}:{Seconds}
                        {/block:Date}
                    </th>
                </table>
                
                </div>
    
            </div>
    
        </div>
    Here's the javascript code of the website I mentioned above:

    Code:
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
    <script type="text/javascript">
    $(function() {
    
        function scroll(direction) {
    
            var scroll, i,
                    positions = [],
                    here = $(window).scrollTop(),
                    collection = $('.post');
    
            collection.each(function() {
                positions.push(parseInt($(this).offset()['top'],10));
            });
    
            for(i = 0; i < positions.length; i++) {
                if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
                if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
            }
    
            if (scroll) {
                $.scrollTo(scroll, {
                    duration: 750       
                });
            }
    
            return false;
        }
    
        $("#next,#prev").click(function() {        
            return scroll($(this).attr('id'));        
        });
    
        $(".scrolltoanchor").click(function() {
            $.scrollTo($($(this).attr("href")), {
                duration: 750
            });
            return false;
        });
    
    });
    </script>
    I could wrap an <a> tag with a certain class around every image, but I don't know how to customize this javascript to make it scroll to the next post by clicking on one of the images and not on the next/prev-buttons.

    Can anyone help me customizing the javascript I found or building a new one?

    Thanks a lot!

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Code:
        $(".postcontent").click(function() {        
            return scroll('next');        
        });
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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