We Keep Coding

Vuetify tabs not working with masonry.js, any fixes?

I'm trying to build a photo gallery with vuetify and masonry.js
I want to have multiple tabs, and for the images inside the tabs to be in a masonry layout.
For this I'm using masonry.js, and for the tabs I'm using vuetify.
The thing is, masonry.js is only laying out the initial tab properly, but not the other tabs.
(I think this is because of the fact that the other tabs aren't loaded so window.onload() doesn't work)
I tried making it so that when you click on each tab, the function bellow get's called again (by giving the component a method handleMason() ), but it's not working as I would be expecting.
window.onload = () => {
const grid = document.querySelector(".grid");
const masonry = new Masonry(grid, {
itemSelector: ".grid-item",
columnWidth: ".grid-sizer",
fitWidth: true,
});
methods: {
handleMason() {
console.log("Handled");
const grid = document.querySelector(".grid");
var masonry = new Masonry(grid, {
itemSelector: ".grid-item",
columnWidth: ".grid-sizer",
fitWidth: true,
});
},
},
I know that handleMason() is called because the console.log works. But the rest of the function doesn't style the images properly.
Apologies in advance for the crappy question, first time asking anything here ^^
EDIT
I've created a repo to illustrate the problem:
https://github.com/Hi-Im-Jony/masonry-gallery/tree/master
The site is also deployed using netlify at:
https://flamboyant-almeida-7a9bd0.netlify.app/

In the end I gave up on using masonry.js, as vue-stack-grid served a similar enough purpose and worked in the tabs

jQuery: infinite scroll and the back button

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();
}

One script causes another to stop working

I have a problem with a vertical scroll page where I'm using (intending to, that is) two nested quickscroll functions.
This is how it's supposed to look: - just remove the scrollbar in your mind. I'm just using
overflow:scroll
here to manually check on things.
Since JS isn't my forte (I have only very basic knowledge of it), I just got a piece of code that worked similarly, reverse engineered it by removing as much as I could from the HTML and CSS until I was left with the bare function, and plugged it into my own page in terms of the needed HTML and CSS as well as the code. I'm not using anything proprietary and I'm including author links, hoping that I'm on the safe side there (?)
So, the main scroll is a vertical one and inside one of the vertical sections I'm using this 'reverse engineered' horizontal quickscroll code.
The new (nested) script cancels out the main one. Any ideas how to fix this?
The main (vertical scroll) is the following:
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
/* I added this to hide the menu during scroll and I'm mighty proud of myself! :) */
$('.menu').addClass('hide');
$('.book_arrow').addClass('hide');
current = $(this);
$('body').scrollTo($(this).attr('href'), 2600, function(){
$('.menu').removeClass('hide');
$('.book_arrow').removeClass('hide');
});
return false;
});
});
</script>
It comes with these two linked files:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
The conflicting code is a bit longer:
<script>
// initialize scrollable and return the programming API
var api = $("#scroll").scrollable({
items: '#tools'
// use the navigator plugin
}).navigator().data("scrollable");
// this callback does the special handling of our "intro page"
api.onBeforeSeek(function(e, i) {
// when on the first item: hide the intro
if (i) {
$("#intro").fadeOut("slow");
// dirty hack for IE7-. cannot explain
if ($.browser.msie && $.browser.version < 8) {
$("#intro").hide();
}
// otherwise show the intro
} else {
$("#intro").fadeIn(1000);
}
// toggle activity for the intro thumbnail
$("#t0").toggleClass("active", i == 0);
});
// a dedicated click event for the intro thumbnail
$("#t0").click(function() {
// seek to the beginning (the hidden first item)
$("#scroll").scrollable().begin();
});
</script>
...and it links to this file:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
Does it matter where in the HTML I place all these chunks? In isolation, both scripts are working.
I've read about a seemingly similar case here and I'm thinking that maybe in my case I'm also dealing with variables that are 'occupied' by one of the functions, but I'm not exactly sure what to change and where.
I'm absolutely positively looking forward to learning a major lesson from this problem! :)

