CODEWITHSUNDEEP
javascriptdebuggingprototypejs
dwmcc
dwmcc

Reputation: 1074

Prototype JS 'getHeight()' changing object visibility and other madness

I am using JS (Prototype & Scriptaculous) to dynamically set the height of a div after an element is added inside the div. My code has been paraphrased below:

    bheight = $('body_'+current_item).getHeight();
    bheight += 22;
    bheight += 'px';
    $('body_'+current_item).setStyle({
    height: bheight
    });

In the code above, I first use the 'getHeight()' function to get the height of the unique body div. Then I add 22 to that number, and append 'px' to the end, and apply the change using 'setStyle'.

Here comes the weird part. When I run my function that this resides in after page load, everything runs perfectly. If, however, I add a line to run the function at the end of the javascript file (so it is run as the page loads), I get madness. The entire div disappears as the visibility has been magically changed. See a snippet below for info.

<div id="body_1" class="edit_bg_box" style="position: absolute; visibility: hidden; display: block; width: 200px; height: 22px;">Internal div data...</div>

Nowhere in my CSS or code am I setting the visibility to hidden or position to absolute. To compare, below is a snippet of what the div should look like.

<div id="body_1" class="edit_bg_box"></div>

At this point I'm losing my sanity. If I remove the 'getHeight()' function from the main div, everything displays normally (except for the div height which 'getHeight()' was supposed to fix). If I add the 'getheight()' function, the div disappears completely.

Any help would be greatly appreciated.

Upvotes: 0

Views: 479

Answers (1)

Geek Num 88
Geek Num 88

Reputation: 5312

The getHeight() method makes use of the getDimensions() method http://api.prototypejs.org/dom/Element/getDimensions/

and as part of the caveats in the documentation it mentions

If the element is hidden via display: none in CSS, this method will attempt to measure the element by temporarily removing that CSS and applying visibility: hidden and position: absolute. This gives the element dimensions without making it visible or affecting the positioning of surrounding elements

So there is a possibility that one or more of the parent elements of your div is hidden with display:none; and is shown after the page loads.

Upvotes: 2

Related Questions