Javascript/jQuery - Use modulus to ensure height of div is a multiple of x

Question

Hello,

I've got a blog with lots of div.contents, each of which I'd like to have a height as a multiple of 22px (so all the text lines up with a background image of a grid). I'm imagining you'd probably do something like:

    // loop for each div.content   
    // var height =  $('div.content').height()
    // var modulus = height%22
    // var padding = 22 - modulus
    // $('div.content').css({'padding-left': 'PADDINGpx'})

Does that sound about right? I'm not too great with JS. How do you get the padding variable into the jquery function?

Thanks in advance!

Answer 1

It looks fine to me. You need to use string concatenation to join the variable with the string:

$('div.content').css({'padding-left': padding+'px'});

One point to make is that if the div is a multiple of 22, you'll still be adding 22px to it. If that's not desired, use an if statement to conditionally add the padding:

// loop for each div.content   
var height =  $('div.content').height();
var modulus = height%22;
var padding = 22 - modulus;

if (modulus)
    $('div.content').css({'padding-left': padding+ 'px'});

ps, don't forget your semicolon line terminators.

Answer 2

try $('div.content').css({'padding-left': padding+'px'})

Answer 3

You would simply just do the following to get the padding in

var_padding = 22 - modulus;
$('div.content').css({'padding-left': var_padding})

Answer 4

I think giving it a line-height:22px should do the trick automatically..

(maybe i am understanding something wrong, though ..)