CODEWITHSUNDEEP
javascriptjqueryheight
Arul Anthony
Arul Anthony

Reputation: 23

How to find the height of the var that has html content in it

function appData (arg) {
    var tmp ='<div  class="eventPopUp" z-index:6;">asdfasd <br> asdfasd <br> asdfasd <br> asdfasd<div style="clear:"></div></div>'
    $(arg).html(tmp);
    var off= $(tmp).offset().left;
    var wid = $(tmp).width();
    //var hei = $(arg).children().height();
    var hei = $(tmp).outerHeight();


    console.log('width is ' + wid + ' height is ' + hei);
 }

Hi in above function i am making a variable that has html elements in it and i want to know the height and width of the tmp variable(becasue the content gets updated dynamically) My problem is i can get the width of the variable tmp by using width() method and i am getting height 0 by using height() method. please help me to find the height of the var tmp. and if i explictly give height by using style then height() method is giving proper answer and arg is 'li' were i append this varible.

Upvotes: 0

Views: 148

Answers (2)

Andrei Cristian Prodan
Andrei Cristian Prodan

Reputation: 1122

The reason why you are getting 0, is most likely because you are reading the height before the element has any content in it. In other words, try using document ready

$( document ).ready(function() {
// call appData function here
});

If this doesn't work, try using setTimeout

x = setTimeout(function() {
// call appData or read height and if height of my selection is != 0 then
// {
// clearTimeout(x);
// myHeight = height of my selection
// call function that does something with it and send it as a param
// }
}, 1000);

You check for the height every second until the height is different from 0. This is a hack, I don't recommend it, unless you start leaving forehead marks on the wall.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337610

jQuery seems to be confused as to exactly which element you are selecting when doing $(tmp) and therefore returns an empty height.

If you define the string as an object explicitly on initialisation, the height can be calculated once it's attached to the DOM. Try this:

function appData(arg) {
    var $tmp = $('<div class="eventPopUp">asdfasd <br> asdfasd <br> asdfasd <br> asdfasd<div style="clear:"></div></div>')
    $(arg).append($tmp);

    var off = $tmp.offset().left;
    var wid = $tmp.width();
    var hei = $tmp.outerHeight();   

    console.log('width is ' + wid + ' height is ' + hei);
}

Example fiddle

Upvotes: 2

Related Questions