Availability Indicator

Availability-Indicator.markdown

Availability Indicator

This is a simple way to indicate the best times for a client to contact you via a given medium. This could be used for chat, twitter, skype etc...

TODO: Add in timezone support.

A Pen by Thomas Schultz on CodePen.

License.

index.html

<ul>
  <li>
    <a href="mailto:[email protected]" class="available">E-mail Me</a>
  </li>
  <li>
    <a href="https://www.twitter.com/daspecster" class="available">Tweet Me</a>
  </li>
</ul>

QwBgVB.markdown

QwBgVB

A Pen by Thomas Schultz on CodePen.

License.

script.js

$(document).ready(function() {
  function check_availability() {
    
    var now_available_message = "Now is a great time to reach me!";
    var almost_available_message = "I should be available soon.";
    var not_available_message = "I'm not available right now.";
    var currentTime = new Date().getHours();
    
    if (0 <= currentTime&&currentTime < 8) {
      // 12am - 8am
      $('a.available').removeClass('now-available almost-available ').addClass('not-available');
      $('a.available').attr('title', not_available_message);
    }
    if (8 <= currentTime&&currentTime < 9) {
      // 8am - 9am
      $('a.available').removeClass('now-available not-available ').addClass('almost-available');
      $('a.available').attr('title', almost_available_message);
    }
    if (9 <= currentTime&&currentTime < 17) {
      // 9am - 5pm
      $('a.available').removeClass('not-available almost-available ').addClass('now-available');
      $('a.available').attr('title', now_available_message);
    }
    if (17 <= currentTime&&currentTime < 24) {
      // 5pm - 12am
      $('a.available').removeClass('now-available almost-available ').addClass('not-available');
      $('a.available').attr('title', not_available_message);
    }
  }

  // Update every minute
  check_availability();
  setInterval(check_availability(), 1000 * 60);
});

style.css

.now-available::after {
  /* content: "•"; */
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="10" width="10"><circle cx="5" cy="5" r="5"  fill="lightgreen" /></svg>');
  position: relative;
  left: 5px;
}


.not-available::after {
  /* content: "•"; */
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="10" width="10"><circle cx="5" cy="5" r="5"  fill="red" /></svg>');
  position: relative;
  left: 5px;
}

.almost-available::after {
  /* content: "•"; */
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="10" width="10"><circle cx="5" cy="5" r="5"  fill="orange" /></svg>');
  position: relative;
  left: 5px;
}

body {
  font-family: Helvetica, 'sans serif';
}

a { 
  text-decoration: none;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  float: left;
  padding-right: 20px;
}