Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Templates and Themes

Notices

Reply
 
Thread Tools Display Modes
  #21  
Old 06-14-2014, 04:47 AM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 857
Gender: Unknown/Other
Credits: 61,238
Kyttias is on a distinguished road
Default

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>
javascript/jquery - This can be included near the bottom, just before the end of the body INSIDE <script> </script> tags.
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+">");
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

Last edited by Kyttias; 06-14-2014 at 05:23 AM.
Reply With Quote
  #22  
Old 06-14-2014, 08:36 AM
IntoRain's Avatar
IntoRain IntoRain is offline
Moderator
 
Join Date: Jul 2013
Location: Portugal
Posts: 461
Gender: Female
Credits: 16,977
IntoRain is on a distinguished road
Default

If you want the php version to keep doing it like what you have in Creche: http://stackoverflow.com/questions/6...me-from-server

After getting the server time, do a smarty assign like $mysidia->template->assign("time",$variableYouCreated), this makes it possible to use the variable {$time} in the template.tpl (just like {$sidebar} or {$menu}!) inside the tags Kyttias has mentioned.
Or like this http://www.smarty.net/docs/en/langua...tpl#idp6286592
__________________


asp.net stole my soul.
Reply With Quote
  #23  
Old 06-14-2014, 11:04 AM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 857
Gender: Unknown/Other
Credits: 61,238
Kyttias is on a distinguished road
Default

It's definitely smarter to do it with PHP if for any reason it has to do with promo codes, for obvious security reasons! The best designed sites flawlessly integrate beauty with purpose. It's nice to know Smarty has a built in function for server time! Definitely would have saved me half the effort last night.

- On what file does the smarty assign need to be made?
- To get an image to appear a specific time of day, but not display the time, I would still need at least this in Javascript:
Code:
var now = new Date();
var hrs = now.getHours();
var img = "";

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

// Any element with a class of "timeimg" will get its image:
$(".timeimg").html("<img src="+img+">");
- I'd love a quick lesson on how to format PHP for this instead. ovo~ It should be nearly the same? (There's a bit of shortcutting above as far as format goes, but I don't know how chill PHP is with forgoing conventional brackets.) So, safely, this would be the basic start, right? What would the next steps be, to make showing an image be as convenient showing the time like the Smarty assign?

Code:
$t = date("H");

if ($t>"0") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After midnight
if ($t>"6") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After 6am
if ($t>"12") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After noon
if ($t>"17") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After 5pm
if ($t>"22") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After 10pm
I'd like the end result to be as easy as going {$timeimg}? (I'm learning, I like this!) I think it needs to go in function (object?) that the smarty variable will be assigned to read the outcome of??

Last edited by Kyttias; 06-14-2014 at 01:14 PM.
Reply With Quote
  #24  
Old 06-14-2014, 02:04 PM
Infernette Infernette is offline
CODE CODE CODE CODE CODE
 
Join Date: Jan 2013
Location: Where I live? I live home.
Posts: 164
Gender: Female
Credits: 16,678
Infernette is on a distinguished road
Default

It works extremely perfect *_* Thank you so much, I even got it to display the server time by modifiying the script just a little.

This theme is awesome, btw, thanks for all the hard work :D
__________________
No, I have no idea what I'm doing. But it works. Barely.
Reply With Quote
  #25  
Old 06-14-2014, 02:30 PM
IntoRain's Avatar
IntoRain IntoRain is offline
Moderator
 
Join Date: Jul 2013
Location: Portugal
Posts: 461
Gender: Female
Credits: 16,977
IntoRain is on a distinguished road
Default

- It can be used on any file through $mysidia->template->assign(), as long as you declare mysidia ($mysidia = Registry::get("mysidia")). I've been using most assigns in class_template though, in assignTemplateVars() function, or in class_frame, but that's personal choice I guess. I chose those two since they are always loaded for every page

- You can also do an assign for the image link and then in the template use it wherever you want, like:

//in class_template
PHP Code:
//you can use any other date function you wish xD
$now = new DateTime();
$hrs $now->format('G');
$img "";

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

$this->assign("timeimg",$img); 
//in template.tpl or header.tpl, wherever you want it
<img src={$timeimg}>

You can assign both the time and the image at once like this if you wish. Of course, it will only refresh with a page refresh xD

- PHP is pretty much normal with brackets, if the IF condition only has one line, you need no backets, like in Javascript ^^
__________________


asp.net stole my soul.
Reply With Quote
  #26  
Old 06-14-2014, 03:21 PM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 857
Gender: Unknown/Other
Credits: 61,238
Kyttias is on a distinguished road
Default

Thankyou, that makes so much more sense. I hadn't had breakfast yet, my brain was in a fog. ^^

I added the code above into inside of the function assignTemplateVars(), which exists inside class_template.php, and it worked perfectly. My life suddenly got worlds easier.

Last edited by Kyttias; 06-14-2014 at 03:49 PM.
Reply With Quote
  #27  
Old 06-24-2014, 06:12 PM
Missy Master's Avatar
Missy Master Missy Master is offline
Pet-Sim.Online
 
Join Date: Jan 2010
Posts: 475
Gender: Unknown/Other
Credits: 29,307
Missy Master is an unknown quantity at this point
Default

Utterly brilliant. WOW. Thank you so much, I just installed this and it's incredible!!
Reply With Quote
  #28  
Old 06-24-2014, 06:15 PM
Missy Master's Avatar
Missy Master Missy Master is offline
Pet-Sim.Online
 
Join Date: Jan 2010
Posts: 475
Gender: Unknown/Other
Credits: 29,307
Missy Master is an unknown quantity at this point
Default

Utterly brilliant. WOW. Thank you so much, I just installed this and it's incredible!!
Reply With Quote
  #29  
Old 09-30-2014, 07:23 PM
coolgem923's Avatar
coolgem923 coolgem923 is offline
King of the Gems
 
Join Date: Sep 2014
Posts: 12
Gender: Male
Credits: 607
coolgem923 is on a distinguished road
Thumbs up :O

As many many people before me have said.. THIS THEME IS AMAZING! I love Bootstrap and having it made into a theme for Mysidia Adoptables is just awesome!
__________________
Sorry, this signature was eaten by an evil kumquat.
Reply With Quote
  #30  
Old 10-10-2014, 05:32 PM
coolgem923's Avatar
coolgem923 coolgem923 is offline
King of the Gems
 
Join Date: Sep 2014
Posts: 12
Gender: Male
Credits: 607
coolgem923 is on a distinguished road
Default

This is amazing!

I found a bug though, on mobile devices submenus aren't present.
__________________
Sorry, this signature was eaten by an evil kumquat.
Reply With Quote
Reply

Tags
bootstrap, jquery, mobile-first, responsive

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

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


All times are GMT -5. The time now is 06:57 AM.

Currently Active Users: 134 (0 members and 134 guests)
Threads: 4,078, Posts: 31,984, Members: 2,016
Welcome to our newest members, jolob.
BETA





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2021, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636