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});
};
});
7 comments
Clemente G - kreativeKING wrote on
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??
Nouveller wrote on
I think you can.
Change:
$(function(){
$(’a’).click(myFunc);
}
To:
$(function(){
$(’a’).click.myFunc();
}
Liam Goodacre wrote on
I do believe you can do this…
var myFunc = function() {
// blah blah blah
}
$(function(){
$(‘a’).click(myFunc);
});
Kyle wrote on
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!
Nouveller wrote on
Do you have a demo of the page?
Kyle wrote on
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
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!