We Keep Coding

How to hide loader when there is no more page to be loaded

In this website that I am building https://vase.ai/blog/ , I am using a script of infinite scrolling to make several pages into one page for scrolling.
I would like to hide the loader(the spinning one) when there is no more page to be loaded. I figured that the following code might be able to help me to detect the error (Failed to load resource: the server responded with a status of 404 (Not Found)) and execute the hiding. However, it does not work. Am I missing something out?
window.addEventListener('error', function(e) {
$('loading').fadeOut()
}, true);
Code that I use to to load more :
//implementing infinite scrolling
$grid.infinitescroll({
// Pagination element that will be hidden
navSelector: '.pagination',
// Next page link
nextSelector: '.pagination a',
// Selector of items to retrieve
itemSelector: '.grid-blog',
},
// Function called once the elements are retrieved
function(new_elts) {
var elts = $(new_elts).css('opacity', 0);
elts.animate({opacity: 1});
$grid.packery('appended', elts);
$('.target-resize').textfill({
maxFontPixels: 36,
changeLineHeight:false
})
$grid.packery({
itemSelector: '.grid-blog',
gutter: 20,
})
});

It's difficult to answer your question without the code that make the http calls in order to load your content. But,
1) you may have an error, and still have contents to be loaded, in that case your loader will disappear even if contents are still loading.
2) You should have something that tel your site what you have to load.
an array of url, or anything, you can maybe use this to hide your loader when all contents has been loaded.
3) You should have somewhere a function that make httpcalls to get your content. This function should have a callback. In this callback, you should be able to catch an error, and then hide your loader.
I cannot give you more informations with the amount of code you show in your exemple.
edit : after looking at your code, you may try to do :
// Function called once the elements are retrieved
function(new_elts) {
if(!new_elts) {
$('loading').fadeOut();
return;
}
...
}
I don't think this is the right solution, your plugin should have a built-in function to stop calling new pages, but since I don't see the function that make the http call, or any array/iterator of URLs, it's difficult top help you.
you should check this demo to : https://codepen.io/desandro/pen/rwwoGe

How to FORCE a resize event that will run all resize functions

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.
Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?
Note:
I have tried this link
Forcing windows resize to fire
This will not work.

