Bootstrap [responsive, mobile-ready]

[Kyttias]

Both of these tasks can be done with a bit of Javascript. ^w^~

html - This goes just after the list of links ends, but before the end of the navbar.

   <span class="navbar-right timeboth"></span>

javascript/jquery - This can be included near the bottom, just before the end of the body INSIDE <script> </script> tags.

 var now = new Date();
var hrs = now.getHours();
var img = "";
var a_p = "";

if (hrs < 12) { a_p = "AM"; }
else { a_p = "PM"; }
if (hrs === 0) { hrs = 12; }
if (hrs > 12) { hrs = hrs - 12; }

var min = now.getMinutes();
if (min < 10) { var min = "0"+min; }
var time = hrs + ":" + min + " " + a_p +" ";

if (hrs >  0) img = "http://static.jsbin.com/images/jsbin_16.png"; // After midnight
if (hrs >  6) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 6am
if (hrs > 12) img = "http://static.jsbin.com/images/jsbin_16.png"; // After noon
if (hrs > 17) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 5pm
if (hrs > 22) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 10pm

// If you want to use the time + a small image, use a class of "timeboth":
$(".timeboth").html(time+"<img src="+img+">").css({"color": "#fff", "padding": "15px 0 15px 0"});

// Any element with a class of "time" will be filled with the time:
$(".time").html(time);

// Any element with a class of "timeimg" will get its image:
$(".timeimg").html("<img src="+img+">");

I think you can get the jist of what's going on if you stare at it enough. ovo/ Right now it's got the same image displaying for everything, of course, but you can see where to change it from the examples above (as you can probably guess, the basis is military time, yet I've hacked the date to read as AM/PM).

A css fix has been added to the class of "timeboth" with a bit of jQuery to align it with the links of the Bootstrap header, but this fix has not been applied to "time" and "timeimg" in case you want to use those elsewhere. Feel free to copy that fix to the other two, imitate the format, or make css amends in an actual stylesheet. (I wasn't sure whether you wanted to use these separately or not. For all I know, you may want to change your entire header to a sunrise/sun/sunset/moon based on the time of day!)

Check out this jsbin I've made for a working example.

Keep in mind that this code is a mix of both Javascript and jQuery (for convenience). The Bootstrap theme comes bundled with jQuery already, anyone who doesn't have it will have to include a link to prior to inserting a script that requires it.

To anyone staring at this and going "wow that's neat" - yes, getMonth(); and getDate(); exist as well (and for full homework, see how the entire Date(); object in Javascript is constructed).

On a final note, the data received is only as current as the page load. So it will display information based on the time the page was loaded, and pulls it's time directly from the user's computer, and not the server. It will be up to the script creators to make something accurate to server time that a user cannot change simply by messing their computer clock. It's good for visual effects, but I wouldn't rely on it to do much more than that. And unlike server side code, anyone can view the source of the page and view its Javascript - so if you're hiding promo codes in images, someone could easily find them all.

It's also theoretically possible to pull data on the moon phase...... but I don't really feel like going into that. >_o