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?
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.
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.
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
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;
}
