Color transition effect in navbar of a bootstrap template in Rails

0
Hello, I'm using a startbootstrap template, the Agency, I was able to import it into the Rails project, I put the theme in the vendor folder, I imported the scss in the application.scss and I put the requirements in aplication.js, agency.css, styling the screen, however some effects do not work, these effects are:

  • Scroll down the screen by clicking the link;
  • And the navbar does not change from transparent to a solid color.

Unfortunately, no error appears in the log, nor when I try to inspect the screen, it does not lack any js, I have no idea what could be happening, if someone can help me, I thank you, I've already rounded the stackoverflow, the ruby community on rails, the ruby group of telegran, numerous sites in google, and I can not fix this problem, I already tried to take the turbolink as they have asked me to try but it did not help either.

I do not know if these effects come from jquery, jquery.easing or even from bootstrap.js, I'm totally lost on this problem. If you need more information ask me

Thanks for the help.

Well, I'll summarize to be more specific as requested, I believe that many who work with bootstrap have already seen those templates on the startbootstrap page or even on other sites where you click on the navbar link and the page slides to that part, for a better view, follow the template link that I'm using Template Agency , two effects are not working together with the Rails and would be:

  • The effect of slipping as I click the links
  • Modify navbar from transparent to solid color
  • I do not know if Rails requires something else or parameter to be able to make these effects work, I believe that with the template to see what I'm talking about it is easier to visualize, if I use only in html it works, if I use it together with Rails these effects do not work.

        
    asked by anonymous 13.03.2017 / 06:23

    2 answers

    0

    Thanks to anyone who has read and even thought of helping me, my mistake was that this part of the code:

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    

    It was in the head tag and should be in the body tag below the footer.

        
    14.03.2017 / 05:18
    0

    Studying the subject better, we know that the code

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    should be in the head, because it is a good practice, so to fix definitively and maintain good practice we should open the main js file, in this case the agency.js that should be in the vendor folder and put a $(document).ready before of the initial function so that this file only loads after all the html has loaded, so we can return

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    for the head tag which is its correct place.

        
    04.04.2017 / 22:30