Ask A Question

Notifications

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

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'

Reply

added the url for the src was incorrect

Reply
Join the discussion
Create an account Log in

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

Join 76,990+ 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. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.