how do you change img src with javascript depending on browser width?

Question

I would like to change the source of the image element with the id of "front". I have a basic script at the top, but it doesn't work. I was just attempting to come up with something but I'm very bad at JavaScript.

<html>

<head>
<link rel="stylesheet" type="text/css" href="home.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="home.js"></script>
<script type="text/javascript">

    var reswidth=screen.width;

if (reswidth<400){
  var x = document.getElementsById("front");
  x.src="../images/colbysmall.png"
}

</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="header">
<div class="navigation">
<ul>
  <li><a id="home" href="">Home</a></li>
  <li><a href="">Services</a></li>
  <li><a href="../portfolio/portfolio.html">Portfolio</a></li>
  <li><a href="../contact/contact.html">Contact</a></li>
  <li><a href=""></a></li>
</ul>

</div>
<div class="yellow"></div>
<div class="x"></div>

</div>
</head>



<body>
<div class="website">


<div class="logo"></div>

<img src="../images/ColbyFaceblack.jpg" id="front" width="100%" >
<div class="content">
<div class="menu"></div>
<div class="office"></div>


</div>



<div class="body2">

<img src="../images/simple_dashed_full.png" width="100%">

<div class="weboutline">
    <img src="../images/web_outline.png" width="100%">
</div>
<div class="body2img2">
    <img src="../images/portfolio.png" width="100%">
</div>

<div class="body2img3">
    <img src="../images/blog.png" width="100%">
</div>

</div>
<div class="body3">

<img src="../images/body.png" width="100%">
<img class="touch" src="../images/get_in_touch_beige.png" width="50%">




</div>

<footer>
<img src="../images/footer.png" width="100%">
    <div class="copyright"> copyright COLBY MOFFETT 2015 </div>
    <div class="facebook"></div>
    <div class="instagram"></div>
    <div class="twitter"></div>
</footer>






</body>
</div>

</html>

You are executing your code in the <head> section BEFORE the DOM has been loaded so the DOM elements are not yet there. If you have jQuery, you can use $(document).ready() to schedule the code to run when the DOM has been loaded. You probably also want to run the code when the window resizes too. — jfriend00
– jfriend00, Commented Sep 21, 2015 at 18:54

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-21 18:59:47Z

1

This is right, but has to be executed on change of screen size:

$(function () {
  $(window).resize(function () {
    var reswidth=screen.width;
    if (reswidth<400){
      var x = document.getElementsById("front");
      x.src="../images/colbysmall.png"
    }
  });
});

Also make sure you execute it inside the $(function () { }); to execute on the DOM loaded contents. So, to make sure it also executes when it gets loaded, you need to store it in a named function and execute it every time when the window is resized.

Your final code will be:

$(function () {
  var reszWindow = function () {
    var reswidth=screen.width;
    if (reswidth<400){
      var x = document.getElementsById("front");
      x.src="../images/colbysmall.png"
    }
  };
  reszWindow();
  $(window).resize(reszWindow);
});

edited Sep 21, 2015 at 18:59

answered Sep 21, 2015 at 18:53

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

3 Comments

jfriend00 Over a year ago

This won't run the code the first time when the page is first loaded.

Jeff Noel Over a year ago

Perhaps storing it into a named function, calling this function on resize event and on DOM ready could do it... unless the resize function is automatically called onload.

iamchubby Over a year ago

I took part of this and combined it with another answer and it works really well. Thanks!

Ren · Accepted Answer · 2015-09-21 19:33:32Z

0

Since you are already using jQuery, the following could be one of the solutions:

$( window ).resize(function() {
    if($( window ).width() < 400) { 
        $("img#front").attr("src","../images/colbysmall.png");
    } else {
        $("img#front").attr("src","../images/ColbyFaceblack.jpg");
    }
});

(PS. Untested code) :)

edited Sep 21, 2015 at 19:33

answered Sep 21, 2015 at 19:08

Ren

3306 silver badges24 bronze badges

Comments

Theo Orphanos · Accepted Answer · 2015-09-21 19:02:50Z

0

changing image according to screen resolution:

$(window).resize(function() {
    var scrWidth = $(window).width();
    if(scrWidth < 500){
        $('#myImage').attr('src', 'http://wallpaper-download.net/wallpapers/logo-wallpapers-google-chrome-background-wallpaper-33143.jpg');
    }
    if(scrWidth > 500){
        $('#myImage').attr('src', 'http://www.bhmpics.com/download/google_colorful_background-1920x1080.jpg');
    }
});

(random images from google)

Fiddle here: http://jsfiddle.net/59ehtLde/

answered Sep 21, 2015 at 19:02

Theo Orphanos

1,4571 gold badge20 silver badges28 bronze badges

Comments

Scott · Accepted Answer · 2015-09-21 20:19:28Z

0

Javascript aside, you can do this with just HTML5. Browser support isn't great, but isn't bad, either.

<picture>
   <source media="(min-width: 400px)" srcset="../images/colbysmall.png">
   <img src="../images/ColbyFaceblack.jpg">
</picture>

<p>With placeholders:</p>

<picture>
   <source media="(min-width: 400px)" srcset="http://placehold.it/400?text=colbyfaceblack">
   <img src="http://placehold.it/200?text=colbysmall">
</picture>

answered Sep 21, 2015 at 20:19

Scott

5,3695 gold badges49 silver badges74 bronze badges

Collectives™ on Stack Overflow

how do you change img src with javascript depending on browser width?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related