Modify external CSS values

Question

Hi I am trying to dynamicly change the height of a division using JavaScript but I can only get the JS to read the Height element of the div if it defined using style tags inside the HTML mark-up.

If its in a separate sheet it returns NaN, I'm assuming because it can't find a value and is actually returning null (I'm using ParseInt to make it work).

Here is the HTML:

<div id="dropdown_container">
    <div id="dropdown" style="height:100px;">
    a
    </div>
</div>

(Wish the HTML stlye markup)

And here is the JS:

function clickDown() {
    var el = document.getElementById('dropdown');
    var maxHeight = 200;
    getHeight = parseInt(el.style.height.substring(0,(el.style.height.length)-2));
    console.log(getHeight);
    getHeight += 2;
    el.style.height = getHeight + 'px';
    timeoutHeightInc = setTimeout('clickDown()',15);
    if(getHeight >= maxHeight){
        clearTimeout(timeoutHeightInc);

    }
}

Does anyone know of a reason for this (mis?)functionaility. And a solution for it?

Here is a jsFiddle.

Try moving the height over to the CSS to see the issue i'm having.

No, NaN means Not A Number, not null. Returning NaN means you're trying to read something as a number that isn't, like text. — Polyov
– Polyov, Commented Aug 12, 2012 at 21:25
parseInt automatically removes px, but you shouldn't omit the radix. getHeight = parseInt(el.style.height, 10) should work if the height isn't auto. Passing a string to be evaluated by setTimeout is bad practice, even more when you're passing a function call. Better pass a function reference setTimeout(clickDown, 15); does the same without eval. Could you try reproducing the behavior on jsfiddle.net ? — Fabrício Matté
– Fabrício Matté, Commented Aug 12, 2012 at 21:30
@SomekidwithHTML I know it means that, I ment its probably returning null and then parseInt its trying to turn that into a number ad throwing NaN back — wezternator
– wezternator, Commented Aug 12, 2012 at 21:36
@wezternator yes, exactly. null is what's being returned, and parseInt is trying to read it as a number. — Polyov
– Polyov, Commented Aug 12, 2012 at 21:39

GitaarLAB · Accepted Answer · 2012-08-12 21:49:40Z

1

ParseInt is missing it's radix.

You say:

I can only get the JS to read the Height element of the div if it defined using style tags inside the HTML mark-up

Now you are only reading the div's attribute style. Which you set inline. So if you remove that, than you can not read it anymore. Make sense?

You want to get the computed height. Try: .offsetHeight

Basis of test-case to play with inc. fixed radix. this fiddle

UPDATE: tada: fixed, see this updated fiddle

function clickDown() {
    var el = document.getElementById('dropdown');
    var maxHeight = 200;
    getHeight = parseInt(el.offsetHeight,10);
    console.log(getHeight);
    getHeight += 2;
    el.style.height = getHeight + 'px';
    timeoutHeightInc = setTimeout('clickDown()',15);
    if(getHeight >= maxHeight){
        clearTimeout(timeoutHeightInc);

    }
}

edited Aug 12, 2012 at 21:49

answered Aug 12, 2012 at 21:23

GitaarLAB

14.7k12 gold badges62 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wezternator Over a year ago

I did not know that thanks! the problem has being bugging me for ages.

Collectives™ on Stack Overflow

Modify external CSS values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related