CODEWITHSUNDEEP
jquery
Sam
Sam

Reputation: 347

Change Image On Screen Width Below 600px Width But NOT above 600px

I'm using this jQuery to change a image on screens less than 600px width however the default image it changes, does not display once reduce the screen below 600 and t5hen back above 600.

The default image is added by using PHP code to add it inline.

I know i can add the image back again to display it on screens above 600 but would like to know how to do this without adding more code.

$(window).resize(function() {

    if ($(window).width() < 600) {
   
   $( '.div-background' ).css("background", "url('//i.ibb.co/QY97QZ6/b.jpg')")
    
}

});  
.div-background { 
    background-image: url('https://i.ibb.co/sjtFBQb/image.jpg'); 
    background-repeat: no-repeat;
	  height: 100vh;
	  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div-background"><h1>HEADING</h1></div>

I don't want to add back the default image using CSS or jQuery. I only want to make sure the above jQuery works on screens widths below 600px and returns the default image when above 600.

Update: I'm referring to getting the the browser to refresh without reloading the page once the screen width increase back above 600px so i don't need to add the default image back.

Upvotes: 0

Views: 433

Answers (1)

user1189882
user1189882

Reputation:

Literally changed 600 to 700 in your code, and the snippet works (since I used alert to find the $(window).width() value of the snippet, which was 688px). If it's not firing on your mobile device, try changing orientation from landscape to portrait (some mobile browsers fire a resize event on orientation change).

Alternatively, use resize, load and orientationchange as your events ... $(window).on('resize load orientationchange', function() { /* code here */ });. If it's still not working, add alert($(window).width()) inside the function to see if it is, indeed, less than 600px wide. I added this to the snippet below, but it's commented out.

My previous comments on your duplicate question explained that your code would have worked already, and in fact, I changed background back to background-image in the snippet below to illustrate this.

The jsFiddle link I posted in my previous comments also describes how to change it back (just add an else statement, and return the background-image to the default one); I've added this to the snippet below as well. You can test this in the snippet by clicking the "full page" pop-out link after running the snippet (the image changes back as expected).

$(window).resize(function() {
    //alert($(window).width());
    if ($(window).width() < 700) {
       $( '.div-background' ).css("background-image", "url('//i.ibb.co/QY97QZ6/b.jpg')");
    }
    else {
        $( '.div-background' ).css("background-image", "url('//i.ibb.co/sjtFBQb/b.jpg')");
    }
});  
.div-background { 
    background-image: url('https://i.ibb.co/sjtFBQb/image.jpg'); 
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-background"><h1>HEADING</h1></div>

PHP doesn't really have anything to do with it (it would be the same if ASP, JSP, .NET or whatever other server-side language prints out the HTML) - but if you're unsure of the default image URL (so you don't know what to set the image back to), just grab the image first, before changing it - then the listener can just use that URL to return to:

//set desktopImage to the image that's "set by PHP"
var desktopImage = $('.div-background').css('background-image');
//set mobileImage to the URL of the mobile version of the above image
var mobileImage = "url('//i.ibb.co/QY97QZ6/b.jpg')";
//whenever loading, resizing, or changing orientation, check screen width and swap images accordingly
$(window).on('resize load orientationchange', function() {
  if($(window).width() < 600) {
    $( '.div-background' ).css("background-image", mobileImage);
  }
  else {
    $( '.div-background' ).css("background-image", desktopImage);
  }
});

The alternative is to define a CSS class specifically for this:

<style>
  .div-background.small {
    background-image: url("//i.ibb.co/QY97QZ6/b.jpg");
  }
</style>

Then you can simply add the class only if the screen width is smaller than 600 (or whatever breakpoint you choose):

$(window).on('resize load orientationchange', function() {
  $('.div-background').toggleClass('small', $(window).width() < 600);
});

Upvotes: 1

Related Questions