Hoping that it doesn't cause the Stack to Overflow, I'll add some more (my solution) to my journey. Maybe it helps posterity to follow my learning curve...
I was able to get the nested quick scroll (as I call it) to work properly. Still a rookie in JS, I played around with that bit of script I had gotten and modified - the one that worked vertically - and stuffed the other, similar, script for the (inner) horizontal scroll into that first script! YAY! It worked. Here's how the final script looks:
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('.book_arrow').fadeOut();
## which prevents the vertical page flying past a lot of nav during scroll down ##
$('.fluid_centerbox').addClass('hide');
$('.fluid_centerbox').fadeOut();
## which makes the scroll smooth cause what's {display:none;} isn't going to be recalculated
and also lets the viewer appreciate the background images during scroll. the 'hide' is
instant and the .fadeOut is animated. Don't ask me why it worked best in this order! ##
current = $(this);
$('body').scrollTo($(this).attr('href'), 2600, function(){
$('.book_arrow').fadeIn();
$('.fluid_centerbox').fadeIn(), 40000;
});
return false;
});
$('a.panell').click(function () {
current = $(this);
$('.long_wrap').scrollTo($(this).attr('href'), 2600, function(){
});
return false;
});
## the panell is not a typo but a way to distinguish both scroll button types ##
});
</script>
And while I'm posting this, I see that in the inner quick scroll, there's an empty
function(){});
Maybe later I'll try to get rid of it, if possible.

jQuery Isotope and InfiniteScroll - Appended items not being properly placed in the layout

I've got Isotope on the page and it works independently. I've got InifiniteScroll on the page and it works independently. When InfiniteScroll loads new items, I append them to my container but instead of being placed properly in the layout, they all appear in a single column down the left-hand side of the container. Here's my JS:
$(function() {
var container = $('#wall .page');
container.isotope({
itemSelector: '.brick'
});
container.infinitescroll({
navSelector: "nav.pagination",
nextSelector: "nav.pagination a[rel=next]",
itemSelector: ".brick",
loading: {
finishedMsg: 'No more items to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
}, function (newElements) {
container.isotope('appended', $(newElements));
});
});
I have a hard time believing it's a CSS or html problem since Isotope handles the initial items on the first page without a problem. I'm willing to provide more information if you can let me know what you need to see.

For anyone else experiencing this same issue, I ended up finding the answer on my own. In my case, the problem was in the selector for my container.
var container = $('#wall .page');
The problem is that more than one item with the class .page existed inside of the #wall element. Because of this, Isotope was apparently getting confused about exactly where to put things. Always make doubly sure that your jQuery selectors are correct. For me, this fixed it:
var container = $('#wall > .page');

Jscroll pagination plugin

i have download this good plugin
http://andersonferminiano.com/jqueryscrollpagination/
and i use this code for do a call to my db and show all the result. The my problem is that i can't stop the showing results when are finish in the database, i wouold like stop the pagination and no repeat the same result. how can i do it? thank you so much
$(function(){
$('#content').scrollPagination({
'contentPage': 'democontent.html', // the page where you are searching for results
'contentData': {}, // you can pass the children().size() to know where is the pagination
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // how many pixels before reaching end of the page would loading start? positives numbers only please
'beforeLoad': function(){ // before load, some function, maybe display a preloader div
$('.loading').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading, some function to animate results and hide a preloader div
$('.loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#content').children().size() > 100){ // if more than 100 results loaded stop pagination (only for test)
$('#content').stopScrollPagination();
}
}
});
// code for fade in element by element with delay
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});

That plugin actually isn't very good. I'm looking at the plugin's code, and sure enough, it doesn't provide a way to detect when you're at the end of the content.
If you go to the plugin page and scroll down, it appears to be working quite nicely. However, when you look at the file democontent.html (he's hidden the text, you have to view the source) where the data is being retrieved from, you'll see it's only 17 items. But, it keeps loading bogus data as you scroll down.
Not only does the plugin not detect the end of the data, but it also doesn't provide a way of stopping at all. If you'll notice, Anderson told the plugin to stop after 100 items are loaded, but he did this only in his example instead of writing this feature into the plugin.
So, that's why your content isn't stopping. You could try modifying his plugin yourself, but if you'd rather just change plugins, I'd recommend Infinite Scroll, by Paul Irish.

You can use mkscroll plugin with is provide you more functionality link for mk scroll is below.
https://github.com/maulikkanani/Scroll-Pagination
jQuery(window).mkscroll({
limit:10,
total:100,
});
there are many other option in that.

If any one phasing the problem here is the solution: the jscroll will stop the loading the content once the 'next page' link is not available.. so please check when you want to stop loading the content then 'next page' link is not getting loaded in the last content which is appended.