Home Community Mys-Script Creative Off-Topic |
|
|
Thread Tools | Display Modes |
#11
|
||||
|
||||
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. Code:
<span class="navbar-right timeboth"></span> Code:
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+">"); 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 Last edited by Kyttias; 06-14-2014 at 05:23 AM. |
Tags |
bootstrap, jquery, mobile-first, responsive |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Bootstrap [AdminCP version] | Kyttias | Templates and Themes | 15 | 03-12-2021 06:07 PM |
Basic Browser Game Tutorial using Smarty and Bootstrap | Kesstryl | Programming and Game Development | 3 | 10-29-2014 10:15 PM |
I created a responsive template | audition | Questions and Supports | 0 | 02-01-2014 05:02 PM |
Request - Responsive Themes | Kesstryl | Templates and Themes | 4 | 01-29-2014 10:21 PM |
Responsive design | Kesstryl | Suggestions and Feature Requests | 5 | 03-06-2013 02:34 PM |
What's New? |
What's Hot? |
What's Popular? |