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

File Size: 12.9 KB
Views Total: 1997
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Display Messages According To Time & Date - Goodmorning.js

jQuery Goodmorning.js is a jQuery plugin which detects user's local date & time and display messages/icons accordingly. Goodmorning.js can be styled in your css files targeting the time with a class of timeDisplay and the icon with a class of sunriseIcon. You can also customize your goodmorning.js plugin by choosing the time of day at which you would like to display each message. You can also choose to turn icons on or off and implement Friday or Monday modes. 

Basic usage:

1. Make sure to include the jQuery Goodmorning.js after loading jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="goodMorning.js"></script> 

2. To run goodmorning.js call the function in your main scripts file as outlined below. Note that .wrapper is referring to a div in the HTML markup. You can replace this with the name of the div where you would like to display your goodmorning.js messsage.

$(function(){
  $('.wrapper').goodMorning({

  });
}); 

3. Custom settings

$(function(){
  $('.wrapper').goodMorning({
    morning: 7,
    noon: 12,
    evening:18,
    night:22,
    icon: true,
    monday: true,
    tgif: true
  });
});

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