Jquery is not displaying the background color of the progress bar

Greetings to all! I am currently working on implementing a progress bar for my website, but I am encountering an issue where the background-color is not displaying correctly on scroll. I would greatly appreciate any assistance with this matter. Below you can find the code snippets for html, css, and jquery...

HTML Code

<div class="progress-bar-container"><div id="progressbar" value="0"></div></div>

CSS Code

    height: 5px;
    background-color: #ced4da;
    overflow: hidden;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    z-index: 440;
}
.progress-bar-container #progressbar {
    background-color: #4688f1;
    height: 100%;
    width: 0;
}

jQuery Code

      $(window).scroll(function () {
          var s = $(document).scrollTop(),
              d = $(document).height() - $(window).height();
          $("#progressbar").attr('max', d);
          $("#progressbar").attr('value', s);
       });
   });

If anyone could provide guidance on how to ensure the background color displays correctly on scroll, it would be highly appreciated. Thank you in advance!

javascriptjqueryhtmlcss

Answer №1

Your code has a few issues to address. Firstly, the HTML width attribute does not support the div element. Additionally, the value attribute is also not supported by the div. To create a progress bar, it is recommended to use CSS. Instead of updating the value with 

$("#progressbar").attr('value', s);
, you should update the width of the element with $("#progressbar").width(s);

Below is an example of how this can be achieved:

$(window).scroll(function () {
    var s = $(document).scrollTop(),
        d = $(document).height() - $(window).height();
    $("#progressbar").width(s);
});
body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}
.progress-bar-container{
    height: 5px;
    background-color: #ced4da;
    overflow: hidden;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    z-index: 440;
}
.progress-bar-container #progressbar {
    background-color: #4688f1;
    height: 100%;
    width: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="progress-bar-container"><div id="progressbar"></div></div>
<div style="height: 120vh"></div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

Answer №2

To create a progress bar that reflects the percentage, you need to calculate the width and set it accordingly. See the code snippet below for details.

$(window).scroll(function () {
  var  d = $(document).height() - $(window).height(),
       s = $(document).scrollTop(); 
  var  width= (s / d) * 100 // in Percentage
  $("#progressbar").attr('max', d);
  $("#progressbar").attr('value',s).css("width",width +"%");
});
body{
height: 1000px;
}

.progress-bar-container{ 
    height: 5px;
    background-color: #ced4da;
    overflow: hidden;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    z-index: 440;
}
.progress-bar-container #progressbar {
    background-color: #4688f1;
    height: 100%;
    width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar-container">
<div id="progressbar" value="0"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Examining the dimensions of a div element in AngularJS

As I delve deeper into understanding AngularJS and tackling the intricacies of how $watch operates, a specific scenario has caught my attention. I want to monitor and track changes in the dimensions of the div element with an ID of "area". My intention is ...

javascriptangularjsonchange

Is it possible to determine which child element is currently in view within a scrollable parent div?

