rails jquery script does not work when clicking link

Question

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');
});

Please elaborate "if i click on the home button it does not load". What is this button, a link or u ve an event attached to it? — Harry Bomrah
– Harry Bomrah, Commented Nov 23, 2015 at 12:07
Possibly a duplicate of this question: stackoverflow.com/questions/21226357/… — Marco Sandrini
– Marco Sandrini, Commented Nov 23, 2015 at 12:07
i've tried that duplicate but could not get it to work properly, and updated my question — Mischa
– Mischa, Commented Nov 23, 2015 at 12:10
i'm not getting an error, it just doesn't do anything because the .load or .resize events are not called — Mischa
– Mischa, Commented Nov 23, 2015 at 12:14

user3506853 · Accepted Answer · 2015-11-23 12:17:00Z

1

Use this :-

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

OR this :-

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

answered Nov 23, 2015 at 12:17

user3506853

8145 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mischa Over a year ago

if i use this it completely messes up my css for some reason and makes rows collapse over different rows

Mischa Over a year ago

got it to work, as long as I add this instead of replace the window.load. not sure it's the cleanest solution but it works. thanks

D4v1dW3bb · Accepted Answer · 2020-05-19 22:38:34Z

0

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

Does not always work. instead us:

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

answered May 19, 2020 at 22:38

D4v1dW3bb

681 silver badge7 bronze badges

Collectives™ on Stack Overflow

rails jquery script does not work when clicking link

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related