I'm working on a website and everything is going great: the elements are rendering and responding to clicks and hovers as I'd like them to, courtesy of Bootplus [a derivative of Bootstrap], the elements are all being put into place correctly, courtesy of Isotope, and elements are even being put into place correctly by Isotope after pagination using Infinite Scroll, courtesy of a callback in the Infinite Scroll function.
However nothing after the first page responds entirely correctly to being clicked in the way that the first page's worth does. (They actually do open as they should (Collapse plugin), but currently as soon as the collapsible comment toggle is selected the website scrolls down so that the toggle button clicked is barely in sight at the top.)
So how do I use a callback function [or something] so that elements loaded by Infinite Scroll behave the same as the original page's elements??????
Current Script:
$(function(){
var $container = $('#ISCONTAINER');
$container.isotope({
itemSelector : '.shifty-item'
});
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)',
bufferPx:900,
itemSelector : '.shifty-item', // selector for all items you'll retrieve
loading: {msgText:"Patience is a virtue.",
finishedMsg: 'Out of new things to show you today.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}//SOMEWHERE HERE IS WHERE I NEED TO ADD IN WHATEVER FUNCTION ISN'T FIRING YET TO MAKE BEHAVIOR AWESOME
);
});
Related
I am very new in js, javascript, ajax, etc., I am using php and build only wordpress sites. Today I trying make to my site the hybrid pagination, what someone call it the "HolyScroll or Holy Scroll", the target this:
http://scrollsample.appspot.com/items
So I working on the infinite-scroll.com with Desandro's Masonry and my code now it looks like this (I did this in the last 5 hours...):
var grid = document.querySelector('.container');
var msnry;
imagesLoaded( grid, function() {
// init Isotope after all images have loaded
msnry = new Masonry( grid, {
itemSelector: '.item'
});
});
// -----------
var elem = document.querySelector('.container');
var infScroll = new InfiniteScroll( elem, {
// options
path: 'page/{{#}}/',
append: '.item',
history: 'push',
historyTitle: true,
prefill: true,
// load pages on init until user can scroll
scrollThreshold: 1000,
// trigger scrollThreshold event when viewport is <100px from bottom of scroll area
status: '.page-load-status',
});
// element argument can be a selector string
// for an individual element
var infScroll = new InfiniteScroll( '.container', {
// options
});
So finally works the infinite scroll, the history, the masonry (only on the first call) and the imagesLoaded, And now need paste to this the reloadItems option, but dont working...
Here is the guide: https://masonry.desandro.com/methods.html#reloaditems
Please, someone could help me? I can not find a simple tutorial to this with Vanilla JS, in turn the JQuery versions not working for me...
*Unfortunately MarkovskI drew my attention not everyone can click on a link, so I copy here, what Desandro write on his site:
"For frameworks like Angular and React, reloadItems may be useful to apply changes to the DOM to Masonry."
// vanilla JS
msnry.reloadItems()
So here is the "Holy Scroll", the hybrid, ajax / js loaded infinite scroll WITH pagination, what search engines loves, so this totally user and SEO friendly:
Source sites:
https://infinite-scroll.com/
https://masonry.desandro.com/
https://imagesloaded.desandro.com/
So, I just now learning php, I am only webdesigner and after I realized, the ALL wordpress plugins what promises you "infinite scroll" (like Ajax Load More, Ajax Pagination & infinite Scroll, DMD Infinite Scroll, Jetpack, YITH Infinite Scroll and etc.) rip-off and KILL YOUR ALL SEO if you using these plugins without LICENSE, I started looking the solution on the net. The first what it comes face to face the Google' Webmaster Central Blog:
https://webmasters.googleblog.com/2014/02/infinite-scroll-search-friendly.html
So after this article I knew what I wanted, but by the time, what I found it the keywords (thus: the browser history about infinite scroll) and the simple fact, that now need building my masonry layout (because up to now I using the Ajax Load More plugin, and this did it the masonry to me), so I never learning JS... I worked on this in the last ~35 hours, but you can instantly learn to do it yourself, as you read it all along. (The long introductory serving the keywords, to find you here too.)
So, you can modify your infinite scroll options off this official guide:
https://infinite-scroll.com/options.html
The VERY IMPORTANT THING, WHAT NEED FOR YOU, IS THIS:
https://infinite-scroll.com/options.html#history
So, put these links (or follow these steps: https://infinite-scroll.com/#install) to your footer (Or header, but Google recommend that call .js and .css files in footer, thus reduce it you pageload.):
<script src="https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
And here is so the full "Holy Scroll" code with masonry layout what using images Loaded (imagesLoaded), so never more overlapping your images.
Just Put This code to your footer between: <script></script>
var grid = document.querySelector('.container');
var msnry = new Masonry( grid, {
itemSelector: '.youritem', // select none at first
});
// initial items reveal
imagesLoaded( grid, function() {
msnry.options.itemSelector = '.youritem';
var items = grid.querySelectorAll('.youritem');
msnry.reloadItems( items ); // This reload the masonry layout after the first call
msnry.layout(); // This restrain the overlapping on the first call
});
//-------------------------------------//
// init Infinte Scroll
var infScroll = new InfiniteScroll( grid, {
// options
path: 'page/{{#}}/', // YOUR PAGINATION STRUCTURE !!!IMPORTANT!!! REPLACE IT
append: '.youritem',
history: 'push',
historyTitle: true,
prefill: true,
// load pages on init until user can scroll
scrollThreshold: 1000,
// trigger scrollThreshold event when viewport is <100px from bottom of scroll area
// (I using 1000, that my users never have to wait for the loading of the next page...
// The calling it will start to working, before the screen shows the bottom of the page...)
status: '.page-load-status',
outlayer: msnry,
});
Okay, so replace it the .container to YOUR site container what includes the items (items = posts, images, anything) and replace it the .youritem to your grid item (so the div what include ONE item)!
Very important, that you replace the value of the path: to your pagination structure, where the current page's number is {{#}}! (So if your site works thus: yourdomain.com/page/2/ your path value is: 'page/{{#}}/')
Finally you make your design with .css (Included the masonry parameters (width, etc.)!)
I have a page that load content using a MySQL database. And users can filter content using few buttons and then this content get replaced with dynamically pulled data using jQuery. Also the link I use in infinite scroll also change. But infinite scroll plugin seems to only take the same old link and not the newly loaded link to trigger scroll.
jQuery infinity scroll plugin that i use
https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.js
This is my code
<div class="container" id="myposts">
<div class=”post”>
<p>my content</p>
</div>
</div>
<nav id="page-nav"></nav>
//jQuery code
$('#myposts').infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '. post ', //
loading: {
finishedMsg: 'End of the page',
img: 'images/loader.gif'
}
}, function(newElements, data, url){
});
I’m changing the scroll trigger link from
<nav id="page-nav"></nav>
To
<nav id="page-nav"></nav>
But plugin still take the old link to trigger scroll. Is there any solution for this? Appreciate your time.
You could listen for the append.infiniteScroll event and then update the link from your page.
https://infinite-scroll.com/events.html#append
https://infinite-scroll.com/api.html#option
Something like this:
$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
$container.infiniteScroll( 'nextSelector', '#page-nav a' )
});
OK so I know this causes problems with everyone, and it's causing problems with me too. I'm using the infinite scroll plugin on a client's site, in combination with the isotope plugin to load in their products sequentially, the problem is though as they have 1000's of products, anyone browsing the site then clicking into a product, when they click the back button they'll be returned back to the top (or just above the fold of page one), which is causing quite a lot of issues.
My markup is as follows below:
$(window).load(function () {
var $container = $('.products-grid-wrap');
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.products-grid-block',
filter: '*:not(.hidden), .products-grid-block',
animationEngine: 'best-available',
layoutMode: "perfectMasonry",
perfectMasonry: {
columnWidth: 280,
rowHeight: 310
}
});
$container.infinitescroll({
navSelector: '#page_nav', // selector for the paged navigation
nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector: '.regular-product-block, .products-grid-block', // selector for all items you'll retrieve
pixelsFromNavToBottom: Math.round($(window).height() * 1.5),
bufferPx: Math.round($(window).height() * 1.5),
loading: {
finishedMsg: 'No more products to load.',
img: 'http://www.by-form.net/wp-content/uploads/2014/11/ajax-loader-big.gif'
}
},
// call Isotope as a callback
function (newElements) {
var $newElems = $(newElements);
$newElems.imagesLoaded(function () {
$container.isotope('insert', $newElems);
$('.products-grid-rollover-block').hide();
if(newElements.length > 0){
setTimeout(function () {
$container.infinitescroll('retrieve');
$('.products-grid-wrap').isotope('reLayout');
//$('.products-grid-wrap').isotope({
//sortBy: 'category',
//sortAscending: false });
}, 1000);
}
});
});
setTimeout(function () {
$container.infinitescroll('retrieve');
}, 3000);
});
});
Any solutions or suggestions would be massively appreciated!
You can try scroll-frame.It is a bit old may be the answer for you. Here is a link to an infinite scroll demo using it.
scrollFrame will hijack the user's click for elements that match the query selector you pass in and instead of reloading the page it will append a modal-like iframe that sits on top of your viewport and points to the element's href. It then uses HTML5 history APIs to make the back-button function as expected.
This can be a bit new solution of such problems.
https://github.com/highrisehq/snapback_cache
This is what is say's ...
Many apps today have some concept of an infinite scrolling feed: Facebook, Twitter, LinkedIn and many more. Almost all of them suffer from the same problem. If you click on something in the feed that brings you to a new page, when you hit the back button or try to return to that original feed, your place is lost. All the scrolling is gone.
At Highrise we had that same problem. So this is the library we use to fix that. We call it our Snapback Cache, and it's made a big improvement to how people can use infinite scroll in our app and still get a lot of work done without losing their place.
We solved this problem with a combination of (1) opening the page linked to on the infinite scroll page in a new tab; (2) using javascript to return to the parent.
Since I have seen a lot of comment about the difficulty of returning to the parent, I am posting our code for that below. The two functions are put into onclick attributes in the anchor tags used for the navigation buttons.
Using the name of the parent window solves the problem of intervening tabs opened before returning to the parent; without this, the tab returned to could be the most recently opened tab, rather than the parent.
/**
* open url in separate tab
* saves name of parent window for easy return
* #param url
*/
function gotoTab(url)
{
window.name = 'parent';
window.open(url);
}
/**
* uses name of parent
*/
function returnToParent()
{
var goBack = window.open('', window.opener.name);
window.top.close();
goBack.focus();
}
My personal photo gallery uses Masonry (for arranging the photos) and Infinite scroll (to break down the photos' downloading time). I recently added Slimbox2 (because I couldn't put Lightbox2 working for some reason). Slimbox2 works perfectly on the first page, but not on the following pages loaded by infinite scroll.
I tried using different grouping names, like rel="lightbox-page1" and rel="lightbox-page2, or no grouping at all, but none approach worked. Do I need to refresh Slimbox when a new page is loaded? InfiniteScroll's creator suggests the following code myLightbox.updateImageList();. Makes sense? How to convert it for Slimbox? Someone with the same problem as I do, in 2011.
You can check my live problem here. These are the scripts I'm currently using (you can view the page source):
<script>
$(function() {
var $container = $('#gallery');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector : '.box',
columnWidth : 1,
isAnimated : true
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
loading : {
finishedMsg : 'No more pages to load.',
img : '/assets/img/loading.gif'
}
},
// trigger Masonry as a callback
function(newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity : 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function() {
// show elems now they're ready
$newElems.animate({ opacity : 1 });
$container.masonry( 'appended', $newElems, true );
});
});
});
</script>
Here is the example I'm looking to create...
Let's assume there are two divs, each containing some other HTML/Content (other divs). I would like to have one of these divs in the view on page load, and then after some number of seconds (let's say 5), scroll the second div onto the same place as the first div, and then repeating that process indefinitely until the user leaves the page.
The page and elements in question can be found at http://paysonfirstassembly.com/. I am attempting to animate the left sidebar with a class of dynamicPanel. There will be at least three of these divs, and they will nearly match up in content length.
I appreciate everybody's help. I am a very new client-side programmer and appreciate the respect that this community has with new developers.
Working demo of the following →
Here's a simple jQuery plugin I just made that will slide up the first div and place it at the end of the list. I've commented the code below to further explain so that this can just get you started and you can adjust it to your needs and learn about jQuery:
// the plugin declaration
$.fn.rotateEach = function ( opts ) {
// cache the element set
var $this = this,
// create some default options
defaults = {
delay: 5000
},
// pass the defaults to settings with any override options
settings = $.extend(defaults, opts),
// repeated rotation function
rotator = function ( $elems ) {
// slide up first element in set
$elems.eq(0).slideUp(500, function(){
// detach first element
var $eq0 = $elems.eq(0).detach();
// append it to wrapper
$elems.parent().append($eq0);
// fade it back in
$eq0.fadeIn();
// call rotator on reselection of elements
// since first element was moved to end
setTimeout(function(){ rotator( $( $elems.selector ) ); },
settings.delay);
});
};
// initial rotator call
setTimeout(function(){ rotator( $this ); }, settings.delay);
};
// invoke plugin
$('.dynPanelContent').rotateEach();
If you want to change the delay you can just pass it in as an option:
$('.dynPanelContent').rotateEach({ delay: 7500 }); // 7.5 seconds
Note: I also moved .dynPanelOpener and .dynPanelTitle within .dynPanelContent so that they're included in the animations.
See working example →