In an attempt to replicate a "current page" feature using divs, similar to a PDF reader. document.addEventListener("DOMContentLoaded", function(event) { var container = document.getElementById("container"); container.onscroll = function() { let ...

javascripthtmlcssscroll

Despite receiving a return false from the Ajax verification, the form is still submitted when using onsubmit

I have implemented form verification using ajax to check for duplicate usernames. If a duplicate username is found, the function returns false; otherwise, it returns true. Below is the ajax code: function checkform(){ var username = $("#username").va ...

javascriptphpjqueryajaxforms

Is there a way to append the current path to a link that leads to another URL?

I am currently in the process of separating a website, with the English version being on the subdomain en. and the French version residing on the www. Before making this change, I have a drop-down menu that allows users to select their preferred language ...

javascriptphpjqueryhtml

Troubleshooting an issue where an ASP.NET jQuery AJAX call to a PageMethod is resulting in a parsererror

It seems like the issue I'm facing is that the PageMethod is not returning JSON. Do I need to make any additional changes on the server side to ensure the return value is properly formatted? Is there a missing step that I am overlooking? (Please note ...

jquery.netajaxjsonparse-error

How can I implement the dynamic loading of components using the Vue 3 composition API?

My goal is to dynamically load a component with the name retrieved from the database, however, I keep encountering the error [Vue warn]: Component is missing template or render function. import SimpleQuestions from '@/components/SimpleQuestions.vue&ap ...

javascriptvue.jsvuejs3vue-component

What are some ways to customize the appearance of the Material UI table header?

How can I customize the appearance of Material's UI table header? Perhaps by adding classes using useStyle. <TableHead > <TableRow > <TableCell hover>Dessert (100g serving)</TableCell> ...

javascriptreactjsmaterial-uireact-table

Shifting Elements - Navigation triggers subtle movements in CSS styles as you move across pages

I've noticed a strange issue on my website where certain elements seem to be shifting slightly when navigating between different pages. Here's a quick video clip demonstrating the problem. It appears that these elements are not staying static as ...

cssnavigationwebhtml

Activate vertical scrolling in JavaScript when an image is clicked

I currently have a collection of button images with different hover effects specified like this: <img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" /> My goal is to make them scroll down to ...

javascriptjqueryhtmlcss

Are there any methods to utilize Zod for validating that a number contains a maximum of two decimal places?

How can I ensure that a numeric property in my object has only up to 2 decimal digits? For example: 1 // acceptable 1.1 // acceptable 1.11 // acceptable 1.111 // not acceptable Is there a method to achieve this? I checked Zod's documentation and sea ...

javascripttypescriptzod

encounter with file compression using gzip

Currently, I am facing an issue with zipping files using jszip because the backend can only unzip gzip files, not zip files. My front end is built using vue.js. let zip = new jszip(); zip.file(fileToCompress.name, fileToCompress); let component = t ...

javascriptvue.jscompressiongzip

Using HTML to create interactive table cells

I am looking to add functionality to make a cell in an HTML table clickable. When this action is triggered, I want a pop-up or window to appear with specific information. Below is my current HTML code: <table class="table1"> <thead> <tr ...

phphtmlpopupwindow

Refresh only a portion of a page using PHP and JavaScript

I have a webpage set up with multiple sections in separate divs. Currently, the essential divs required are <div id="main">...</div> & <div id="sidebar">...</div> Each div contains PHP code like: <?php include("page.php") ...

phpjavascriptjqueryajax

A lone function making two separate calls using AJAX

I have a function that includes two Ajax Get calls. Each call has a different function for handling success. function get_power_mgt_settings() { window.mv.do_ajax_call('GET',power_mgt.get_spin_down_url{},'xml',true,show ...

javascriptjqueryajax

Issues surrounding the break function in PHP and Jquery

Here is a simplified version of PHP and jQuery code for a page that I am working on. The example includes PHP break functions and the file is named test.php. The issue I am encountering is that when trying to load the first part of the page (case 1), the ...

phpjquery

Updating a webpage using Ajax in Django

I've been diving into Django and am eager to implement ajax functionality. I've looked up some examples, but seem to be facing a problem. I want to display all posts by clicking on a link with the site's name. Here's my view: def archi ...

javascriptjquerypythonajaxdjango

What could be causing multiple ajax requests to not run concurrently?

I have encountered an issue with my nested AJAX functions - only the first request seems to be executed and I am unsure of the reason behind this behavior. To troubleshoot, I have included some alert messages to track progress. I am working within a Dja ...

jquerydjangoajaxclick

`Take action on a row by selecting the Edit option in CodeIgniter`

In my table, I have data displayed with an edit button in each row. What I want is for a pop-up or lightbox to appear when the edit button is clicked, without refreshing the page, and display all fields within that box. I am familiar with updating in the c ...

phpjqueryhtmlajaxcodeigniter

Enabling the acceptance of blank values within an HTML5 date input field

When using an HTML5 date input for a field that corresponds to a nullable datetime column in the database, how can one avoid setting an empty value in the input field? In my AngularJS application, the ng-model is connected to a scope variable with an init ...

javascriptangularjshtmldate

Developing a versatile Angular2 component that has the potential to be utilized across various sections of a website

Use Case: I need to display a processing screen during asynchronous calls to keep end users informed about ongoing activities across multiple sections of the website. To achieve this, I decided to create a reusable component at the global level. Issue: As ...

javascriptangulartypescript