WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
Infinite Scroll - Inline Style is being skipped (4 posts)

  1. preethamchandra
    Member
    Posted 1 year ago #

    Hi,

    I implemented Infinite Scroll (Click based) on my theme and i am facing an issue.
    My theme is grid style ( masonry)

    Problem is, When posts load by default, they have some inline styles
    ex:

    [ Moderator note: please wrap code in backticks or use the code button. ]

    <li id="post-516" class="post-516 post type-post status-publish format-standard hentry  masonry-brick" style="position: absolute; top: 0px; left: 315px;">

    But When loaded from Infinite Scroll , there is no inline style , hence there is position issue.
    ex:

    <li id="post-516" class="post-516 post type-post status-publish format-standard hentry  masonry-brick">

    ---------------
    To check the issue live, please visit on
    http://www.itdealraja.com/

    Please help..

    http://wordpress.org/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    If these styles are added via Javascript, you'll want to use the post-load event to add these styles to the posts after the Infinite Scroll load.

    You can read more about it here:
    http://jetpack.me/support/infinite-scroll/#javascript-events
    http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/

    Let me know if it helps.

  3. preethamchandra
    Member
    Posted 1 year ago #

    Thanks.

    I did go thru that.

    However, I quite don't get where to put those jQuery code?

    In theme's JQuery or else where..

    I did actually implement on my website, doesn't seem to work.

    Also my theme support is as below, any changes needed here?

    function test_scrol() {
        add_theme_support( 'infinite-scroll', array(
            'container'      => 'content',
    	'type'           => 'click',
    	'wrapper'        => 'masonry-wrapper',
            'footer'         => 'page',
    		'posts_per_page' => '8'
        ) );
    }
    add_action( 'after_setup_theme', 'test_scrol' );
  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    where to put those jQuery code?

    You'll need to create a new folder in your theme, named js/ for example. In there, create a new file named infinite-scripts.js, add the code mentioned in this tutorial, and enqueue the js/infinite-scripts.js file with the rest of your Javascript libraries, thanks to the wp_enqueue_script function, in your theme's functions.php file:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    Also my theme support is as below, any changes needed here?

    That will depend on your theme, and how the post loop is implemented in that theme.

    Let me know if this helps.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic