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

Question

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')) {
  ...
}

Solution 1

Use replace():

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

Alternatively, you could use the parseInt function:

alert(parseInt('1px')); //Result: 1

Solution 2

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()) {

Solution 3

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)

Solution 4

If you pass the return value from .css('min-width') to parseInt first, it will remove the "px" for you.

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

(Don't forget the second parameter to parseInt.)

View more solutions

Comments

[pimvdb]

It will still be a string, though.

[Samir Adel]

but the string a string that is valid to make any operation on it

[Samir Adel]

what do you want to make with the result ?!

[pimvdb]

I just mean that '50px'.substring(0, 2) + 1 === '501'.

[Nahydrin]

jQuery.isNaN should just be isNaN. I know this post is old, but this answer is by far the best in here.