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">

<%= "To make #{number_to_currency @product.revenue}" %>

<%= "You need to make #{number_to_currency @product.monthly_amount} a month" %>
<%= "You need to make #{number_to_currency @product.daily_amount} a day" %>


.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
Create an account Log in

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

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

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.