CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2300867
user2300867

Reputation: 603

Giving specific css with jquery for each instance of div depending on text height

I have a grid with several boxes (280px by 280px)and I need to vertical align text enclosed on hover overlays.

My code is working for first element but txt lenght/height varies on each box and I need a function that assigns top padding depending on specific p height.

I believe I can use .each , but I wasn't able to implement it successfully.

Here is my working code that I need to modify to target each box individually:

    var txtHeight = $( ".login-item .lgn-overlay p" ).height();
    var topPadding = ((284 - txtHeight) / 2);
    $('.login-item .lgn-overlay').css('padding-top', topPadding);

Upvotes: 0

Views: 40

Answers (2)

Bhaskar Dabhi
Bhaskar Dabhi

Reputation: 909

$('.login-item .lgn-overlay').each(function(){
    var $this = $(this);
    $this.css('padding-top', function(){
        return ((284 - $this.find("p").height()) / 2);
    });
});

Try if this works. I made this on plan page so correct if any error in the code

Upvotes: 1

KJ Price
KJ Price

Reputation: 5994

Try something like this

//determine this programmatically 
var necessaryHeight = 200;
$('.login-item .lgn-overlay').each(function () {
   //this = each individual element
   //$this = a jQuery wrapper for the given element.
   var $this = $(this);
   //The rest I think you understand
   var thisHeight = $this.outerHeight();
   var missingHeight = necessaryHeight - thisHeight;
   var addedPadding = missingHeight / 2;
   $this.css('padding-top', addedPadding);
});

Upvotes: 0

Related Questions