4

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!

Rik
  • 155
  • 1
  • 2
  • 5

4 Answers4

4

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.

Community
  • 1
  • 1
Andy E
  • 326,646
  • 82
  • 467
  • 441
0

try 

$('div.content').css({'padding-left': **padding+'px'**})
Himanshu Jansari
  • 30,115
  • 28
  • 106
  • 129
calin014
  • 429
  • 1
  • 6
  • 17
0

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

var_padding = 22 - modulus;
$('div.content').css({'padding-left': var_padding})
dan richardson
  • 3,771
  • 4
  • 30
  • 38
0

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

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

Gabriele Petrioli
  • 183,160
  • 33
  • 252
  • 304