CODEWITHSUNDEEP
jquery
valerio massacci
valerio massacci

Reputation: 39

Get each span height and if it's more than 40px change the css

Can anyone help me, I don't understand where the error is.

This is my jQuery:

function altezzadotgrey(){
    $('.views-field-title').each(function(){
        var aaltezzadotgrey = $(this).outerHeight();
        if ($(this).outerHeight() > 40) {
            $(this).css("margin-top", "-45px");
        }
    });
}

and this is my HTML:

<div class="views-row">
    <div class="views-field-title">
        <span class="field-content"><a href="">a</a></span>
    </div>
</div>
<div class="views-row">
    <div class="views-field-title">
        <span class="field-content"><a href="">b</a></span>
    </div>
</div>
<div class="views-row">
    <div class="views-field-title">
        <span class="field-content"><a href="">c</a></span>
    </div>
</div>
<div class="views-row">
    <div class="views-field-title">
        <span class="field-content"><a href="">d</a></span>
    </div>
</div>

I think there could be a problem with the each().

Upvotes: 0

Views: 910

Answers (3)

Yashpal Singla
Yashpal Singla

Reputation: 1994

You just need to call your function on body load

$( function() {    
    altezzadotgrey();    
});

function altezzadotgrey(){
    $('.views-field-title').each(function(){
        var aaltezzadotgrey = $(this).outerHeight();
        if ($(this).outerHeight() > 40) {
            $(this).css("margin-top", "-45px");
        }
    });
}

Everything else is correct

Upvotes: 0

Dan F.
Dan F.

Reputation: 1373

jQuery.css uses "DOM style" properties rather than the CSS style, so you this:

$(this).css("marginTop", -45);

See here: http://jsfiddle.net/4upSX/1/

Actually it works with "margin-top" also... so are you sure your '.views-field-title' are actually higher than 40px?

Upvotes: 1

coolguy
coolguy

Reputation: 7954

function altezzadotgrey(){

  $('.field-content').each(function(){

        var h= $(this).css('height');
        if (parseInt(h)  > 40) {
            $(this).css("margin-top","-45px"); 
        }
    });
 }

Upvotes: 0

Related Questions