plain javascript to jquery - clientHeight

Question

I have the following script

(function(win){
    var doc = win.document;
    if (doc.querySelector && doc.addEventListener) {
        var toggler = doc.querySelector('.toggle-menu')
        var menu = doc.querySelector('.main-nav ul');
        menu.style.height = '0px';
        toggler.addEventListener('click',function(e) {
            e.preventDefault();
            if (menu.style.height == '0px') {
                menu.style.height = 'auto';
                if (menu.clientHeight != 0) {
                    menu.style.height = menu.clientHeight+'px';
                }
            } else {
                menu.style.height = '0px';
            }
        });
    }
})(this);

What will be the jQuery version of that script, since i can't find a jQuery equivalent to clientHeight.

Answer 1

clientHeight is not a jQuery property. It was introduced in Internet Explorer, but isn't part of the W3C specifications. It looks like it is only supported in Firefox and Internet Explorer. I've just tested that it works in the latest version of Chrome, though. Not sure if results are standard across browsers, though the link I posted below suggests no.

Also, Mozilla suggests the following formula to be used in place for browsers that don't support it:

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

I'm assuming that is the scrollbar of the element itself, not the entire browser window, unless the element takes up the entire window.

Sources:

• clientHeight/clientWidth returning different values on different browsers
• https://developer.mozilla.org/en/DOM/element.clientHeight

Answer 2

There is .height(). It will return the height of an element.

var menu = $('.main-nav ul');
....
menu.height()+'px';