Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 28, 2016 at 7:12 pm #666387
    danatwater

    Hello,

    I am having a problem with the masonry element on my front page.

    The element would appear on the screen but only the background would show — the grid would not populate with posts until I added the following code to functions.php, which I found in another support thread:

    function add_custom_script(){
?>
<script>
(function($){
    $(window).load(function() {
    	$(this).trigger('resize');
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    After adding this code, the posts now load, but only on a fresh visit to the page (e.g., by typing it into the navigation bar in the browser). If I reach the page by an internal link (e.g., by clicking on the site logo), the masonry will not populate with posts, unless I resize the screen. I’ve verified this in IE and Chrome on two PCs, although the problem is not happening on my Samsung tablet or phone.

    Thank you,
    Dan

    August 2, 2016 at 4:45 am #667538
    Ismael

    Hey danatwater,

    Thank you for using Enfold.

    I can’t reproduce the issue in your installation. The masonry items display immediately every time I load the page. What is the value set in the “Post Number” settings? Is it set to 6 or 8?

    Best regards,
    Ismael

    August 12, 2016 at 5:04 pm #671911
    danatwater

    Ismael,

    The “post number” is set to 6

    Best,
    Dan

    August 12, 2016 at 10:06 pm #672090
    danatwater

    I should add that I have four PCs at home, all running windows 10, and on all of them if I refresh my webpage with the ‘refresh’ button, the masonry won’t load until the window is resized. This happens in both Chrome and IE. Both of my mobile devices work fine, however.

    August 16, 2016 at 6:27 am #673005
    Ismael

    Hi,

    What is the screen resolution of your monitor? I’m testing the page in a 1600x900px monitor and the masonry items loads immediately on scroll. Please replace the script with the following code:

    function add_custom_scripts(){
?>
<script>
(function($){
    $(window).scroll(function() {
		var masonry = $('.av-masonry').length;
		if(!masonry) return;
    	setTimeout(function() {
			$(this).trigger('resize');
		}, 1000);
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_scripts');

    Best regards,
    Ismael

    August 17, 2016 at 5:41 pm #673812
    danatwater

    Ismael,

    Your fix worked on my end. Thank you very much for your help.

    To answer your question, the monitors I tested were 1920×1080, 1600×900, and 3200×1800.

    Best wishes,
    Dan

    August 18, 2016 at 5:08 am #673999
    Ismael

    Hi!

    Glad it is working now. If you have more questions, please open a new thread. Thank you.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Front page masonry not loading’ is closed to new replies.