CODEWITHSUNDEEP
jqueryhtml
Ciprian
Ciprian

Reputation: 3226

jQuery - Action when screen width is smaller than 640 pixels

I'm trying to do two things when the screen width is smaller than 640.

  1. Remove the home-thumb class from the thumbnail element ... which for some reason is not working. The alert works fine. Am I doing something wrong when trying to remove the class?

  2. Change the image src from src="images/235x/654-1.jpg" to src="images/335x/654-1.jpg"

HTML

 <div class="thumbnail home-thumb">                 
   <a href="item?id=654">
    <img class="col_2_img column" src="images/235x/654-1.jpg" alt="">   
   </a>
 </div>

JS

 if ($(window).width() < 640) 
 {
    alert("640");
    $("div.thumbnail").removeClass("home-thumb");
 }

Upvotes: 0

Views: 246

Answers (2)

user2575725
user2575725

Reputation:

Try using toggleClass() and resize events:

var onResize = function() {
  $("div.thumbnail").toggleClass("home-thumb", !(640 > $(window).width()));
};

$(window).on('resize load', onResize);
.thumbnail {
  border: 1px solid grey;
  padding: 5px 7px;
  background: orange;
}
.home-thumb {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="thumbnail home-thumb">Thumbnail</div>

Upvotes: 1

Vaibs_Cool
Vaibs_Cool

Reputation: 6160

if ($(window).width() < 640) 
 {

    $("div.thumbnail").removeClass("home-thumb");
     var src_img=$("div.thumbnail").find("img").attr("src");
     if(src_img=="images/235x/654-1.jpg")
     {
         $("div.thumbnail").find("img").attr("src","images/335x/654-1.jpg");

     }

 }

FIDDLE DEMO

Upvotes: 1

Related Questions