Ruby on Rails, change source of image with JavaScript

Question

I have a JavaScript function which changes one of the images on my web page when the user scrolls down

$(window).scroll(function() {
    if ($(document).scrollTop() > 0) {
      switchToStatic();
    }
    else {
      switchToAnimated();
    }
}

function switchToAnimated() {
    if ($(window).width() > 768) {
        $('body').css('padding-top', '0');
        $('#logo').attr('src', '../assets/blue_logo.png')
        $('#logo').css('width', '15vw');
        $('.navbar').css("background-color", 'transparent');
    }
}

function switchToStatic() {
    $('body').css('padding-top', '50px');
    $('#logo').attr('src', '../assets/white_logo.png')
    $('#logo').css('width', '7.5vw');
    $('.navbar').css("background-color", '#3B98F2');
}

My application is built on Ruby on Rails. The slim markup looks like this

a href="http://www.thisisarealsite.com" 
    = image_tag("white_logo.png", alt: "logo", id: "logo")

On my localhost the functions work properly but when we launch the site to production the files are missing. I know rails sucks everything into a common directory but I don't know how to fix this to get the image to behave the way I want it to on both localhost and production. I tried taking away the '../assets/' reference and just pointing to the file but that did not work on either localhost or production.

Michał Młoźniak · Accepted Answer · 2016-11-08 21:58:11Z

1

Rails is using asset pipeline which adds fingerprints to each js, css and other assets file. So you cannot just fetch file by its name, you need to use the name with fingerprint. image_tag helper will generate correct paths on production, so what you need to do is to somehow inject those paths into javascript.

For example you can do something like this:

javascript:
  var blueLogoPath = "#{asset_path('blue_logo.png')}";
  var whiteLogoPath = "#{asset_path('white_logo.png')}";

And then

$('#logo').attr('src', whiteLogoPath);

edited Nov 8, 2016 at 21:58

answered Nov 8, 2016 at 21:30

Michał Młoźniak

5,5462 gold badges24 silver badges40 bronze badges

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

3 Comments

Nick Gilbert Over a year ago

I like this answer, the problem is the browser renders it to plain HTML with double quotes which end up mismatching and throwing a syntax error.

Nick Gilbert Over a year ago

Actually strike that, I got it to render by switching the double quotes with single quotes. Unfortuately, now the src is set to an image tag. I need to use a different method besides attr

Michał Młoźniak Over a year ago

Hey @NickGilbert I updated my answer. You need to call asset_path helper instead of image_tag. It will generate plain url.

rebagliatte · Accepted Answer · 2016-11-08 21:59:40Z

0

Try moving your logos to your public folder and referencing them like this:

$('#logo').attr('src', '/blue_logo.png')

$('#logo').attr('src', '/white_logo.png')

edited Nov 8, 2016 at 21:59

answered Nov 8, 2016 at 21:24

rebagliatte

2,1461 gold badge20 silver badges25 bronze badges

2 Comments

Nick Gilbert Over a year ago

/blue_logo.png is not found on localhost

rebagliatte Over a year ago

Oh, sorry about that! Forgot to mention you should move your logos to the public folder. I've just updated my answer for clarity.

Collectives™ on Stack Overflow

Ruby on Rails, change source of image with JavaScript

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related