Hi there,
Continuing this post: http://discourse.roots.io/t/select-multiple-body-classes-in-dom-based-routing/
On some pages, I have two different pieces of jQuery that are executed by two different body classes.
On all the pages (common) I have a scroll script determing if the header should be minimized when scrolling, based upon the height of a certain div.
Via my functions.php I assign a class isotope to the body on certain pages and have a different section of jQuery to control these. However since I also use imagesLoaded and Picturefill, the height of the div in the common bit isn’t correct yet, since the images haven’t loaded yet.
So I would like to know if it’s possible to update a jQuery var from one bit of the DOM-based script (isotope) after all the images have loaded to another one (common)?
This is my code so far:
(function($) {
var Roots = {
// All pages
common: {
init: function() {
$('.wrap').imagesLoaded(function() {
// Minimize Header when scrolling
var headertop = $('.banner').offset().top;
var headerheight = $('.banner').outerHeight();
var wrapheight = $('.wrap').outerHeight();
var windowheight = $(window).height();
$(window).scroll(function(){
// Minimize Header
console.log('wrapheight:', wrapheight);
if( $(window).scrollTop() > headertop && ((headerheight + wrapheight) > windowheight)) {
$('.banner, .wrap').addClass('minimized');
// Maximize Header
} else {
$('.banner, .wrap').removeClass('minimized');
}
});
});
}
},
// Isotope
isotope: {
init: function() {
// Isotope
var $container = $('.grid');
$container.hide();
$container.imagesLoaded(function() {
$container.fadeIn().isotope({
itemSelector: '.hentry',
stamp: '.stamp',
masonry: {
columnWidth: 150,
gutter: 15
}
});
Roots.common.wrapheight = $container.outerHeight(); // not working
console.log('new wrapheight:', Roots.common.wrapheight);
});
}
}
};
Or is there another easier way of doing this?
Thanks in advance!