Unique Progress Bar Design with jquery and css

Would anyone be able to assist me in creating a progress bar that is segmented into sections, similar to the one showcased in this Progress Bar Example?

I have two access tables called Projects and Stages. I am looking to display the stages per project in a progress bar like the example linked above.

If anyone has experience with creating or using an existing progress bar that can be customized to reference those specific tables, your help would be greatly appreciated.

A similar question was previously asked, but the responses provided were difficult for me to understand.

Thank you in advance for any assistance you can provide.

jqueryasp.netcss

Answer №1

When you shared the link, it caused the page to refresh. It would have been more efficient if the page didn't have to reload at all. All that was needed was to implement a simple rule like this:

(on the initial page)

Tasks { background-image: url('done.gif'); }
Subtasks{ background-image: url('pending.gif'); }

(on the subsequent page)

Tasks { background-image: url('done.gif'); }
Subtasks{ background-image: url('done.gif'); }

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

Accessing the JSON file from the Google Maps Places API using either JavaScript or PHP

In the midst of developing an application, I am working on fetching a list of places near a specific latitude and longitude. After obtaining an API key, inputting it into the browser URL successfully retrieves a JSON file containing the desired places dat ...

phpjavascriptjqueryjson

Error: Trying to access a property that is not defined (reference to 'user')

import { createSlice } from '@reduxjs/toolkit'; export const userSlice = createSlice({ name: 'user', initialState: { user: null, }, // The `reducers` field allows us to define reducers and generate associated actions redu ...

javascripthtmlcssreactjsredux

JQuery - Drag and Drop Feature: Extracting File Details

Exploring the possibility of creating a custom drag and drop file uploader using JQuery, AJAX, and PHP. I envision a user-friendly file-uploading feature on my website where users can simply drag files from their computer into a designated div, enabling t ...

phpjqueryajaxfile-uploaddrag-and-drop

Encountering a 500 server error when using jQuery AJAX for a GET request

Check out the flask python code here: Also, take a look at the html+js in the index.html template: An issue arises where everything runs smoothly on the local Flask server but encounters a 500 error when attempting to search after deployment with Apache ...

jquerypythonajaxflask

Is it possible to designate jQuery for automatically generating IDs?

Within a foreach loop, I am generating divs containing paragraphs pulled from MySQL databases. My objective is to make these divs clickable by connecting them with jQuery. Issue 1: How can I assign unique IDs to the created divs? Solution Attempt: Utiliz ...

phpjqueryunique

Modify the background color when hovering using jquery

In order to have buttons with variable colors and a different hover color, I have to apply inline CSS. Since the hover color cannot be added using inline CSS, I need to use JavaScript. I attempted to achieve this using the .hover() function, but the colors ...

javascriptjqueryhtmlcss

Multiple columns contained within a span

I'm trying to create a panel that displays a list of values with corresponding labels. The requirement is for each label to be positioned above its respective value and aligned to the left. The layout should resemble the following: Label 1 Lab ...

htmlcss

Interactive treemap that allows users to zoom in and out with helpful tooltips displayed at

The zoomable treemap is an amazing visualization tool, but I believe it could be improved with a specific feature. Currently, when moving the mouse over the rectangles in the treemap (whether zoomed in or out), it's difficult to determine where in the ...

javascriptjqueryd3.js

Positioning an anchor element over an image in Internet Explorer (IE)

Encountering an issue with IE9 (and 8) involving the positioning of empty anchor elements over an image. The anchors contain text, which is pushed off the page using CSS's text-indent property. Currently working on a website with promo panels display ...

htmlcssinternet-explorerxhtml

Changing the Style of the Parent <li> Tag When Hovering

My WordPress site (on localhost) utilizes a <ul> for a customized menu. How can I modify the CSS of a <li> on hover specifically if it contains a <ul> sub-menu? Every main menu item has a border-radius but I want to eliminate this featur ...

jquerycsswordpress-theming

Substitute phrases with hyperlinks using JavaScript (or Ruby)

After researching numerous resources on SO, I have managed to come up with a solution that is very close to working. My goal is to replace words/phrases within a <p> tag with links using jQuery after the page has loaded (although I am open to a Ruby ...

javascriptjquery

Navigating to a particular div using a click event

I am trying to achieve a scrolling effect on my webpage by clicking a button that will target a specific div with the class "second". Currently, I have implemented this functionality using jQuery but I am curious about how to accomplish the same task using ...

javascriptjqueryhtmlcssscroll

Triggering a specific outcome with every user interaction involving the selection of an element

How can I trigger this effect each time the user clicks on the element using jQuery? I have added a "ripple" class upon clicking, but when I click on the element for the second time, the effect does not execute because the class has already been added. Ho ...

jqueryhtmlcss

A Troublesome Dilemma: Internet Explorer's Div

I'm currently in the process of designing a vBulletin forum template, and I've encountered an issue with one of the headers that is proving to be quite tricky. It appears that Internet Explorer is expanding the width of one of the div elements by ...

htmlcsscross-browser

Tips for switching between two CSS classes for a single control in ASP.Net

<style type="text/css> .CssStyle1 { font: 10pt Verdana; font-weight:700; color: Green; } .CssStyle2 { font: 15pt Times; font-weight:250; color: Blue; } </style> <as ...

javascriptjqueryasp.netajax

Shutting down the Fancybox Window

Included in this code is a button that triggers the opening of a fancybox containing a form. Once the form is filled out and submitted, I want the window to close automatically and be replaced by another window displaying a success message. This success me ...

javascriptjqueryhtmlcssfancybox

What could be the issue with this code? How come the MsgBox is still being displayed regardless of whether the user clicks the checkbox or not?

Even without selecting the checkbox, a MsgBox still pops up... In my code below, regardless of whether the user checks the checkbox or not, it will always redirect to Google: If the user selects the checkbox, then it redirects to www.google.com. However, ...

javascriptasp.netvb.netvisual-studio-2008

Looking for assistance in making an animation clickable as well

Hey there, I'm no expert in HTML and CSS, but I can make some changes to existing code. However, when it comes to writing code from scratch, I struggle. I need help turning this block of code into a clickable link. Can someone guide me on how to achie ...

htmlcsshyperlink

Ways to inspect a number within a span and adjust its color depending on the value?

Can someone help me figure out why this code is not reading the value correctly? Check it out here This is the HTML: <a class="InterestLink">Click me</a> <div id="InterestExpander"> <div id="InterestExpanderX"> ...

javascriptjqueryhtmlcss

`The best method for implementing jQuery ajax with asp.net user controls`

Is it possible to implement AJAX functionality in an ASP.NET user control? $.ajax({ type: "POST", url: "*TCSection.ascx/InsertTCSection", data: "{id:'" + id + "'}", contentType: "application/json; charset=utf- ...

asp.netajaxjquery