jQuery onClick: How to toggle different classes based on window size?

Question

I've set up this code so that on click of the div. to toggle and remove a class. now i would like to add different classes in different size of windows. i wrote the below code but this code is not working. here is my code :

$('.click').click( function() {
	 var windowsize = $window.width();
	     if (windowsize = 1920) {
    $(".add").toggleClass("new920");
	}
} );
$(".click").click(function(){
		 var windowsize = $window.width();
	     if (windowsize = 1280) {
    $(".add").toggleClass("new280");
	}
});

.click{ border:1px solid #CCC; width:100px; height:20px;}
	.add{ width:200px; height:300px; background:#ccc;}
	.new920{ background:red !important;}
	.new280{ background:green !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
  
</head>

<body>
    <div class="click">click</div><br/>
    <div class="add">Add</div>
</body>
</html>

@Alexandru-IonutMihai yes. worked.i have send a new post can you review it? — inaz
– inaz, Commented Feb 22, 2017 at 9:06

Mihai Alexandru-Ionut · Accepted Answer · 2017-02-15 08:00:02Z

2

You should use innerWidth property in order to get window size.

If you want jQuery version, you have to use $(window).width().

Also, if statement accept an expression, so you need if (windowsize == 1920).Also, you do not need to bind two click event handlers for same element.

$('.click').click( function() {
	 var windowsize = window.innerWidth;
	 if (windowsize == 1920) {
            $(".add").toggleClass("new920");
	 }
         if (windowsize == 1280) {
            $(".add").toggleClass("new280");
         }
});

.click{ border:1px solid #CCC; width:100px; height:20px;}
	.add{ width:200px; height:300px; background:#ccc;}
	.new920{ background:red !important;}
	.new1280{ background:green !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
  
</head>

<body>
    <div class="click">click</div><br/>
    <div class="add">Add</div>
</body>
</html>

edited Feb 15, 2017 at 8:00

answered Feb 15, 2017 at 7:51

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

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

1 Comment

Satpal Over a year ago

need to use == not = also whats the use of multiple click handler?

Philipp Meissner · Accepted Answer · 2017-02-15 07:52:02Z

You are trying to access the window object with a false syntax. It's $(window) instead of $window ;)

The following should work.

Note: Do you really want to check for a specific width of the window? I assume you rather want to check if the width is smaller than / greater than (windowsize <= 1280). Otherwise it's very unlikely that this condition will be met. Furthermore, you might want to check for innerWidth() of the windows size. It's more accurate and represents the size of the space that can display your content.

$('.click').click( function() {
   var windowsize = $(window).width();
    if (windowsize == 1920) {
      $(".add").toggleClass("new920");
    }
});

$(".click").click(function(){
   var windowsize = $(window).width();
   if (windowsize == 1280) {
    $(".add").toggleClass("new280");
  }
});

geekbro · Accepted Answer · 2017-02-15 07:54:55Z

0

change the $window to $(window) and it should work

answered Feb 15, 2017 at 7:54

geekbro

1,33312 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery onClick: How to toggle different classes based on window size?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related