disable infinite scrolling and using older pages.

  • Author
    Posts
  • #1414977

    enrigo1988
    Member

    Hello,

    I’ve been modifying my site quite a bit and the recent thing was to show gallery images in full size to retain carousel mode and have the look of an inserted image.

    It’s all well and good, but I found out that scrolling too far down makes the browser lag a bit, possibly because of the occasional animated gifs.

    So I’m looking for a way to display them in pages numbers or a way to reduce the scrolling lag.

    The blog I need help with is tnwarder.com.

    #1415073

    enrigo1988
    Member

    The problematic area is in the blog page.
    I’m leaning towards finding a way to make page numbers that works for the theme I use.
    :)

    http://tnwarder.com/blogpage/

    #1415211

    It looks like you have turned off infinite scrolling at Settings > Reading, and I’m seeing no lag time on your images after the additional posts are loaded. Are you still seeing issues?

    #1415212

    enrigo1988
    Member

    It might be my own hardware problem I think. There is some occasional screen tearing when I scroll through the blog.

    I’ll try to mess around to see what works, maybe it’s the loading of the social media buttons.

    #1415215

    Please let us know if you experience any further issues. I just loaded and scrolled through 4 pages of posts and did not experience any issues. The animated gifs can make things a little jumpy till after all frames load, but once they are loaded, scrolling is smooth for me.

    #1415225

    enrigo1988
    Member

    Ok no problem , it seems to be a hardware/browser issue as I only get that lag in Chome and not IE.

    Thank youanyway, I will try to see if this is the case on other computers or just myself.

    #1415229

    You are welcome.

    #1415271

    justpi
    Member

    You have selected what WP calls “disabling” I.S., which doesn’t disable it at all, it just turns it from auto to manual. If you’d like to really disable I.S. and revert to the conventional older/newer navigation links, add this:

    .infinite-scroll #nav-below {
        display: block;
    }
    #infinite-handle {
        display: none;
    }

    #1415277

    enrigo1988
    Member

    wow thank you, That is a very good option for displaying posts.

    Though I would like the ‘older’ and ‘newer’ post buttons to switch their places. So that they are intuitive for reading left to right. (newer to the left older to the right.)

    #1415281

    Add the following to switch places on the next/previous tabs.

    #content .nav-previous {
        position: absolute;
        right: 30px;
        text-align: right;
    }
    #content .nav-next {
        position: absolute;
        text-align: left;
    }
    
    #content {
        padding-bottom: 60px;
        position: relative;
    }
    #1415282

    justpi
    Member

    You’re welcome.
    Newer left or newer right is a point of disagreement between designers! Anyway, add this:

    #content .nav-previous, #content .previous-image {
        float: right;
        text-align: right;
    }
    #content .nav-next, #content .next-image {
        float: left;
        text-align: left;
    }

    Then the arrows will look wrong, so you’ll probably like to add something like this too:

    .nav-previous span, .nav-next span {
    display: none;
    }
    .nav-next a:before {
        content: "← ";
    }
    .nav-previous a:after {
        content: " →";
    }

    #1415286

    enrigo1988
    Member

    Thank you ! now that is perfect to my liking (hopefully to visitors as well !).

    I think the preference have much to do with how we visualize blog compares to paper pages. Old habits are hard to break.

    #1415288

    Digital is changing things, but good design practices are good design practices no matter the media, and the print media industry has thousands of years of experience in perfecting things.

    Don’t break those old habits. :)

The topic ‘disable infinite scrolling and using older pages.’ is closed to new replies.