jQuery Plugin To Display Welcome Message Based On Current Time - Greeting

Greeting is a minimalist jQuery plugin that shows welcome / greeting messages with different text and colors depending on the time of the day.

See also:

• jQuery Plugin To Display Messages According To Time & Date - Goodmorning.js

How to use it:

1. Include the jQuery Greeting plugin just before the closing body tag as displayed below.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="GreetingPlugin.js"></script>

2. Create an empty container where you what to place the welcome/greeting messages.

<div id="greeting"></div>

3. Call the function and pass the username as a parameter to the setGreeting() method.

$('#greeting').setGreeting('My Readers');

4. Adjust the messages and related CSS styles in the JavaScript

(function ($) {

  $.fn.setGreeting = function(username){
    var now = new Date().getHours();
    var text, color;

    if (now >= 6 && now < 12){
      text = 'Good Morning,';
      color = '#008100';
    }
    else if (now >= 12 && now < 17){
      text = 'Hello,';
      color = '#CC7A29';  
    }
    else if (now >= 17 && now < 22 ){
      text = 'Good Evening,';
      color = '#005CE6';
    }
    else{
      text = 'Good Night,';
      color = '#001C53';
    }

    return this.each(function(){
      var $div = $(this);

      $div.html(text + ' ' + username);
      $div.css({
        'padding': '5px 10px',
        'backgroundColor': color,
        'color': '#fff'
      });
    });
  }

}(jQuery));

---

This awesome jQuery plugin is developed by ninaneter. For more Advanced Usages, please check the demo page or visit the official website.