CODEWITHSUNDEEP
javascriptjquerytextarea
Neph
Neph

Reputation: 418

element height after content change

I have a snippet of code that alters the contents of a DIV to match the contents of a textarea and then applies the height change in the DIV to the textarea element.

<textarea class="fieldEdit" data-fieldid="1_description"></textarea>
<div class="hiddenDiv" data-fieldid="1_description"></div>

<Script>
$('.fieldEdit').live('keyup', function(){growTextArea(this)});

function growTextArea(parameter) {
// works
     $('div').find("[data-fieldid='1_description']").text($(parameter).val());
     $("[data-fieldid='1_description']").text($(parameter).val());

// No Works
     height = $('div').find("[data-fieldid='1_description']").outerHeight();
     height = $("[data-fieldid='1_description']").outerHeight();
     alert(height);

// Works
     heightDiv = $('.hiddenDiv').outerHeight();
     alert(heightDiv);

     $(parameter).css('height', $('div').find("[data-fieldid='1_description']").outerHeight());
}
</script>

The DIV contents change properly, so the search function is working properly, however the search function always returns the original height of the DIV. The function is called by onKeyUp in the textarea. If the .find is swapped out for a .hiddenDiv the height change is reflected properly.

Upvotes: 0

Views: 333

Answers (1)

Rob Brown
Rob Brown

Reputation: 21

You need to use the jQuery promise function. Something like:

$('#divId').html(someText).promise().done(function(){
        // check height now
    });

Upvotes: 2

Related Questions