Say for example, your designer suddenly decides that having a postage stamp border on a site is a good idea, and tells you to code it up, you quickly realise that your side borders are going to have weird looking cutoffs like in the image below.
There are two options, a) in css make your line-heights, paddings, and margins of all elements always add up to the correct number to display the border properly, or b) add a few lines of jQuery to adjust the height for you.
$(function(){
var multiple = 20;
$('.post').each(function(){
if($(this).innerHeight()%multiple != 0){
$(this).height(parseInt($(this).height())+(multiple-$(this).innerHeight()%multiple));
}
});
});
This code basically just gets the current height of the element that needs to be set (in this case #page) as well as the top and bottom padding. It then checks if this isn’t a multiple of 20 (which is how high the repeating element is for the stamp), if it isn’t then it adds whatever is needed to reach the next highest multiple and sets it as the element height, minus the padding .
So there you are, keeping your designs in shape with jQuery.
How could I set this up so that it works separately on each member of a class? At the moment it applies the correct height to the first div which has the class, but then applies the same height to all the other divs too. I want to have text inside my divs, so I’d like the algorithm above to work separately on each div that has that class in this example:
http://blog.sound-guru.com/
I don’t have much experience with Javascript or JQuery, just trying to solve a specific design problem. Does it have anything to do with the each() command? Would be really grateful if you could help.
Hi Tom,
I’ve updated the code in the post to be a lot shorter and you can use it for a class or id properly. View a demo here https://justjquery.com/lab/heighttest/