Update vars between different DOM-based pieces of javascript

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();
          // 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.imagesLoaded(function() {
          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!

Is that not working? That seems like the right way to do it — assigning a callback to the picturesLoaded event. You might want to you the always event in case images don’t load but that’s just me reading the docs - I’ve never used that (rather handy looking) plugin.