Change image with page width resize

Question

I need some help with this JavaScript code, I'm all new to using javascript so when I get stuck it gets annoying. What I'm trying to do is change the image displayed on my nav bar when on small screens (mobiles) because the nav bar color changes. What I have come up with so far by searching online and some playing only works when the screen size is manually reduced and then the image changes like it should. However I want it to load in this state as well and thats where I am stuck.

$(window).on('resize', function(){
  var win = $(this);
  if (win.width() < 768) { 
      $(".navbar-brand img").attr('src', 'img/icons/logowhite.png');
  } else {
    $(".navbar-brand img").attr('src', 'img/icons/logodark.png');
}});

Could this be done in the css instead is also a question I have?

Lumi Lu · Accepted Answer · 2015-04-14T00:53:44.353

3

demo in fiddle

JS

function resize(){
    if ($(window).width() < 768) { 
      $(".navbar-brand img").attr('src', 'https://www.google.com/images/srpr/chrome_ntp_white_logo2.png');
  } else {
    $(".navbar-brand img").attr('src', 'https://www.google.com/images/srpr/logo11w.png');
  }
}
resize();
$(window).on('resize', resize);

HTML

<div class='navbar-brand'>
    <img src=''/>
</div>

edited Apr 14 '15 at 00:53

answered Apr 14 '15 at 00:40

Lumi Lu

3,289
1
11
21

1

I have the same issue with this, It works perfectly if I reduce the window size by dragging it. But when the browser loads already reduced it doesn't show the change until there is a movement in the window width – rob12345 Apr 14 '15 at 00:47
Very quickly I also have code that changes the icon when scrolling, I only use this when on large displays. Is their any way to only let this script work when over by 768 width. `$(window).scroll(function() { if ($(".navbar").offset().top > 50) { $(".navbar-brand img").attr('src', 'img/icons/logowhite.png'); } else { $(".navbar-brand img").attr('src', 'img/icons/logodark.png'); } });` – rob12345 Apr 14 '15 at 01:13

score 1 · Answer 2 · edited May 23 '17 at 11:54

1

Could this be done in the css instead is also a question I have?

It is far easier and better in CSS than in Javascript!

Read this question: Responsive design with media query : screen size?

Code to change background image with CSS

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    div {
        background-image: url("img/icons/logowhite.png");
    }
}
@media only screen and (min-device-width : 768px) {
    div {
        background-image: url("img/icons/logodark.png");
    }
}

edited May 23 '17 at 11:54

Community

1
1

answered Apr 14 '15 at 00:39

Marco Bernardini

695
6
17

I've had a read. I'm using the media query to change all the nav bar background color and link colors. But I don't know how to change a img to a different img using this to be able to achieve what I'm looking for. Do you have any suggestions? – rob12345 Apr 14 '15 at 00:51

score 0 · Answer 3 · edited May 23 '17 at 12:09

0

You are talking about mobile devices. Are you maybe trying this code in a mobile or a simulator?? You said the code works when resizing the screen manually. If you refer to the resize event on mobiles, maybe it will not work if you dont look at the orientation change event.

Check if this answer helps you

edited May 23 '17 at 12:09

Community

1
1

answered Apr 14 '15 at 00:52

Alejandro Teixeira Muñoz

2,758
1
22
31

I was simply resizing the browser by dragging it to see if it was working then I would try on my iphone to make sure it came out how I wanted to on a mobile – rob12345 Apr 14 '15 at 01:05
if it´s for a mobile, i strongly recomend you to search by the orientation. There are also media queries that will make your life easier! Check this for example!! http://davidwalsh.name/orientation-change – Alejandro Teixeira Muñoz Apr 14 '15 at 01:09

Change image with page width resize

3 Answers3