0

After creating a Div 'MyParent' , and many childs with different widths&heights are added to this 'MyParent' . By the end, i want to know the final width & height of 'MyParent' in pixels. I've used the familiar functions to get a width & height , i got 0 in all attempts.

Here's a simple code :

var myPrt = document.createElement('div');
var C1 = document.createElement('div');
var C2 = document.createElement('div');
var C3 = document.createElement('div');

myPrt.appendChild(C1);
myPrt.appendChild(C2);
myPrt.appendChild(C3);

$(C1).css({position:absolute;left:-100px;top:100px;width:100px;height:50px;background:red});
$(C2).css({position:absolute;left:100px;top:-100px;width:75px;height:50px;background:yellow});
$(C3).css({position:absolute;left:150px;top:200px;width:90px;height:50px;background:black});

$(myPrt).height(); // returns 0
$(myPrt).css('height') // returns 0
$(myPrt).innerHeight(); // returns 0
$(myPrt).outerHeight(); // returns 0
myPrt.clientHeight; // returns 0

In simple way to get that ?

Because actually I've found a solution to this problem , but it acts in the Childs, create a loop that goes throw all the Parents Childs , then get the max left and min left of these childs , then it returns the distance between the min & max , and the same tip for the Height by getting the max/min top, however ,this tip needs childs to have an absolute position to get there left/top am looking for an existing jquery or javascript function that does that without absolute position for childs .

Thanks

1 Answer 1

0

Take a look at this JSFiddle, you're just being clumsy I think. You never added the myPrt div to the document for one.

The other issue is that you're not passing the css as a properly formatted javascript dictionary with string variables.

http://jsfiddle.net/FcSEG/1/

var myPrt = document.createElement('div');
$('body').append(myPrt);

var C1 = document.createElement('div');
var C2 = document.createElement('div');
var C3 = document.createElement('div');

myPrt.appendChild(C1);
myPrt.appendChild(C2);
myPrt.appendChild(C3);

$(C1).css('width','500');
$(C1).css('height','500')
$(C1).css('background','red');

alert($(myPrt).height());
6
  • Negative, testing myPrt.outerWidth , myPrt.innerWidth are returning nothin , $(myPrt).innerWidth(), $(myPrt).outerWidth() are returning 0 . Jul 10, 2013 at 12:24
  • Post the actual css you're using then Jul 10, 2013 at 12:59
  • I've updated the question and add some simple css . and i've tried myPrt.width; and nothing is coming out . Jul 10, 2013 at 15:34
  • Maybe because i am using it inside a jquery plugin ? '_' , but the issue is that graphically evrything is correct :s Jul 11, 2013 at 15:29
  • are you properly formatting the jquery plugin? You need to be careful, especially if you use the dollar sign inside of your plugin. Read up on it here: learn.jquery.com/plugins/basic-plugin-creation Jul 12, 2013 at 16:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.