21
May

Quick Tip #1 - Getting min-height to work in all browsers using jQuery (JavaScript)

With most sites I build, I would have quite a big use for min-height but with not all browsers supporting it, I can’t really use it. So today I had a bash using jQuery to solve this dilemma, and here’s what I came up with.

First I defined my minimum height for my element in a var called minHeight. Then defined the height of the element (that I wanted to apply the minimum height to) as the page was loading into actualHeight using jQuery’s height() function to obtain the value.

Then using an if statement I basically said, if the height of my div is smaller than my minimum height, apply the minimum height to it’s CSS property.

Give it a whirl! Comment below with any problems or where you’ve used it.

$(document).ready(function(){
 
	var minHeight = 540;
 
	var actualHeight = $('#div-name').height();
 
	if (actualHeight < minHeight){
 
		$('#div-name').css({'height' : minHeight});
 
	};			
 
});

Author: Benjamin Reid

My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.

Subscribe to the RSS feed some design goodness, get in on the upcoming software give-aways!

This entry was posted on Thursday, May 21st, 2009 at 5:39 pm and is filed under Quick Tips & tagged with CSS, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses | Make a comment

Clemente G - kreativeKING wrote on May 29, 2009

Great tip, I’ve just starting messing with jQuery recently. I must say it is great.

You know if theres a way to handle jQuery with using named callbacks instead of creating the function in the callback area.

Ex:
Normal Way

$(function(){
$(’a’).click(function({
“blahblah”});
});

Named Way

$(function(){
$(’a’).click(myFunc);
}

function myFunc(){
“blahblah”
}
);

Any Tips??

Reply
- Nouveller wrote on May 29, 2009
  
  I think you can.
  
  Change:
  
  $(function(){
  $(’a’).click(myFunc);
  }
  
  To:
  
  $(function(){
  $(’a’).click.myFunc();
  }
  
  Reply
- Liam Goodacre wrote on June 17, 2009
  
  I do believe you can do this…
  
  var myFunc = function() {
  // blah blah blah
  }
  
  $(function(){
  $(’a').click(myFunc);
  });
  
  Reply
Kyle wrote on August 14, 2009

This gets me *so* close — however, how can I add a resize event? AND — the problem with a resize event is that it can change the “actualHeight” value to one other than what the DOM thought it was at page load — which is what I want to keep for resize. Thanks!

Reply
- Nouveller wrote on August 14, 2009
  
  Do you have a demo of the page?
  
  Reply
  - Kyle wrote on August 14, 2009
    
    It’s not up but here’s the rewritten code:
    
    function setHeight() {
    var winHeight = $(window).height();
    var minHeight = winHeight - 80;
    var actualHeight = $(’#page-inner’).height();
    if (actualHeight < minHeight){
    $(’#page-inner’).css({’height’ : minHeight});
    };
    }
    
    $(document).ready(function(){
    setHeight();
    });
    
    $(window).resize(function(){
    setHeight();
    });
  - Kyle wrote on August 15, 2009
    
    OK I have something up:
    http://www.skrinakcreative.com/illumaware-redesign
    
    Note that the problem isn’t immediately apparent; and here’s what I’d like to do. When someone loads the page, the div’s (where I’m setting the min-height value; if necessary) “actual height” should be a persistent value; at least persistent for the duration of that visit. Currently, however, when jquery changes the actual height, as I ask it to, it skews the behavior. You can see this where resizing to a higher vertical value works, but resizing to a lesser vertical value doesn’t (as it follows the logic)
    
    So, how does one load the “actual height” with a persistent value and then work against that across successive page resizings?
    
    The script for the page resides at:
    http://www.skrinakcreative.com/illumaware-redesign/sites/all/themes/illumaware/script-6241.js
    
    Thanks!