CODEWITHSUNDEEP
phpjqueryhtmlcsstwitter-bootstrap
i am horrible
i am horrible

Reputation: 43

Bootstrap progress bar issue

I'm just learning progress bars, and database with PHP. As of now, my progress bar doesn't increase it's value. If I manually set it to "2", it will work. if I set it anywhere above 2, it wont work. This was done with Bootstrap.

This is my first time on a website like this, sorry if what I'm trying to say doesn't make sense.

<?php
    $items =  $database->query("SELECT User_Items FROM Items WHERE Username = User_Here");
    if($items->num_rows)
    {
        while($row = $items->fetch_assoc())
        {
            $itemcount = $row['User_Items']; 
        }
    }
?>

<div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6">
        <p>Total Items</p>
        <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="<?php echo $totalitems; ?>" aria-valuemin="0" aria-valuemax="5" style="width: 0%"></div>
        </div>

       <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5" style="width: 0%"></div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: 0%"></div>
        </div>
    </div>
</div>
<script type="application/javascript">
$('.progress-bar').each(function() {
  var min = $(this).attr('aria-valuemin');
  var max = $(this).attr('aria-valuemax');
  var now = $(this).attr('aria-valuenow');
  var siz = (now-min)*100/(max-min);
  $(this).css('width', siz+'%');
});
</script>
<?php
    mysqli_free_result($result);
    $database->close();
?>

This image has the progress bar set to "2"

enter image description here

This image has the progress bar set to "5", the max value.

enter image description here

Upvotes: 4

Views: 971

Answers (3)

i am horrible
i am horrible

Reputation: 43

Think the issue was that I never had

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

included.
It started to work after I put that into my script (thought I already had it).
Thanks to those who helped!

Upvotes: 0

Lalji Nakum
Lalji Nakum

Reputation: 380

Use parseInt() in your siz variable like below :

Replace : 

$(this).css('width', siz+'%');

With : 

$(this).css('width', parseInt(siz)+'%');

it considers "siz" variable value as string so you need to change from string to interger.

Upvotes: 1

Vishnu Sharma
Vishnu Sharma

Reputation: 642

Its seems the problem with the $itemcount, $itemcount might be is empty.

See: JsFiddle it's working.

Upvotes: 1

Related Questions