CODEWITHSUNDEEP
jquery
joe
joe

Reputation: 405

jQuery detecting first paragraph height different using .attr() .first()

I'm trying to get the first paragraph height within a div and store it as an attribute.

It works on the first paragraph in the first div with the class .actor-bio.

On the second div with the class .actor-bio it displays the attribute of the first div's paragraph.

    //has to be in an each to get different values of varying paragraph lengths
    $('.actor-bio').each(function(){

        //Gets original height of the content area
        $(this).attr('originalheight', $(this).innerHeight());

        //Gets the first paragraph height
        $('p', this).first().attr('firstpheight', $('p',this).first().innerHeight());

        //Gets the first h3 height
        $('h3', this).first().attr('firstheaderheight', $('h3',this).first().innerHeight());

        //Sets the height of the wrapper to first paragraph height + h3 height
        $(this).css({height : parseFloat($('p', $(this).closest('.actor-bio-wrapper')).first().attr('firstpheight')) + parseFloat($('h3', $(this).closest('.actor-bio-wrapper')).first().attr('firstheaderheight'))});

    });

Has anyone got any suggestions?

Thanks in advance

*Edit 16:44GMT 22/06/2012**

Here is the jsFiddle link: http://jsfiddle.net/SqzL5/2

Annoyingly my code works with jsFiddle, it must get mixed up with another "(this)" elsewhere causing the issue. Using defuz's method also works in jsFiddle, but not on my site grr. http://jsfiddle.net/SqzL5/1/

*Edit 11:17GMT 26/06/2012**

Right I gave up on this method as the code seemed to only be getting 1 paragraph value. Anyway I did this instead.

    // Read more after first paragraph

if($('.read-bio').length>0){

        //has to be in an each to get different values of varying paragraph lengths
        $('.actor-bio').each(function(index, item){

                $('p:not(:first)', item).hide();

        });

        $('.read-bio').click(function(){

                //If class has class 'clicked' animate to first p height + h3 height
                if($(this).hasClass('clicked')){
                        $('.actor-bio p:not(:first)', $(this).closest('.actor-bio-wrapper')).animate({height: 'toggle'});
                        $(this).html('&raquo; <strong>Read</strong> More').removeClass('clicked');
                } 

                //If no 'clicked' class, animate the height to the original height of the text
                else{

                        $('.actor-bio p:not(:first)', $(this).closest('.actor-bio-wrapper')).animate({height: 'toggle'});
                        $(this).html('&raquo; <strong>Read</strong> Less').addClass('clicked');

                }

                //stops the stupid # appearing the address bar
                return false;

        });
}

Upvotes: 0

Views: 215

Answers (1)

defuz
defuz

Reputation: 27611

I think you are not using this correctly. Try:

//has to be in an each to get different values of varying paragraph lengths
$('.actor-bio').each(function(index, item){

    //Gets original height of the content area
    $(item).attr('originalheight', $(item).innerHeight());

    //Gets the first paragraph height
    $('p', item).first().attr('firstpheight', $('p',item).first().innerHeight());

    //Gets the first h3 height
    $('h3', item).first().attr('firstheaderheight', $('h3',item).first().innerHeight());

    //Sets the height of the wrapper to first paragraph height + h3 height
    $(item).css({height : parseFloat($('p', $(item).closest('.actor-bio-wrapper')).first().attr('firstpheight')) + parseFloat($('h3', $(this).closest('.actor-bio-wrapper')).first().attr('firstheaderheight'))});

});

Upvotes: 1

Related Questions