I'm trying to equalize columns in my rails 3.2 app, and while there may be a better way to do it then my current attempt, after hours of trying to make it work I'd like to see if anyone can point out specifically why this jQuery plugin (which isn't a gem) is not working. I'm not getting any errors in the developer console, so it's hard to pin point. Here's the relevant code:
The index
view, where I've followed the plugin's instructions:
div id="column-group">
<div class="equalize span5 offset1 UserProfile">
<% if user_signed_in? %>
<h3>Hello <%= current_user.name %>!</h3>
</div>
<div class="equalize span5 MemberDisplay">
My application.js file, where I've also included the specific js code, so it would definitely be picked up by the application:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require equalize_column_heights
//= require_tree .
$(document).ready(function() {
$("#column-group").equalize_column_heights("equalize");
});
The jQuery plugin code, which is saved in my vendor/assets/javascripts folder:
(function ($) {
$.fn.equalize_column_heights = function (equalize_class) {
var tallest_column=0;
parent_id = "column-group" + $(this).attr("id") + " ." + equalize_class;
$(parent_id).each(function(index, value) {
if (tallest_column < $(this).height()){ tallest_column = $(this).height(); }
});
$(parent_id).each(function(index, value) {
$(this).css({'min-height': tallest_column});
});
}
}(jQuery));
I've read all the rails guides documentation on the asset pipeline and all the relevant jQuery-rails3 questions on SO, but after several hours, I just can't seem to figure this one out. If anyone can point to other tutorials on how to get non-gem jQuery plugins to work in a Rails 3.2 app then I'd be glad to take a look!
