jQuery function to test if element has auto size or not (width or height = auto)
In IE, $(element).css("width") would return "auto" if width is not set or set = "auto". But in other browser like Firefox, Chrome... result always specific value. So I made this function to test width and height of an element is auto or not.
$.fn.isAutoSize = function(){ $(this).before('
'); var $st = $('#____size_test____'); var $clone1 = $(this).clone(); var $clone2 = $(this).clone(); $st.append($clone1).append(' ').append($clone2); var r = []; //Auto width test $clone1.css({ 'display': 'inline', 'white-space': 'normal' }).html('1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'); $clone2.css({ 'display': 'block', 'white-space': 'normal' }).html('1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'); if($clone1.width() == $clone2.width()){ r[0] = true; }else{ r[0] = false; } //Auto height test $clone1.css({ 'width': '1px', 'display': 'block' }); $clone2.css({ 'width': '9999px', 'display': 'block' }); if($clone1.height() != $clone2.height()){ r[1] = true; }else{ r[1] = false; } $st.remove(); return r; };
Use
Lorem ipsum
var r = $('#div1').isAutoSize(); if(r[0] == true){ alert('auto width'); }else{ alert('specific width'); } if(r[1] == true){ alert('auto height'); }else{ alert('specific height'); }
