jquery .css("width") with two values

Question

I want to have a jquery function that runs if the width of my div (.slider) is between 650px and 521px. I have this so far for code which isn't working and I am unsure of how to write the greater than less than part:

} else if ($(".slider").css("width") < "651px" || > "520px") {

I am getting this error in the console: Uncaught SyntaxError: Unexpected token >

*******UPDATE***** I am now using:

 var w = parseFloat($('.slider').css('width')) 

 if (w > 651) {
              //do something here
 } else if (w < 651 || w > 520) {
              //do something here
 } else if (w <= 520) {
             //do something here
 } else {
            //do something here
 }

but for some reason it is stuck at the 'else if (w < 651 || w > 521)' conditional so when my div is less than 520 in width it is still firing what's inside that conditional.

expression wrong ? + cant compare strings as number values (num+'px')!! — Bourbia Brahim
– Bourbia Brahim, Commented Jul 1, 2017 at 22:49
I know the expression is wrong. Is there a solution to the "cant compare strings as number values (num+'px')" problem? — jessica mele
– jessica mele, Commented Jul 1, 2017 at 22:54
well, it's getting stuck because it will always be either smaller than 651 or bigger than 520, so that elseif will always return true. you need && not || — m3characters
– m3characters, Commented Jul 1, 2017 at 23:36

Canvas · Accepted Answer · 2017-07-01 22:41:32Z

0

jsFiddle: https://jsfiddle.net/vjyoqdpv/

jQuery

$(function()
{
    var flexWidth = $('.flex').css('width').replace(/[^-\d\.]/g, '');
  if(flexWidth > 550 || flexWidth < 660)
  {
    alert("If statement is true");
  }
});

Using the jQuery.css this will return the value, however because it will return 550px this can't be used to check if greater or lesser than because it is a string. So you need to find convert it to a number (remove the px). Once you have the numeric value you can then use it correctly for your if statement.

Coverting css property to number URL: How to get just numeric part of CSS property with jQuery?

answered Jul 1, 2017 at 22:41

Canvas

5,9159 gold badges60 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Khauri Over a year ago

This. is good except that flexWidth here is still a string. Although js would convert it during the comparison, parseInt or parseFloat might work better. var flexWidth = parseFloat($('.flex').css('width'))

Canvas Over a year ago

You don't need the if (w > "651")

jessica mele Over a year ago

@Canvas sorry my copy & paste went bad. I am using: if (w > 651) { //do something here } else if (w < 651 || w > 520) { //do something here } else if (w <= 520) { //do something here } else { //do something here } but for some reason it is stuck at the 'else if (w < 651 || w > 521)' conditional so when my div is less than 520 in width it is still firing what's inside that conditional.

Canvas Over a year ago

Change you || or statement to a && and statement

lit · Accepted Answer · 2017-07-01 22:37:55Z

0

You need to add the variable to each side.

} else if ($(".slider").css("width") < "651px" || $(".slider").css("width") > "520px") {

answered Jul 1, 2017 at 22:37

lit

4601 gold badge4 silver badges14 bronze badges

Comments

MadPapo · Accepted Answer · 2017-07-01 22:46:12Z

0

The correct mode is: (another note: using multiple time $(".slider") slow up the performance)

 var w = $(".slider").width();
/**tons of code here**/
else if (w < 651 || w > 520) {
/** **/

edited Jul 1, 2017 at 22:46

answered Jul 1, 2017 at 22:39

MadPapo

4955 silver badges14 bronze badges

3 Comments

Khauri Over a year ago

This compares two strings though. Consider the case where "540px" < "525600px" returns false.

MadPapo Over a year ago

Not really! The jQuery width() function return a float not a string variable

Khauri Over a year ago

My comment refers to a previous version of the answer that used .css('width')

Collectives™ on Stack Overflow

jquery .css("width") with two values

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related