Create an account

Very important

  • To access the important data of the forums, you must be active in each forum and especially in the leaks and database leaks section, send data and after sending the data and activity, data and important content will be opened and visible for you.
  • You will only see chat messages from people who are at or below your level.
  • More than 500,000 database leaks and millions of account leaks are waiting for you, so access and view with more activity.
  • Many important data are inactive and inaccessible for you, so open them with activity. (This will be done automatically)


Thread Rating:
  • 396 Vote(s) - 3.46 Average
  • 1
  • 2
  • 3
  • 4
  • 5
jquery masonry collapsing on initial page load, works fine after clicking "home" menu button

#1
My jquery masonry setup is working strangely on initial page load. It seems to be placing the images in the first row fine, the second row is positioned overlapping the first and the same for the third row. After page load, you can click the home button or the logo and reload the page and it works fine.

I have this code in the functions.php to put the masonry and jquery scripts in:

if (!is_admin()) {
wp_enqueue_script('jquery');
wp_register_script('jquery_min', get_template_directory_uri(). '/js/jquery.min.js', array('jquery'), '1.6.1' );
wp_enqueue_script('jquery_min');
wp_enqueue_script('jquery');
wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.1.06' );
wp_enqueue_script('jquery_masonry');
}

This script is in the head.php:

<?php if (is_page(2)) { ?>
<script>
$(function(){
$('#content').masonry({
// options...
itemSelector : '.product',
columnWidth : 310,
isAnimated: true,
animationOptions: {
duration: 700,
easing: 'linear',
queue: false
}
});
});
</script>
<?php } ?>

This is a link to the [site][1].

Any idea as to why this is loading strangely on initial page load?

I'm pretty new to scripting anything, so please be kind.


[1]:

[To see links please register here]

Reply

#2
I think it's because the script is being run before the content (images) is fully loaded. Hence the positioning error.

Try this.

$(window).load(function()
{
$('#content').masonry({
itemSelector : '.product',
columnWidth : 310,
isAnimated: true,
animationOptions: {
duration: 700,
easing: 'linear',
queue: false
}
});
});
Reply

#3
I also had a similar issue, images were overlapping at the first loading time. I overcame this by first loading the images.

$(".id").imagesLoaded(function(){
$('.id').masonry({
itemSelector: '.scrapcontent',
columnWidth: 3,
isAnimated:true,
animationOptions: {
duration: 700,
easing:'linear',
queue :false
}
});
}

If the images are loaded then your masonry's duty has to start. It should work fine.
Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

©0Day  2016 - 2023 | All Rights Reserved.  Made with    for the community. Connected through