$(window).resize(function(){
$('span').text('event fired!');
});
$('button').click(function(){
window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>

This must work (I'm using it right now)
$(window).trigger('resize');
Hope this helps.
EDIT
Note that's jQuery syntax.
EDIT 2
i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:
$(window).on('resize', function () {
$('#element').masonry('reloadItems');
});
$(window).trigger("resize");
Good luck

I managed to fix this.
$('#article-options li').on('click', function() {
setTimeout(function() {
var $grid = $('#blog-container').masonry({
columnWidth: 80
});
// change size of item by toggling gigante class
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
}, 200);
});
Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.
I have set a timeout as JS was running a bit behind and making me click twice for the code to run.
I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.
As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

Isotope appending doesn't seem to work

I have a photo gallery powered by Isotope.Images are requested from external resource on page load and every time a user scrolls to the bottom of the page. New images are to be appended to the current isotope layout. The problem is with Isotope - it doesn't seem to execute the 'appended' method.
Searching for a solution on StackExchange and Google revealed I am not the only one having this problem. I have been tinkering with this for past couple of days and tried almost every solution I could find but so far I have not found anything that could fix my problem.
CodePen: I have created a CodePen here - http://codepen.io/Writech/pen/pBoEt
WebPage: As the custom event 'resizestop' is not working in codepen the same code is found as a webpage here - http://writech.net.ee/sandbox/
To see the problem open the CodePen or WebPage provided above and scroll to the bottom of the page which initiates loading of additional images. Then you see the new images are just appended to the container by jQuery. But they are not appended to the isotope layout instance as they are supposed to.
The problematic part lays in a custom function named isotopeAppend(). This function is called on page load and then the second part of 'if-else' statement is executed. When initialization is done and first images are added to the container then the next time isotopeAppend() is called (it's when user reaches to the bottom of the page) the first part of 'if-else' statement is executed and this is where the problematic Isotope 'appended' method is called.
A code snippet below from problematic javascript code. The results of the ajax request to external resource are applied to the variable newElems. When adding an alert('something') or console.log inside the 'appended' callback - nothing happens.
Does the problem lay in Isotope itself or does it have anything to do with my coding error?
I would really like to find a solution for this!
var elements = $(newElems).css({ opacity: 1, 'width' : columnWidthVar + 'px' });
$('#photos_section_container').append( elements );
$('#photos_section_container').imagesLoaded(function(){
$('#photos_section_container').isotope( 'appended', elements, function(){
hideLoader(function(){
elements.animate({ opacity: 1 });
});
});
});

In the initialization change
itemSelector : $('.photos_section_wrap'),
to
itemSelector : '.photos_section_wrap',
I forked your pen.
itemSelector is used by isotope to filter elements to layout and $() returns array of objects. In result there no elements to layout. If you are interested you may look at the _getAtoms method (isotope script) in debug to see what's goinig on.

masonry.js div reset when select link

Hey so here's the website I'm working http://trevormsmith.com/linx/art.html
Trying to build a filter system (in the footer), and when you click on the specific categories (minimalist, typographic, abstract) masonry resets the images into a single column, instead of the grid. If you resize the browser, it'll readjust to normal.
This is what I have calling masonry to the containers with the images
Also, when I set the #minimalist, #typographic, #abstract to display:show instead of display:none (which it needs to be), the layout is fine and it works smoothly.
Any suggestions?
Edit: So here's the code that is working only for #minimalist, except the masonry is not being triggered and the images stay floated instead of tiling:
EditEdit: here's the current code, #containers fade in as a single column instead of grid layout: http://jsfiddle.net/T6SDb/1/
Calling the masonry:
$( function() {
$('#container-all, #minimalist, #typographic, #abstract').masonry({
itemSelector: '.item, .item-m, .item-t, .item-a',
columnWidth: 7 }); });
And then the fadein/fadeout for the filter:
$('#btn-all').click(function(e){
$('#minimalist, #typographic').fadeOut('slow', function(){
$('#container-all').delay(1000).fadeIn('slow', function(){
});
});});
$('#btn-m').click(function(e){
$('#container-all, #typographic').fadeOut('slow', function(){
$('#minimalist').delay(1000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
}); });
$('#btn-t').click(function(e){
$('#container-all, #minimalist').fadeOut('slow', function(){
$('#typographic').delay(2000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
}); });
$('#btn-a').click(function(e){
$('#container-all, #typographic, #minimalist').fadeOut('slow', function(){
$('#abstract').delay(2000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
}); });

Try calling masonary('layout') after fading in the selected images, i.e. for the container-all (from your filter.js file) try this:
$('#btn-all').click(function(e){
$('#minimalist, #typographic').fadeOut('slow', function(){
$('#container-all').delay(1000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
});
});
I'm only testing this from the JavaScript console so you might need to tweak the timing / positioning. I'm doing it when the fade is complete, you might want to try doing just after the start of the fade.
Edit
It may be because of the way your containers are put together and how you start masonary, perhaps you can do this in your main source:
var mason;
$( function() {
mason = $('#container-all, #minimalist, #typographic, #abstract').masonry({
itemSelector: '.item, .item-m, .item-t, .item-a',
columnWidth: 7});
});
});
Then later you can use mason.masonary('layout') in each of your click functions rather than referring to a single container, i.e. for the first one try:
$('#btn-all').click(function(e){
$('#minimalist, #typographic').fadeOut('slow', function(){
$('#container-all').delay(1000).fadeIn('slow', function(){
mason.masonary('layout');
});
});
});
Depending when you want things to appear and rearrange you might want to fadeTo a certain value then do the layout and then complete the fade (or you could do that on a delay too).
Maybe look at the Masonary functions hide and reveal to remove given elements.
It may also make things easier to work with the items themselves rather than the containers (since everything gets rearranged) and just have one outside container for everything.
I'd also suggest trying a simpler example (maybe just colored divs or something), working with that, and posting it if you still have issues. There may be some interaction between the libraries you are using.
Edit 2
Added Fiddle, that uses the separate mason variable above. It works but, again, you might need to do something about the timing of the fade in / fade out -- of course you can't arrange the things until they're visible which is an issue. I'm not sure of the best way to fix that.

JQuery Isotope not triggering

I have added the JQuery plugin Isotopte to my site.
It works but only after the browser resizes. The images just seem to stack up on each other before hand.
My code to is:
$(function(){
$('#isotopecontainer').isotope({
itemSelector: '.frontitem',
masonry: {
}
});
});
I've tried adding columnWidth as the site suggests but this makes no difference.
Im really not sure what is going on. Can anyone help me out at all?

I don't know exactly where your issue is but I got a working solution.
Working solution (JSFiddle)
$(document).ready(function(){
$('#isotopecontainer').isotope({
// options
itemSelector : '.frontitem',
masonry : {}
});
}
);
It has all of your options but I can't seem to find exactly where your code is wrong. I did use the document ready callback that jquery supplies however I don't think that was the issue.
Also make sure you include jquery before isotope.