Hello,

Currently on my site the jquery masonry is loading quite oddly, it loads all the images first then it sorts itself into position. i want it to load just like it does in pinterest.com.

Please help.

Regards,
Tamea

Jquery Code

jQuery( function($) {

    // Scroll back to top   
    function attBackTopScroll() {

        $( 'a[href=#top]' ).on('click', function() {
            $( 'html, body' ).animate({scrollTop:0}, 'normal');
            return false;
        } );

    }

    // Scroll to comments   
    function attCommentScroll() {

        $( '.comment-scroll a' ).click( function(event) {       
            event.preventDefault();
            $( 'html,body' ).animate( {
                scrollTop: $( this.hash ).offset().top
                }, 'normal' );
        } );

    }


    // Responsive
    function wpexResponsiveNav() {      
        $("<select />").appendTo("#site-navigation");
        $("<option />", {
           "selected": "selected",
           "value" : "",
            "text" : attParams.responsiveMenu
        }).appendTo("#site-navigation select");

        $("#site-navigation a").each(function() {
            var el = $(this);
            if(el.parents('.sub-menu').length >= 1) {
                $('<option />', {
                 'value' : el.attr("href"),
                 'text' : '- ' + el.text()
                }).appendTo("#site-navigation select");
            }
            else if(el.parents('.sub-menu .sub-menu').length >= 1) {
                $('<option />', {
                 'value' : el.attr('href'),
                 'text' : '-- ' + el.text()
                }).appendTo("#site-navigation select");
            }
            else {
                $('<option />', {
                 'value' : el.attr('href'),
                 'text' : el.text()
                }).appendTo("#site-navigation select");
            }
        }); 
        $("#site-navigation select").change(function() {
          window.location = $(this).find("option:selected").val();
        });     
    }

    // Masonry Widths
    function attMasonry() {

        // **** browsers
        if ($.browser.msie && parseInt($.browser.version, 10) === 8) {

            $('.grid').masonry({
                    itemSelector: '.loop-entry',
                    gutterWidth : 30,
                    columnWidth: 300,
                    isAnimated: false
            });

        // Decent browsers      
        } else {

            var $windowWidth = $(window).width();
            var $gridWidth = $('.grid').width();

            if ( $windowWidth > 700 && $windowWidth <= 1024) {
                var $colWidth = ( $windowWidth - 120 ) / 3;
                 $('.grid').masonry({
                    itemSelector: '.loop-entry',
                    gutterWidth : 20,
                    columnWidth: $colWidth,
                    isAnimated: false
                });
                $('.loop-entry').width( $colWidth );


            } else if ( $windowWidth > 400 && $windowWidth < 700 ) {
                var $colWidth = ( $windowWidth - 100 ) / 2;
                $('.grid').masonry({
                    itemSelector: '.loop-entry',
                    gutterWidth : 20,
                    columnWidth: $colWidth,
                    isAnimated: false
                });
                $('.loop-entry').width( $colWidth );

            } else {
                $('.grid').masonry({
                    itemSelector: '.loop-entry',
                    gutterWidth : 30,
                    columnWidth: 300,
                    isAnimated: false
                });
                $('.loop-entry').width(300);
            }
        }
    }


    $(document).ready(function(){
        attBackTopScroll();
        attCommentScroll();
        attMasonry();
        wpexResponsiveNav();
    });


    $(window).load(function(){
        attMasonry();
    });


    $(window).resize(function() {
        attMasonry();
    });

    if (document.addEventListener){
        window.addEventListener("orientationchange", function() {
            attMasonry();
        });

        window.addEventListener("resize", function() {
            attMasonry();
        });
    }


});

Recommended Answers

I've just recreated your code, and I'm getting a big error:

Line 65 "jQuery.browser was removed in jQuery 1.9"

Maybe should look into this, as it may well affect that entire IF statement, hence your script isn't running smoothly.

Jump to Post

All 2 Replies

I've just recreated your code, and I'm getting a big error:

Line 65 "jQuery.browser was removed in jQuery 1.9"

Maybe should look into this, as it may well affect that entire IF statement, hence your script isn't running smoothly.

Hello,
I am really sorry, i am a noob when it comes to jquery, you mean i should remove line 65 for this to work right?
-Tamea

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.