Forums

Maddtechwf

I have a small script that runs and makes sure that two of my divs are the same height and if not, then gives them the same height.

I'm trying to find a way to modify it to work with my Foundation3 layout. Once the scree is resized to a certain width or it's viewed from a mobile device, i need the two divs to just take on their auto height.

This is the code that I currently have.

var maxHeight = 0;
$('div.jHeight').each(function() {
if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
if (maxHeight < $('#content-section').height()) { maxHeight = $('#content-section').height()}
});
  $('div.jHeight').each(function(){
  $(this).Height("maxHeight");
});

Mottie

Hi Maddtechwf!

I really like the jQuery .map() example. But if you need a bit more functionality, check out the Equalizer plugin.

elneco

try this:

elneco

  $(function(){

      //mobile
      if( $(window).width() <= 495 ){
          $('div.jHeight').each(function() {
              $(this).css('height','auto');
          });    
      }
      //desktop
      else {
          var maxHeight = 0;

          $('div.jHeight').each(function() {
              if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
              if (maxHeight < $('#content-section').height()) { maxHeight = $('#content-section').height()}
              $(this).css('height',maxHeight);
          });
      }

  });

  $(window).resize(function() {

      $('div.jHeight').each(function() {
          $(this).css('height','auto');
      });    

  });

Vinnix

If one div takes prescendence over the other then JS is your solution, but for mobile couldn't you target a mobile.css and have the widths to auto? Mobile detection would be pretty good as well? Lookup some HTML5 boilerplates and a document inspector like modernizr

Maddtechwf

Thanks for all the help guys. I got it working now.

treehouse : what would you like to learn today?

Forums

[Solved] Javascript For Div Height