Friday, 3 June 2016

VERY SIMPLE ANIMATED PROGRESS BAR ON LOAD


This is very easy way of getting a progress bar or similar element to transition from one state/width to another once the website has fully loaded. Useful for enhancing a point, or ability of a company/profile etc if used subtly and effectively.
This works by first of all setting your progress by to 0% via CSS, and then setting up transition rules that any changes will happen over 4 seconds (you can of course change this to suit your preference, as well as colours etc.)
The javascript will then set a new width and background colour to the bar which will appear to animate due the transitions rules mentioned above.
Achievable in simply a few lines of code.
The CSS:
.progress_bar {
  height: 15px;
  background: orange;
  width: 0%;
  -moz-transition: all 4s ease;
  -moz-transition-delay: 1s;
  -webkit-transition: all 4s ease;
  -webkit-transition-delay: 1s;
  transition: all 4s ease;
  transition-delay: 1s;
}
THE HTML:

<div id="progressBar" class="progress_bar"></div>
The Javascript (Vanilla), with a commented line if you want to animate to a percentage output by PHP etc.
  // Assign your element ID to a variable.
  var progress = document.getElementById("progressBar");
  // Pause the animation for 100 so we can animate from 0 to x%
  setTimeout(
    function(){
      progress.style.width = "100%";
      // PHP Version:
      // progress.style.width = <?php echo round($percentage150,2); ?>+"%";
      progress.style.backgroundColor = "green";
    }
  ,100);
The whole code put together, very simple:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Animated CSS/JS Progress Bar</title>
  <link rel="author" href="https://plus.google.com/u/0/116030566292183707588/posts">
  <!-- A simple Animated progress by @mrwigster / @trulycode -->
</head>
<body>
<style>
.progress_bar {
  height: 10px;
  background: orange;
  width: 0%;
  -moz-transition: all 4s ease;
  -moz-transition-delay: 1s;
  -webkit-transition: all 4s ease;
  -webkit-transition-delay: 1s;
  transition: all 4s ease;
  transition-delay: 1s;
}
</style>

<div id="progressBar" class="progress_bar"></div>

<script>
  // Assign your element ID to a variable.
  var progress = document.getElementById("progressBar");
  // Pause the animation for 100 so we can animate from 0 to x%
  setTimeout(
    function(){
      progress.style.width = "100%";
      // PHP Version:
      // progress.style.width = "<?php echo $progressPercentage; ?>";
      progress.style.backgroundColor = "green";
    }
  ,100);
</script>
</body>
</html>

PHP GENERATED YEAR DROP DOWN SELECT BOX

A very common feature of forms is the dropdown <select> box, commonly using a range of years as the options.
Writing and maintaining these long list of options/years can be very monotonous via plain HTML.
This following codebyte generates a simple select box, with an <option> for each year based on some basic arguments.
Change $currently_selected to be the option you want as the top/default option of the select box.
$earliest_year to be the lowest year you want the range to start at.
$latest_year to be the highest year you want your range to go to.
  <?php
  // Sets the top option to be the current year. (IE. the option that is chosen by default).
  $currently_selected = date('Y'); 
  // Year to start available options at
  $earliest_year = 1950; 
  // Set your latest year you want in the range, in this case we use PHP to just set it to the current year.
  $latest_year = date('Y'); 

  print '<select>';
  // Loops over each int[year] from current year, back to the $earliest_year [1950]
  foreach ( range( $latest_year, $earliest_year ) as $i ) {
    // Prints the option with the next year in range.
    print '<option value="'.$i.'"'.($i === $currently_selected ? ' selected="selected"' : '').'>'.$i.'</option>';
  }
  print '</select>';
  ?>

CONVERT UK STYLE DATE TO WORK WITH STRTOTIME() FUNCTION

By default the PHP function strtotime() will take most date formats, and convert them to a Unix/Epoch timestamp.
However, as versatile as this function is, unfortunately our planet (Earth) is not quite as succinctly set up.
One main problem is the difference in formatting between UK and USA dates. UK dates are typically formatted: dd/mm/yyyy, whereas USA uses: mm/dd/yyyy.
This becomes particularly confusing for PHP to interpret , as it’s not clear whether the following is 11th December, or the 12th of November: 11/12/2014
PHP will assume this date 11/12/2014 to be American format, by default. Thus if you actually entered it as a UK date, your data is no longer incorrect.
This problem can easily be solved in a few ways:
Method 1:
The strtotime() function will always assume an American format when the separator of / is used. However if the dash separator (-) is used, it assumes UK format:
<?php 
$date = strtotime(str_replace('/', '-', '11/11/2014')); 
?>
Method 2: Explicitly set the format and return a DateTime object.
<?php 
$date = date_create_from_format('d/m/y', '27/05/1990'); 
?>
Method 3: Use a string operation to re-format:
<?php
$date = "31/12/2014";
$bits = explode('/',$date);
$date = $bits[1].'/'.$bits[0].'/'.$bits[2];
$date = strtotime($date);
?>
Method 1 should be the easiest solution for most uses, with method 2 being preferable if you want to return a DateTime object that can be better to work with if you need to do further adjustments.
Method 3 is the least preferred method, but can be useful if your date format will need slightly more custom handling and manipulation before being converted to the date string format.

CONVERT LIST OF DATES TO TIMESTRING WITH PHP

Working with dates is a hugely common feature of systems. The problem as humans is we don’t have a universally agreed upon format. The UK will use dd/mm/yyyy, America uses mm/dd/yyyy and even combinations of these.
Luckily with computer systems we have a generally agreed upon timeformat called a UNIX timestamp, sometimes referred to as a Epoch timestamp or Posix time.
This timestamp is the number of seconds that have elapsed since 00:00:00 Coordinated Universal Time (UTC), Thursday, 1 January 1970.
For this reason you may sometimes have a list of dates you want to convert to the EPOCH timestamp. This is fairly easy with online tools if you only have 1 timestamp to do. However when you have hundreds to convert (imagine migrating from one system to another and wanting to change the way you store dates in your database).
The below PHP code/snippet will help you easily generate a list of timestamps for the dates you feed into it.
<?php
// Create the function to accept the date format you're expecting. In this case it's dd/mm/yyyy, you can just swap the j/n/y around if you want to accept different combinations.
function dateToTimestamp($date) {
  return DateTime::createFromFormat('j/n/Y', $date)->getTimestamp();
}

// Example dates, list your own here in the array:
$dates=[
'18/6/2015',
'25/9/2015',
'19/6/2015',
'3/7/2015',
'25/6/2015',
'10/7/2015'
];

// This foreach will loop over all the dates you provided and print out the EPOCH timestamp version.
foreach ($dates as $date) {
  echo dateToTimestamp($date);
  echo '<br>';
}
?>

PHP function to check date or time between the given range

Simply use strtotime php function to solve the problem.

strtotime — "The function expects to be given a string containing an English date format and will try to parse that format into a Unix timestamp"
The function to check if date/time is within the range:
function check_date_is_within_range($start_date, $end_date, $todays_date)
{

  $start_timestamp = strtotime($start_date);
  $end_timestamp = strtotime($end_date);
  $today_timestamp = strtotime($todays_date);
  return (($today_timestamp >= $start_timestamp) && ($today_timestamp <= $end_timestamp));
}

Call function with parameters start date/time, end date/time, today's date/time. Below parameters gets function to check if today's date/time is between 2012-12-31 and 2013-11-26.

if(check_date_is_within_range('2012-12-31', '2013-11-26', date("Y-m-d"))){
    echo 'In range';
} else {
    echo 'Not in range';
}

Subscribe to: Posts (Atom)