CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Albert
Albert

Reputation: 167

Change logo image based on screen resolution of the browser

I have two images, one with the logo in black and one with the logo in white. I would like to have the white logo when the browser is less than 768px width and black logo when it's bigger. I tried something but is not changing in real time, only if I reload the page. 

$(function() {
    if($(window).width() < 768){
        $('.logo').find("img").attr("src","/images/Trin-02.png");
    }
    else{
        $('.logo').find("img").attr("src","/images/Trin-01.png");
    }

});

Any suggestion? Thank you

Upvotes: 2

Views: 3710

Answers (6)

NachoDawg
NachoDawg

Reputation: 1544

https://api.jquery.com/resize/

You are correctly checking for the window's width, but you are only doing it when the page first loads in!

Instead, use the resize function to run a script every time the screen is resized

$(window).on("resize", function(){
  if($(window).width() < 768){
      $('.logo').find("img").attr("src","/images/Trin-02.png");
  }
  else{
      $('.logo').find("img").attr("src","/images/Trin-01.png");
  }
})

though this sounds more like a job for css media queries, though we don't about all your needs and requirements :)

Upvotes: 5

Pimmol
Pimmol

Reputation: 1871

There is no need to target the image multiple times. Save a reference once, use it multiple times.

Create a callback function for the resize event and bind it. That way you can also call the callback function to set the right image on init.

var image =  $('.logo').find("img");

function setImage() {
  var windowWidth = window.innerWidth,
      src = (windowWidth < 768) ? '/images/Trin-02.png' : '/images/Trin-01.png';

  image.attr('src', src);
}

$(window).on('resize', setImage);
setImage();

https://jsfiddle.net/0nxdpdp6/1/

Upvotes: 0

Ijas
Ijas

Reputation: 93

If you have the vector version of logo, make an imgname.SVG then change color using css. (SVG is scalable vector graphics and lmage will be of good quality)

HTML 

 <div class="logo"> <a href="index.html"><img src="images/imagename.svg"></a> </div>

CSS

@media only screen and (max-width: 768px) { 

.logo img{
background-color:#000;
height:50px;
width:100%;
}
}

Upvotes: 1

Manish62
Manish62

Reputation: 158

Here is the most simple solution, using CSS3 media queries,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>media queries</title>
  <style>
    @media screen and (max-width: 780px) {
    body {
        background-image: url("/images/Trin-02.png");
    }
}
    @media screen and (min-width: 780px) {
    body {
        background-image: url("/images/Trin-01.png");
    }
} 
  </style>
</head>
<body>

</body>
</html>

So, u can have image acc. to device you are using

Upvotes: 0

B&#225;lint
B&#225;lint

Reputation: 4039

I have a pure JavaScript solution 

document.getElementsByTagName("BODY")[0].onresize = function() {
    if (window.outerWidth < 768) {
        document.getElementById("img").src = yourFirstImage.png;
    } else {
        document.getElementById("img").src = yourSecondImage.png;
    }
}

Upvotes: 2

3rdthemagical
3rdthemagical

Reputation: 5350

You can do it just with css and media queries.

img {
  width: 400px;
  content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg");
}

@media screen and (max-width: 768px) {
  img {
    content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg");
  }
}
<img alt="">

Upvotes: 5

Related Questions