• Hi
    how can I change how much the window scroll when new posts are loaded after clicking the load button more?

    I have the seo add on and I believe the bit of code is this one:

    almSEO.scrollToPage = function(obj){
             var top = $(obj).offset().top - 200 + 'px';
             $('html, body').delay(250).animate({ scrollTop: top }, almSEO.speed, "alm_easeInOutQuad");
          }

    but I am not sure as I am trying to change it and I have no luck.

    What I use that it works is:

    $('html, body').animate({scrollTop:$(".is-expanded").position().top -10}, 1000);

    WIth that the window scroll and have a div .is-expanded be at 10 from the top of the window. I would like to do the same when the new content is loaded with your plugin. AT the moment it isn’t scrolling enough. I am not sure I am loooking at the right place

    Thanks

    https://www.ads-software.com/plugins/ajax-load-more/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter downfast

    (@downfast)

    OK i think is this bit

    almSEO.getCurrentPageTop = function(page){
    
              // Get children
             var objs = $('.alm-reveal').eq(0).children() ? $('.alm-reveal').eq(0).children() : '';   
    
             if(objs.length){
                var objType = objs[0].nodeName.toLowerCase(),
                    obj = page * almSEO.postsPerPage - almSEO.postsPerPage;    
    
                var objSelected = $('.alm-listing .alm-reveal > ' + objType).eq(obj); 
    
                if(almSEO.scroll) almSEO.scrollToPage(objSelected);
    
             }
          }

    But I am using isotope (masonry) therefore may change the container height. Any idea?

    Plugin Author Darren Cooney

    (@dcooney)

    Im not really sure about this one because I have not used the SEO plugin with Masonry.

    Both those functions are intended to locate the top position of the first item of the current page.

    Masonry is definitely uncharted waters for the plugin. If you have some time maybe leave it with me and after the holidays I can put together an example.

    Thread Starter downfast

    (@downfast)

    Quick update on this:

    It’s not a real solution maybe but this is what I thought so far:

    var pos = $("#list").height();
    jQuery('html, body').animate({scrollTop:'+=' + pos + 'px'}, 1000).offset().top;

    $(“#list”).height is the height of the isotope (masonry) container when it first loads, then each time I am loading new content, I am scrolling the window for as much as the saved height of the container at the beginning.

    Thread Starter downfast

    (@downfast)

    Follow up on this:

    jQuery.fn.almComplete = function(alm){
      if(!$("body").hasClass("loadedList")) {
      		setTimeout(function(){
    			$("body").addClass("loadedList");
    			pos = jQuery("#list").height();
      		}, 2000);
      } else {
    	$("body, html").animate({scrollTop:'+=' + pos + 'px'}, 1000).offset().top;
      }
    }

    Basically I am checking if the body has a class on content loaded, if it does not, I am awaiting for 2 secs for all content to be properly loaded and layed out with isotope (masonry) and setting a global var for the container height. Afterwards when loading new content, I am skipping to set the height as the body has the class and I am scrolling to that var height px.

    Since I am loading different amount of content if we are on mobile I am doing this in my index.php

    <div id="list" class="cs-style-5">
                <?php function detectmobile(){
                    $agent = $_SERVER['HTTP_USER_AGENT'];
                    $useragents = array (
                        "iPhone",
                        "iPod",
                        "Android",
                        "blackberry9500",
                        "blackberry9530",
                        "blackberry9520",
                        "blackberry9550",
                        "blackberry9800",
                        "webOS"
                    );
                    $result = false;
                    foreach ( $useragents as $useragent ) {
                        if (preg_match("/".$useragent."/i",$agent)){
                            $result = true;
                        }
                    }
                    return $result;
                }
                if (detectmobile() == true) { ?>
                    	<?php echo do_shortcode('[ajax_load_more post_type="page" seo="true" posts_per_page="4" scroll="false" button_label="+ MORE WORKS +" pause="false"]');
                } else { ?>
                        <?php echo do_shortcode('[ajax_load_more post_type="page" seo="true" posts_per_page="10" scroll="false" button_label="+ MORE WORKS +" pause="false"]'); ?>
                    <?php }  ?>
                </div>
            </div>

    So I am loading only 4 posts if we are on mobile and 10 if we are on desk. Since we are loading only 4 posts, when on mobile I need to scroll to half of the container height like this:

    if(!$("body").hasClass("loadedList")) {
      		setTimeout(function(){
    			$("body").addClass("loadedList");
    			pos = jQuery("#list").height();
      		}, 2000);
    } else {
    	var newPos = pos / 2;
    	$("body, html").animate({scrollTop:'+=' + newPos + 'px'}, 1000).offset().top;
    }

    not sure if this is the proper solution but it is A solution. Hope it helps

    Thread Starter downfast

    (@downfast)

    Eventually this is what makes it work. Basically I am calculating the container height each time I load more content and I skip the first time with a simple if statement

    if(!jQuery("body").hasClass("loadedList")) {
       jQuery("body").addClass("loadedList");
    } else {
       var pos = jQuery("#container").height();
       $("body, html").animate({scrollTop: pos}, 1000).offset().top;
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Window scroll after posts are loaded’ is closed to new replies.