CODEWITHSUNDEEP
jqueryruby-on-rails
Mischa
Mischa

Reputation: 2139

rails jquery script does not work when clicking link

I've found a jquery script to make divs have equal heights. It uses window.load and window.resize to call the function. When i load the page or resize it works, however if i go to the page via a link on the site the divs become their old height again. I think this has to do with the rails turbolinks (similar to rails 4 with turbolinks and window load), but i can not get it to work (even with the solution in the link). this is the script (it is loaded through the asset pipeline

equalheight = function(container){

  var currentTallest = 0,
    currentRowStart = 0,
    rowDivs = new Array(),
    $el,
    topPosition = 0;
  $(container).each(function() {
    $el = $(this);
    $($el).height('auto')
    topPostion = $el.position().top;

    if (currentRowStart != topPostion) {
      for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
        rowDivs[currentDiv].height(currentTallest);
      }
      rowDivs.length = 0; // empty the array
      currentRowStart = topPostion;
      currentTallest = $el.height();
      rowDivs.push($el);
    } else {
      rowDivs.push($el);
      currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
    }
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
      rowDivs[currentDiv].height(currentTallest);
    }
  });
}

$(window).load(function() {
  equalheight('.container-fluid box');
});

$(window).resize(function(){
  equalheight('.container-fluid box');
});

Upvotes: 0

Views: 70

Answers (2)

D4v1dW3bb
D4v1dW3bb

Reputation: 68

$(document).on('ready', function() {
    equalheight('.container-fluid box');
});

Does not always work. instead us:

$(document).on('turbolinks:load', function() {
    equalheight('.container-fluid box');
});

Upvotes: 0

user3506853
user3506853

Reputation: 814

Use this :-

$(document).on('ready page:load', function() {
    equalheight('.container-fluid box');
})

OR this :-

$(document).on('ready', function() {
    equalheight('.container-fluid box');
});

Upvotes: 1

Related Questions