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
  • 338,112
  • 86
  • 474
  • 445
0

try 

$('div.content').css({'padding-left': **padding+'px'**})
Himanshu
  • 31,810
  • 31
  • 111
  • 133
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,871
  • 4
  • 31
  • 38
0

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

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

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317