CODEWITHSUNDEEP
javascriptjquery
alexandra
alexandra

Reputation: 187

plain javascript to jquery - clientHeight

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.

Upvotes: 7

Views: 23924

Answers (3)

yodabar
yodabar

Reputation: 4769

As far as today - September 2016, I can see that jQuery (ver 3.1.0) still does not include its own method to get the element.clientWidth and element.clientHeight in a normalized way accross different browsers.

Nevertheless, investigating on different sources, it turns out these JavaScript native properties are well supported on the majority of browsers used today.
On the MDN clientHeight article I can read it is supported on Chrome, Firefox (Gecko), Internet Explorer, Opera, Safari (WebKit), but no versioning is specified.

QuirksMode specifies these properties are supported from IE 9+ and other browsers when applied to the window and document objects.

In another QuirksMode article on the two properties applied to page elements, no specifications about browser support is given, but a very useful on-page tester is available to test by yourself element dimensions consistency on the browsers you have:

http://www.quirksmode.org/dom/tests/elementdimensions.html

On this article treating the clientHeight property there is an important focus on differences between physical pixels and logical pixels on IE < 8 and IE >= 8:

In Internet Explorer earlier than version 8, it retrieves the height in physical pixel size, while from version 8, it returns the height in logical pixel size.

Assuming that the use of the zoom on browsers is mainly used on mobile devices, I think it that:

  • it is safe enough using element.clientWidth and element.clientHeight for desktop audience pages/web apps;
  • for cross-device pages/web apps the usage of relative measure units (e.g. em's) could solve the gap between physical and logical pixels.

For an easier dimensions management, em unit could improve cross-platform development (W3 org specs on units and rem's draft), which seems to be supported on modern browsers. I still have no experience on relative measure units in CSS media-queries, but reading this interesting article on the best unit measure for CSS media-queries perhaps it deserves a study.

Any opinion on these considerations is appreciated.

Upvotes: 0

Bakudan
Bakudan

Reputation: 19492

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

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

Upvotes: 2

Chris Laplante
Chris Laplante

Reputation: 29658

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:

Upvotes: 10

Related Questions