Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery min-width vs width: How to remove px?

Trying some basic jQuery and JavaScript here.

The .width() gives me an integer value. The .css('min-width') gives me a value ending in px. Therefore I can't do math on this as is. What is the recommended work around?

alert($('#<%=lstProcessName.ClientID%>').parent('.column4').width());
alert($('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width'));
alert($('#<%=lstProcessName.ClientID%>').parent('.column4').width() >= $('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width'));

if ($('#<%=lstProcessName.ClientID%>').parent('.column4').width() >= $('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width')) {
  ...
}
like image 368
Dan Avatar asked Aug 02 '11 19:08

Dan


3 Answers

Use replace():

alert($('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width').replace('px', ''));

Alternatively, you could use the parseInt function:

alert(parseInt('1px')); //Result: 1
like image 54
James Hill Avatar answered Oct 15 '22 02:10

James Hill


The better way is to use parseInt. jQuery functions .width() and .height() work quite so.

Also, it would be good to encapsulate fetching of this values in standalone functions:

  • .minHeight(), .minHeight( size ), .minHeight( function() )
  • .maxHeight(), ...
  • .minWidth(), ...
  • .maxWidth(), ...

Like this:

(function($, undefined) {

    var oldPlugins = {};

    $.each([ "min", "max" ], function(_, name) {

        $.each([ "Width", "Height" ], function(_, dimension) {

            var type = name + dimension,
                cssProperty = [name, dimension.toLowerCase()].join('-');

            oldPlugins[ type ] = $.fn[ type ];

            $.fn[ type ] = function(size) {
                var elem = this[0];
                if (!elem) {
                    return !size ? null : this;
                }

                if ($.isFunction(size)) {
                    return this.each(function(i) {
                        var $self = $(this);
                        $self[ type ](size.call(this, i, $self[ type ]()));
                    });
                }

                if (size === undefined) {
                    var orig = $.css(elem, cssProperty),
                        ret = parseFloat(orig);

                    return jQuery.isNaN(ret) ? orig : ret;
                } else {
                    return this.css(cssProperty, typeof size === "string" ? size : size + "px");
                }
            };

        });

    });

})(jQuery);

And your code will turn to:

alert($('#<%=lstProcessName.ClientID%>').parent('.column4').width());
alert($('#<%=lstProcessName.ClientID%>').parent('.column4').minWidth());
alert($('#<%=lstProcessName.ClientID%>').parent('.column4').width() >= $('#<%=lstProcessName.ClientID%>').parent('.column4').minWidth());
if ($('#<%=lstProcessName.ClientID%>').parent('.column4').width() >= $('#<%=lstProcessName.ClientID%>').parent('.column4').minWidth()) {
like image 43
Alex Yatkevich Avatar answered Oct 15 '22 04:10

Alex Yatkevich


Some string manipulation to remove 'px' and then use parseInt to get it as a number:

var minWidth = parseInt($('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width').replace('px', ''), 10)
like image 2
Mrchief Avatar answered Oct 15 '22 03:10

Mrchief