jQuery: adding css depending on if statement

Question

I want to check the height of an image (there are multiple such elements on a page). If the height is greater than 66px, I want to apply a negative top margin equal to half of its height.

The following code doesn't do anything. What is wrong with my if statement?

if($('.topstories a.image img').height() > 66){
    var margintop = -0.5 * ($(this).height() - 66);
    $(this).css('margin-top', 'margintop');
}

Mathew Thompson · Accepted Answer · 2012-04-18 12:04:20Z

4

You've put the value to margintop in quotes, so it's treated as a string literal (an invalid value in this case). Try:

$(this).css('margin-top', margintop);

answered Apr 18, 2012 at 12:04

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mathew Thompson Over a year ago

Are you sure you're applying the style to the correct element? What is this in this context? Have you tried specifying the selector in place of this? Something like $("#idOfImage").css('margin-top', margintop);

chipcullen · Accepted Answer · 2012-04-18 12:48:46Z

2

I don't know the rest of your function, but you to go through each image, you'll need to use a loop or each(). Something like:

$('.topstories a.image img').each(function(){
    if($(this).height() > 66)){
        var margintop = 0.5 * ($(this).height());
        $(this).css('margin-top', '-' + margintop);
    }
});

I'm thinking that your subtraction of 66 in the math operator also is causing an issue - if the image height is 67, and you subtract 66, you get 1. 1 * .5 sort of equals 0, so you wouldn't see an effect.

answered Apr 18, 2012 at 12:48

chipcullen

7,0001 gold badge23 silver badges17 bronze badges

Comments

jazzytomato · Accepted Answer · 2012-04-18 12:05:28Z

1

replace

$(this).css('margin-top', 'margintop');

with

$(this).css('margin-top', margintop);

answered Apr 18, 2012 at 12:05

jazzytomato

7,2593 gold badges33 silver badges44 bronze badges

Collectives™ on Stack Overflow

jQuery: adding css depending on if statement

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related