CODEWITHSUNDEEP
javascriptjquerycssdomcomputed-style
Elle H
Elle H

Reputation: 12217

Detecting width: auto in jQuery

I'm retrieving the width of elements using jQuery and would prefer it if I could have an indication of whether there was an explicit width (and height) specified.

<div id="test"></div>
<script type="text/javascript">
$(function() { alert($('#test').css('width')); });
</script>

This will alert the implicit width of the div in terms of how many pixels it takes up on the client's screen. Is there any way that if the width is either missing or set as width: auto that it can be verified using jQuery?

That is, instead of the above example returning an integer, it would return either auto or undefined. Or, alternatively, is there an equivalent of a isAuto function?

Upvotes: 17

Views: 14922

Answers (6)

prdatur
prdatur

Reputation: 1009

This will get either string "auto" or "180px" on absolute values.

$('element').prop('style').width

for width or 

$('element').prop('style').height

for height.

Upvotes: 10

zsaat14
zsaat14

Reputation: 1118

As far as I know, there is no native jQuery function to detect auto widths or heights. So I wrote a plugin to do it.

$.fn.isAuto = function(dimension){
    if (dimension == 'width'){
        var originalWidth = this.innerWidth();
        var marginLeft = parseInt(this.css('margin-left'));
        var testMarginWidth = marginLeft+50;
        this.css('margin-left', testMarginWidth);
        var newWidth = this.innerWidth();
        this.css('margin-left', marginLeft);
        if(newWidth<originalWidth){
            return true;    
        }
        else{
            return false;
        }
    }
    else if(dimension == 'height'){
        var originalHeight = this.height();
        this.append('<div id="test"></div>');
        var testHeight = originalHeight+500;
        $('#test').css({height: testHeight});
        var newHeight = this.height();
        $('#test').remove();
        if(newHeight>originalHeight){
            return true;    
        }
        else{
            return false;
        }
    }
};

Originally, I had written it to do height, so I just expanded it to include width. You just call it like this:

$('#element').isAuto('width');

or

$('#element').isAuto('height');

Here is a fiddle demonstrating the plugin's functionality.

Upvotes: 3

Alex
Alex

Reputation: 1337

$('#test')[0].style.width=="auto" should work: http://jsfiddle.net/KxTLE/ and http://jsfiddle.net/KxTLE/1/ Try 

jQuery.fn.isAuto=function() {
if(this[0]) {
    var ele=$(this[0]);
    if(this[0].style.width=='auto' || ele.outerWidth()==ele.parent().width()) {
        return true;
    } else {
        return false;
    }
}
return undefined;
};

And example: http://jsfiddle.net/KxTLE/6/

Upvotes: 4

Ionuț G. Stan
Ionuț G. Stan

Reputation: 179119

I don't believe it's possible for the moment. At least not in any other browser than IE. IE implements element.currentStyle which represents styles at they were written in the CSS file. On the other hand, the rest of the browsers implement window.getComputedStyle which returns the computed values of those styles. That's what you receive there, a numeric value instead of auto.

The only way around it would be to parse CSS declarations from document.styleSheets.

References:

Upvotes: 9

elitepraetorian
elitepraetorian

Reputation: 43

  1. create function
  2. pass css element id to function
  3. write a case where statement to be performed on the width property of the element id

NOTE: to use on mulitple elements would be wise to use a loop with an array of element names

Upvotes: 0

Giles Smith
Giles Smith

Reputation: 1962

I am not quite sure if I am answering your question correctly, but if you use the width() function this will give you an integer representing the rendered width in pixels.

Upvotes: 0

Related Questions