Skip to main content

Rails5 + JQuery progress bar not functioning

Javascript • Asked by Neil Patel

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


application.scss

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

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

application.js

//= 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 127.0.0.1 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


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.