CODEWITHSUNDEEP
phpjqueryhtmlcss
Jothi Kannan
Jothi Kannan

Reputation: 3358

Progressbar for between 2 dates with php and css

i want a progressbar to show the how much time completed between 2 given days, most probably i got answer but it doesn't work on some cases

Styles:

<style type="text/css">
    #progressbar div
    {
      background-color: #99cc66;
       width: 50%; 
       height: 20px;
       border-radius: 10px;

    }
    </style>

case 1: working code

<?php
$date1 = strtotime("2014-09-05 11:44:01");
$date2 = strtotime("2014-09-07 12:44:01");
$today = time();


$num = $today - $date1;
$den = $date2 - $date1;
$percentage = ($today - $date1) / ($date2 - $date1) * 100;
?>
<?php if($percentage<100 && $percentage>=0){ ?>
<div id="progressbar" style="border: 1px solid ; border-radius: 10px;">
<div style="width: <?php echo $percentage; ?>%;"><span><?php echo round($percentage,2); ?>%</span></div>
</div>
<?php } ?>

case 2: not working

if i have to change the datetime format to 24 hours, i can't see the prgoressbar the $percentage is in negative values

<?php
$date1 = strtotime("2014-09-05 11:44:01");
$date2 = strtotime("2014-09-07 23:44:01");
$today = time();


$num = $today - $date1;
$den = $date2 - $date1;
$percentage = ($today - $date1) / ($date2 - $date1) * 100;
?>
<?php if($percentage<100 && $percentage>=0){ ?>
<div id="progressbar" style="border: 1px solid ; border-radius: 10px;">
<div style="width: <?php echo $percentage; ?>%;"><span><?php echo round($percentage,2); ?>%</span></div>
</div>
<?php } ?>

i want this progressbar work with the even 24hour format, any clue on this?

Upvotes: 1

Views: 2408

Answers (3)

Traian Tatic
Traian Tatic

Reputation: 691

Just try using this logic:

if ($today < $date1)
{
    $perentage = 0;
}
else if ($today > $date2)
{
    $percentage = 100;
}
else
{
    //$date2 - $date1 = 216000 (difference between 2 days)
    // Logic
    // 216000          => 100%
    // $date2 - $today =>   x%
    // x = ($date2 - $today) / 2160
    //$percentage = ($date2 - $today) / 2160
    //As the OP mentioned the difference can vary so here's how to do it for any diff.
    $percentage = ($date2 - $today) * 100 / ($date2 - $date1);
}

Upvotes: 3

MacFaf
MacFaf

Reputation: 36

I think you should define timezone as well.

Then you can use:

date_default_timezone_set('UTC');
$date1 = strtotime("2014-09-04 17:44:01". " UTC");
$date2 = strtotime("2014-09-07 23:44:01". " UTC");

Upvotes: 1

Suresh Karia
Suresh Karia

Reputation: 18218

Using jquery

just include

http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/dark-hive/jquery-ui.css

- Demo Fiddle 2day

- Demofiddle 10second

It will show 100% after 2 days ;)

jquery timer

html

<span style="display: block;" class="percent"></span>

<div class="progressbar-count" value="100%"></div>

javascript/jquery

jQuery.ease = function (start, end, duration, easing, callback) {
    // Create a jQuery collection containing the one element
    // that we will be animating internally.
    var easer = $("<div>");

    // Keep track of the iterations.
    var stepIndex = 0;

    // Get the estimated number of steps - this is based on
    // the fact that jQuery appears to use a 13ms timer step.
    //
    // NOTE: Since this is based on a timer, the number of
    // steps is estimated and will vary depending on the
    // processing power of the browser.
    var estimatedSteps = Math.ceil(duration / 13);

    // Set the start index of the easer.
    easer.css("easingIndex", start);

    // Animate the easing index to the final value. For each
    // step of the animation, we are going to pass the
    // current step value off to the callback.
    easer.animate({
        easingIndex: end
    }, {
        easing: easing,
        duration: duration,
        step: function (index) {
            // Invoke the callback for each step.
            callback(
            index, stepIndex++, estimatedSteps, start, end);
        }
    });
};
$(".progressbar-count").each(function () {
    var $self = $(this),
        targetVal = parseInt($self.attr("value"));
    $self.progressbar({
        value: 0
    });
    $self.prev(".percent").text("0%");
    $.ease(0, targetVal, 172800000, "swing", function (i) {
        $self.progressbar("option", "value", parseInt(i));
        $self.prev(".percent").text(parseInt(i) + "%");
    });
});

Upvotes: 0

Related Questions