Stan Stan - 5 months ago 18
Javascript Question

One of the sections is randomly crashing on the page

I have a one page site with few sections.. Bootstrap template. One of the sections cause a bug after few refreshes of the site. There are no errors in the console.. nothing and I just don't know how to trace and find the problem.

This is the html part of this section

<section id="portfolio" class="section portfolio padding-large text-center" data-section-name="portfolio">
<div class="container margin-bottom-medium">
<div class="row margin-bottom-medium wow fadeInUp">
<h2> Portfolio </h2>
<div class="line main-bg"></div>
</div>
</div>
<div class="portfolio-wrapper margin-bottom-medium">
<div class="portfolio-item">
<div class="portfolio" style="margin-left:5px;"><a href="#" data-lightbox-gallery="portfolio"><img src="img/portfolio/release02-360x360.jpg" alt="">
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
<strong class="white-color bold-text" style="font-size: 20px;">Portfolio</strong>
</h2>
<div class="button">Check item</div>
</div>
</a>
</div>
</div>

</div>
<div class="button light margin-top-medium margin-bottom-medium hvr-grow"><i class="icon-reload"></i><a href="portfolio.php"> Check All</a></div>
</section>


This is what I have in main.js from the portfolio section

var container = $('.portfolio-wrapper'); // portfoolio container

container.isotope({
itemSelector: '.portfolio-item',
animationEngine: 'best-available',
animationOptions: {
duration: 200,
queue: false
},
layoutMode: 'fitRows'
});

// Split columns for different size layout
function splitColumns() {
var windowWidth = $(window).width(),
columnNumber = 1; // default column number
if (windowWidth > 1200) {
columnNumber = 4;
} else if (windowWidth > 767) {
columnNumber = 3;
} else if (windowWidth > 600) {
columnNumber = 2;
}
return columnNumber;
}
// Set width for portfolio item
function setColumns() {
var windowWidth = $(window).width(),
columnNumber = splitColumns(),
postWidth = Math.floor(windowWidth / columnNumber);

container.find('.portfolio-item').each(function() {
$(this).css({
width: postWidth + 'px'
});
});
}
// initialize isotope
function initIsotope() {
setColumns();
container.isotope('layout');
}
container.imagesLoaded(function() {
setColumns();
});
$(window).bind('resize', function() {
initIsotope();
});
initIsotope();


Here are two images in normal state and when it's crashed. Normal behavior
Normal

Here is when it crashed
enter image description here

I really don't have an idea of what can be the issue since there are no errors at all. I think that may be a js problem but again I'm not sure.

Edit: Here are the JS which are included in footer in this order:

<script src="js/vendor/jquery-1.11.1.js"></script>
<script src="js/vendor/jquery-migrate-1.2.1.min.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/twitterFetcher_min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/appear.js"></script>
<script src="js/jquery.circliful.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/main.js"></script>
<script src="js/scrollify.js"></script>


Edit2: Wrapping like this?

// initialize isotope
function initIsotope() {
setColumns();
container.isotope('layout');
}
container.imagesLoaded(function() {
setColumns();
});
$(window).bind('resize', function() {
initIsotope();
});
//initIsotope();
setTimeout(function(){ initIsotope(); }, 0);

Answer

From having a look at similar masonry issues. I would suspect one of these two would solve your issue -

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

// or

setTimeout(function(){ initIsotope(); }, 0); 

Both these are masking the core issue - you should really be reading the section around unloaded media here - http://isotope.metafizzy.co/v1/docs/help.html

I would suggest your content is not fully loaded sometimes and isotope gets confused. Specifying the dimensions lets isotope render correctly despite the images not loading quickly enough. You need to follow this pattern so that slow connections work. Setting timeouts has its uses, but you should fix the underlying issue.