Lautaro Lautaro - 7 days ago 6
Javascript Question

Isotope - Hide elements in the first load

Following this instructions about infinite scroll, I was able to hide the new content from pages 2, 3 , 4, etc until it finished loading and then animate. Now I would like to achieve these same effect but with the main content, what would be the first page. Any help?
Code that I'm using:

<script>
$(function(){
var $container = $('#boxes');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.box'
});
});
</script>

<script>
$('#boxes').isotope({
// options
itemSelector : '.box',
layoutMode : 'masonry'
masonry : {
columnWidth : 325
},
});
</script>

<script>
$(function(){
var $container = $('#boxes');
$container.imagesLoaded(function(){
$container.isotope({
itemSelector: '.box'
});
});
$container.infinitescroll({
navSelector : '#navigation',
nextSelector : '#navigation a#next',
itemSelector : '.box',

loading: {
finishedMsg: 'no more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
function(newElements){
var $newElems = jQuery( newElements ).hide()
console.log('Elements Retrieved:');
var $newElems = $(newElements);
$container.imagesLoaded(function(){
$newElems.fadeIn(); // fade in when ready
$container.isotope('appended', $newElems, function(){console.log('Appended');});
});
});
});

</script>


And here's the blog. Thanks in advance!

Answer

What I meant was - in your CSS you put

#container {
    display: none;
}

to hide the #container by default, so it won't show initially; then, in your script, you just put

$container.show();

at the point where you want to show it; for example, when everything for the first page has loaded or whenever you want to .show() your #container for the 1st time. Simple example here.