Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hide elements in the first load #282

Closed
ghost opened this issue Oct 13, 2012 · 1 comment
Closed

Hide elements in the first load #282

ghost opened this issue Oct 13, 2012 · 1 comment

Comments

@ghost
Copy link

ghost commented Oct 13, 2012

Hi! following this instructions about infinite scroll (desandro/imagesloaded#14 (comment)) 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 URL http://oratualt22.tumblr.com/
Thanks in advance!

@desandro
Copy link
Member

Have you tried just fading in the container after imagesLoaded?

$(function(){
  var $container = $('#boxes');
  $container.imagesLoaded( function(){
    $container.fadeIn().isotope({
      itemSelector : '.box' 
    });
  });
});

Closing this as a personal support request

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant