CODEWITHSUNDEEP
javascriptjquery
Janey
Janey

Reputation: 1310

Javascript only works after page refresh

I have some code that I found online that makes both divs on my website become equal lengths. However, this code only works after the page is refreshed and I have no idea what would cause this. Any help would be appreciated!

 // EQUAL HEIGHTS
$.fn.equalHeights = function(px) {
    $(this).each(function(){
        var currentTallest = 0;
        $(this).children().each(function(i){
            if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        });
    if (!px && Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
        // for ie6, set height since min-height isn't supported
        if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
        $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};

// just in case you need it...
$.fn.equalWidths = function(px) {
    $(this).each(function(){
        var currentWidest = 0;
        $(this).children().each(function(i){
                if($(this).width() > currentWidest) { currentWidest = $(this).width(); }
        });
        if(!px && Number.prototype.pxToEm) currentWidest = currentWidest.pxToEm(); //use ems unless px is specified
        // for ie6, set width since min-width isn't supported
        if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'width': currentWidest}); }
        $(this).children().css({'min-width': currentWidest}); 
    });
    return this;
};

 // CALL EQUAL HEIGHTS  
 $(function(){ $('#equalize').equalHeights(); });

Upvotes: 0

Views: 3987

Answers (2)

Mihai Matei
Mihai Matei

Reputation: 24276

This behavior happens because the plugin was not well written. I've modified it for you and now it should work.

Working DEMO

Plugin script:

// EQUAL HEIGHTS
  $.fn.equalHeights = function(px) {
      var currentTallest = 0;
      $(this).each(function(){
          $(this).siblings().each(function(i){
              if ($(this).height() > currentTallest) { 
                currentTallest = $(this).height();
              }
          });
      });

      if (!px && Number.prototype.pxToEm) {
        currentTallest = currentTallest.pxToEm(); 
      }
      $(this).siblings().css({'height': currentTallest, 'min-height': currentTallest});
      return this;
  };

You can modify the equalWidths plugin to work as this plugin.

Upvotes: 2

chandu
chandu

Reputation: 2276

put all your code in jquery ready function. inside ready function code executes when the DOM is ready

$(document).ready(function(){
//your code
});

Upvotes: 0

Related Questions