1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Jquery masters??? Help!!!!

Discussion in 'General Programming Chat' started by eyecandyzz, Mar 31, 2013.

  1. eyecandyzz

    eyecandyzz Registered Member

    Joined:
    Dec 24, 2012
    Messages:
    74
    Likes Received:
    36
    Home Page:
    I've been creating tumblr themes and I faced a problem with infinite scroll, so heres the situation. when the infinite scroll is activated the images overlaps each other, I've found the code that might affect it but not sure how to fix it, I would appreciate it if any of you can help me! thanks!

    Code:
    <script type="text/javascript">    
    $(window).load(function () {
     
    $('.posts').masonry(),
     
    $('.masonryWrap').infinitescroll({
     
    navSelector : "div#navigation",
    // selector for the paged navigation (it will be hidden)
    nextSelector : "div#navigation a#nextPage",
    // selector for the NEXT link (to page 2)
    itemSelector : ".box",
    // selector for all items you'll retrieve
    bufferPx : 10000,
    extraScrollPx: 11000,
    loadingText : "<em></em>",
    },
    // call masonry as a callback.
    function() { $('.posts').masonry({ appendedContent: $(this) }); }
    );
     
    });
     
    </script>
    
    <script src="http://static.tumblr.com/3zmswwt/azQmiz6q7/finding_min_and_max_values_in_array_from.txt"></script>
    
    
    <script src="http://static.tumblr.com/1s4z8hu/mYolo412c/jquery.infinitescroll.min.js"></script>
    
    
    I know the correct way kinda look like this

    Code:
    [COLOR=#FFFFFF][FONT=Menlo]<script>[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]    $(function(){[/FONT][/COLOR]
    
    [COLOR=#FFFFFF][FONT=Menlo]      var $container = $('#content');[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]    [/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]      $container.imagesLoaded( function(){[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        $container.masonry({[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]          itemSelector : '.feed',[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]          isAnimated: true,[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        });[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]      });[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]      [/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]      $container.infinitescroll({[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        navSelector  : '.navigation',    // selector for the paged navigation [/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        nextSelector : '.nav-previous a',  // selector for the NEXT link (to page 2)[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        itemSelector : '#content .feed',     // selector for all items you'll retrieve[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        },[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        [/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        // call Masonry as a callback[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        	function( newElements ) {[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        		var $newElems = $( newElements ).css({ opacity: 0 });[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        		// ensure that images load before adding to masonry layout[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        		$newElems.imagesLoaded(function(){[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]          		// show elems now they're ready[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]         	    $newElems.animate({ opacity: 1 });[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]          		$container.masonry( 'appended', $newElems, true ); [/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        	});[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]        }[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]      );[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]    });[/FONT][/COLOR]
    [COLOR=#FFFFFF][FONT=Menlo]</script>[/FONT][/COLOR]
    but after hours and hours of trying I still cant get it to work... ;(
     
  2. eyecandyzz

    eyecandyzz Registered Member

    Joined:
    Dec 24, 2012
    Messages:
    74
    Likes Received:
    36
    Home Page:
    please!
     
    Last edited: Mar 31, 2013
  3. eyecandyzz

    eyecandyzz Registered Member

    Joined:
    Dec 24, 2012
    Messages:
    74
    Likes Received:
    36
    Home Page:
    anyone?
     
  4. sockpuppet

    sockpuppet Junior Member

    Joined:
    Nov 7, 2011
    Messages:
    155
    Likes Received:
    145
    it's explained on the page where you found the correct way: the images are not loaded so masonry doesn't know the size and can't compute the spacing -> they overlap

    you have to use the imagesloaded jquery lib from here: https://github.com/desandro/imagesloaded
    and use the callback from your 'correct' example like this
    Code:
    function( newElements ) {
        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 });
            $('.posts').masonry( 'appended', $newElems, true ); 
       });
    }