All threads / Rails5 + JQuery progress bar not functioning

Ask A Question


You’re not receiving notifications from this thread.

Rails5 + JQuery progress bar not functioning

Neil Patel asked in Javascript

Implementing a JQuery progress bar so when you scroll down it should show a green bar across the top. When I start scrolling the progress bar does not appear. I use inspect element on the bar div class . The element shows the width % going up . but no progress bar?

style="width: 8.0263232%;>
scroll.js $(document).on('scroll', function() { var pixelsFromTop = $(document).scrollTop() var documentHeight = $(document).height() var windowHeight = $(window).height() var difference = documentHeight - windowHeight var percentage = 100 * pixelsFromTop / difference $('.bar').css('width', percentage + '%') }) show.html.erb div class="progress">


.progress {
position: fixed;
top: 0;
left: 0;
width: 100%;

.bar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
background-color: #7fdbff;


//= require jquery
//= require jquery-ui
//= require jquery_ujs
// require turbolinks
//= require_tree .

looking at the logs its not finding scroll but its showing the width element going up,

Started GET "/products/scroll.js" for at 2017-08-14 12:27:17 +0100
Processing by ProductsController#show as JS
Parameters: {"id"=>"scroll"}
Product Load (0.4ms) SELECT "products".* FROM "products" WHERE "products"."id" = $1 LIMIT $2 [["id", 0], ["LIMIT", 1]]
Completed 404 Not Found in 3ms (ActiveRecord: 0.4ms)

ActiveRecord::RecordNotFound (Couldn't find Product with 'id'=scroll):

app/controllers/products_controller.rb:67:in `set_product'

added the url for the src was incorrect

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 52,321+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2021 GoRails, LLC. All rights reserved.