A visual tool to track the progress of a task

I have a query about implementing a progress bar. Despite reviewing numerous discussions here, I haven't been able to successfully adapt any of the solutions for my specific situation. I am currently displaying numbers like 50/500, where 50 represents the actual number and 500 is the maximum.

$SQL = "SELECT * FROM db_ships WHERE ship_id = $user[ship_id] LIMIT 1";
$result = mysql_query($SQL);

while ($db_field = mysql_fetch_assoc($result)) {
print $db_field['shields'] . " / ";
print $db_field['max_shields'] . "";

The majority of progress bars I've encountered showcase time periods, but in my case, I need to visually represent the fraction 

print $db_field['shields'] . " / ";
    print $db_field['max_shields'] . "";

How can I integrate this information to display a progress bar illustrating the advancement? My CSS skills are lacking, so any assistance would be greatly appreciated.

mysqlcssprogress-barprogress

Answer №1

A simple technique involves placing a smaller div within a larger one and setting the inner div's width as a percentage. Check out this example for clarification.

To calculate the percentage of max_shields, assuming both values are numbers, you can use the formula:

$percentage = $db_field['shields'] * ($db_field['max_shields'] / 100);

Then apply this calculated percentage as the inner div's width like so:

<div id="progress-inner" style="width: <?php echo $percentage; ?>%;"></div>

If you wish to animate the progress bar, consider utilizing jQuery animate.

Answer №2

print "<div class=\"progress_container\"><div class=\"progress_bar\" style=\"width: ".($db_field['health']/$db_field['max_health']*100)."%\"></div></div>";

Customize the styles as desired. Consider adding a border to the container and changing the background color of the main bar. Creating a basic progress bar is that straightforward.

Answer №3

<style type="text/css">
.table, th
{
background-color:Red;
border-collapse:collapse;
}
<table class="table" >
        <tr id = "row2" >
            <td id ="cell2" class="td"></td>
        </tr>
    </table>    
  <script language="javascript" type="text/javascript" >

    var j = 1;
    var timerID = 0;
    timerID = setTimeout("update()",200); 
    var cc = '';
    var bs = '';
    bs = document.getElementById("cell2").innerHTML;

function update()
{

    var bi = "</tr></table>";
    var bp = "<table><tr>";
    cc = cc + "<td style='width:20;height:35' bgcolor=red>";

    document.getElementById("cell2").innerHTML = bs + bp +  cc + bi; 


     if( j < 50) 
    {                    
        j = j + 1;

        timerID = setTimeout("update()",200); 
    }
    else
     {
        if(timerID)
        {
   document.getElementById("cell2")
      .innerHTML=document.getElementById("cell2").innerHTML 
      + "</tr></table>";
            clearTimeout(timerID);

        }
     }

  }
     </script>

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

An autocomplete CSS editor with Firebug-like features

Looking for a CSS (or HTML) editor that offers code autocompletion similar to Firebug's features. I believe it's referred to as "autocomplete as you type." Thank you! Edit: I came across a tool called Zen Coding that provides shortcuts for cod ...

htmlcss

What is the best way to create a grid layout that is responsive using HTML and CSS

I have been searching all over the internet and have not been able to find a grid layout like this. The "grid-template-columns" property is not achieving what I need, as I cannot make one box larger than the others. I am looking to create 4 equal boxes an ...

htmlcsscss-grid

CSS - Implementing responsive design to ensure optimal viewing experience on all devices

Card Matching Game Project Codepen Check out my CSS here, and find the rest of the code on Codepen since it's quite lengthy. const cards = document.querySelectorAll('.memory-card'); let hasFlippedCard = false; let lockBoard = false; let ...

htmlcss

Applying the active state to the link will cause it to inherit the default styles of the

I am facing a challenge with overriding the active style of links in a universal manner, to restore them to their original state when they cannot be interacted with (such as during scrolling). In my current code, I implemented this: .scrolling a:active { ...

css

Developing HTML functionalities within the OneNote Add-in API

I have developed my own OneNote Add-in using Nodejs, but I am encountering two issues that I have been unable to resolve despite extensive research. The add-in I created adds a new outline to a OneNote page, which includes an HTML table with one column an ...

htmlcssnode.jsoffice-jsoffice-addins

Is utilizing Eval on a div within a DataList ItemTemplate feasible for MouseOver event handling?

Apologies for the complicated title. Here is the structure of my DataList: <asp:DataList ID="DataListFloor" runat="server" RepeatColumns="5" > <ItemTemplate> <div style='width:199px;height:166px;background-color: <%# Ev ...

javascripthtmlcssasp.netvisual-studio-2010

Converting canvas illustrations into HTML files

I am in the process of creating a drawing application that will be able to export into HTML/CSS/JavaScript. I plan to use this tutorial as a foundation for the drawing functionality. My goal is to take all the rectangles within the this.shapes = [] array a ...

javascriptcsshtml

Exploring the capabilities of TO_SECONDS and AGGREGATE functions in MariaDB/MySQL

I attempted to summarize my table using TO_SECONDS with aggregate functions like AVG and COUNT. However, the outcome was not as I anticipated. Below is an example of the table: MariaDB [test]> select * from mytable; +----+---------------------+------+ ...

mysqlaggregatemariadb

CSS gallery slideshow with images that smoothly fade-in and fade-out at a specified location

In the image below, at position 4 (marked by yellow circle) from the left where picture 6 is displayed, I want a cross-fade (fade-in/fade-out) gallery of images to take place. Specifically at position 4, I am looking for a cross-fade (fade-in/fade-out) ef ...

htmlcsscss-animationsfadeinfadeout

pressing the switch will adjust the size of the container

I am looking to implement a feature where clicking on an icon will resize a div to full screen in the browser. Below is the HTML code I have set up for this functionality, and I am open to suggestions on how to achieve this. <div> <a (click)= ...

javascriptcssangulariframe

What is the best way to toggle between two forms with JavaScript?

I have designed a login screen with two forms inside one div. The first form contains the login box, while the second form is for registration and is hidden using CSS with display:none;. Below the login button, there is a paragraph with an anchor tag to cl ...

javascripthtmlcss

The static menu is malfunctioning and is disrupting the smooth operation of the website

I've created a custom Wordpress menu that should switch to a different layout when scrolling down. While the functionality works fine, I'm facing an issue where a portion of the page is lost every time the menu transitions from "relative" to fixe ...

jquerycssmenu

What is the method for determining if two rows are alike?

Is there a method in SQL to compare two rows for similarities, and if so, how can I determine the number of such occurrences? select columna,columnb from table1 having columna like columnb Would a search using '%columnb%' be appropriate for th ...

mysql

Nodejs in MySQL resets the recursion depth back to 0

I recently encountered an issue with a recursive stored procedure in my database. Initially, I set the recursion depth to 100 by using SET max_sp_recursion_depth=100; before the CREATE PROCEDURE line, and everything worked smoothly when calling the procedu ...

mysqlnode.jsnpmstored-procedures

What is the best way to ensure image alignment is correct before displaying mat-error in Angular Material?

Having an issue with aligning an image with a mat error message in my Angular Material application. I've tried using matprefix but it's restricted to mat-form-field only. Any suggestions on how to properly align the image with the text? HTML < ...

htmlcssangularangular-material

I am experiencing an issue where the submit button in my HTML form is unresponsive to clicks

Welcome to my HTML world! <form action="petDetails.php" id="animalInput"> <ul> <li> <label for="dogName">Enter Dog's Name:</label><input id="dogName" type="text" name="dogName" /> </l ...

javascripthtmlcssajax

Having trouble connecting to the MySQL server from a Node.js app using Sequelize? I previously used Docker to run a MySQL container, but now I'm running into issues trying to connect locally

Every time I attempt to connect my express.js application to the node server, I encounter an error (as shown in the console message below). Everything was running smoothly before I dockerized my app, but once I created my mysql-image-container (docker) and ...

mysqlnode.jsdockerexpresssequelize.js

Creating a smooth transition for an element's width change as a neighboring element shows or hides using v-show

I'm working on a Vue.js application with tailwind styling. Within a flex parent container in my template, I have two child elements - one is always present, and the other is conditionally rendered using v-show. The issue arises when the conditional e ...

cssvue.jsvuejs3tailwind-css

Is there any effort being made to utilize jQuery for the css @media screen and (max-width: 768px) function?

Is there a solution for handling the @media screen and (max-width: 768px) in CSS? I have created a responsive navigation bar, but when I change the display property of an element from none to block on mobile screens, it also appears on larger screens. Is ...

javascriptjquerycss

Interacting with a DIV element can also have an impact on the links within

Below is my current CSS code: .contact{ padding:1rem; background:#023B6C; padding:1rem; position:fixed; right:-20px; top:27%; z-index:99; border-radius:5px 5px 0 0; border:2px solid #fff; transform:rotate(-90deg); transition:all .5 e ...

csshtmlhover