Image(header) rotation based on time?
#1
Posted 03 June 2007 - 02:23 PM
I need a bit of help. I've saw it on google somewhere, but i didn't need it. Then when i needed it, i couldn't find it (Always happens to me `_`).
Anyway, This might be a double post? i dunno i've searched for it and nothing came up. Maybe i've worded it wrong, bleh!
Well, I would like to have a php header/image rotation script which is based on time.
E.g. if time = 12:01am-6am then show sunrise.jpeg
if time = 6:01am - 12pm then show midday.jpeg
if time = 12:01pm - 6:pm then show sunset.jpeg
if time = 6:01pm - 12pm then show midnight.jpg
or what ever.
I'm quite new to PHP, well infact im a giant newbie Im more into VB so, as you can probably tell by this question ' I AM TEH NOOB '.
How would i go about doing this?
or would time based CSS be any better (becuase i've defined my header and what not in the css)
help me please BABIES
x
#2
Posted 03 June 2007 - 03:34 PM
Provided, there are several ways to do such a thing easily, but since I don't screw with time more than for timestamps and file mod times, I wouldn't know, lol.
Either way, have a look into the time() functions and all its related. You might find something in someone's comments even.
You would essentially use a long series of if/elseif/else statements, comparing the timestamp to timestamps of the times you need (morning, afternoon, night, ect).
I believe this has been asked on this forum before, so try the search feature.
Edit:
I don't think this takes the user's time into account, but this may lead you in the right direction (this topic was about header redirecting, but the arithmetic discussed is the same).
http://www.dynamicdr...php/t-6736.html
Edited by Demonslay, 03 June 2007 - 04:03 PM.
#3
Posted 04 June 2007 - 04:16 AM
$hour_in_24 = date( 'G' ); if( $hour_in_24 >= '0' && $hour_in_24 < '6' ) { echo 'Its sunrise!'; } else if( $hour_in_24 >= '6' && $hour_in_24 < '12' ) { echo 'Its midday!'; } else if( $hour_in_24 >= '12' && $hour_in_24 < '18' ) { echo 'Its sunset!'; } else { echo 'It must be night!'; }
Personally I would change the times a bit on those but yea that should be your basic thing.
But like demonslay said, it would be going by your server time.
Matt
#4
Posted 04 June 2007 - 05:19 AM
Noway, didn't think anyone would actually reply!
After reading up on it, i though about using javascript? instead of PHP, javascript actually uses the users time so that i tought would be better.
But, i dunno how to change the css via Javascript
But, after reading some otherstuff
i kinda knocked up this
Is it anygood?
[codebox]<link rel="stylesheet" type="text/css" href="style/<?php
$time = time('H');
if ($time >= 00 && $time < 06) {
echo 'sunrise';
}
elseif ($time >= 06 && $time < 12) {
echo 'midday';
}
elseif ($time >= 12 && $time < 18) {
echo 'sunset';
}
else { echo 'midnight'; }
?>.css" type="text/css" media="all" />[/codebox]
Thanks!
#5
Posted 04 June 2007 - 05:26 AM
time('H')to
date('H')and then it will work.
Matt
#6
Posted 04 June 2007 - 07:21 AM
AH i thought it was Time, never mind.
I'll give it a bash when i get home, college ftl.
Thanks alot!
btw, I love your pictures on your site, really nice.
Would i be allowed to use them? or are they like copyrightedededed
x
although, i'd love to have some ones of like sunset/sunrise/midday/midnight etc etc.
I would look on deviantart, although my college tech has filtered it the ***** * ** * * ** ******* * * * * * * * ******
`_`
><
ffs, i'm looking into JavaScript again. That would be more 'efficient'
I'm a total fucking newbie to JS, so, i read a few TUT's
and came up with this?
[codebox]
<script language="JavaScript">
var currentTime = new Date()
var hours = currentTime.getHours()
document.write(hours) </script>
<head>
<style type="text/css" href="<script language="JavaScript"> document.write(hours)</script>.css" </style>
</head><script language="JavaScript">
var currentTime = new Date()
var hours = currentTime.getHours()
document.write(hours)
document.write(hours).css"
[/codebox]
good?bad? correct /whine
Edited by Mr. Matt, 05 June 2007 - 01:15 AM.
#7
Posted 04 June 2007 - 10:43 PM
Try this.
<head> <script language="JavaScript"> var currentTime = new Date(); var hours = currentTime.getHours(); if(hours >= 00 && hours< 06) stylesheet = 'sunrise'; elseif(hours>= 06 && hours< 12) stylesheet = 'midday'; elseif(hours>= 12 && hours< 18) stylesheet = 'sunset'; else stylesheet ='midnight'; document.write('<link rel="stylesheet" type="text/css" href="'+stylesheet+'.css" />') </script> </head>
#8
Posted 04 June 2007 - 11:01 PM
#9
Posted 04 June 2007 - 11:16 PM
If you use JS, wont you make the client download ALL your headers, before displaying just 1? unless you really learn it and whip up some type of ajax?
What do you mean by that?
With the script I posted, it will only load one sheet. The browser won't even know the rest of the stylesheets exist.
#10
Posted 04 June 2007 - 11:20 PM
nice script by the way
#11
Posted 05 June 2007 - 01:16 AM
Matt
#12
Posted 05 June 2007 - 05:08 AM
Ah, no worries, i already got some anyway, but yours are v.nice though.
Ahh, Just spoted your post, Okey, i'll give it a bash... Yah, it was very rushed and i know my syntax was very very bad, `_`.
I'll try it now,
edit: no wait, i cant. Host is being a ****(Edited by Adam)..
Thanks again
T'is back now:
I implemented it; and got this
Edited by . Adam ., 05 June 2007 - 04:13 PM.
Please leave the swearing out of your replys
#13
Posted 05 June 2007 - 11:52 AM
I see no errors or anything, does it work how you need it, or what?
If you are wondering why it isn't actually 'echoing' the string, that is because JavaScript is executed by the client, you will never see the direct output of a client-side script unless you use some sort of tool such as Firebug.
You should just notice your browser has made a request to the certain stylesheet page, and if it exists you'd see changes in the site's theme.
Edited by Demonslay, 05 June 2007 - 11:54 AM.
#14
Posted 05 June 2007 - 04:06 PM
If that makes sense :<.
:bashhead:
#15
Posted 05 June 2007 - 04:08 PM
#16
Posted 05 June 2007 - 04:28 PM
#17
Posted 05 June 2007 - 04:35 PM
#18
Posted 05 June 2007 - 09:29 PM
You won't actually 'see' it replacing it, its executed by the browser...
I don't see why it would be highlighted, it isn't a syntax error, and it is JavaScript, your source editor just parses it and expects the full document to be HTML.
Do you even have stylesheets with the filename 'sunrise.css', 'midday.css', and 'sunset.css'?
#19
Posted 06 June 2007 - 02:32 AM
Don't laugh at somebody just cuz they got told off by two mods. You're breaking just as many rules right now as he did.Lolololololololol
With that aside, here is the problem i am having with this topic. It sounds to me like he simply wants to change an image based on the time of day. Just the image, nothing else. Now, were are going on a long drawn out discussion about how to change whole style sheets and why it isn't working... So, if i'm right in being confused, lets get back on topic, changing an image based on time.
As has been suggested, JS would be a convenient way of doing this, so the user sees the correct image for his time zone (or at least what his computer thinks to be right). We've already gotten time detection scripts (or at least it looks like we have). Now we just need to change the image.
To change it, it first has to be there, or else what would we be changing? Next, we have to make sure people with JS disabled are just as happy as those with it enabled (or for another example, bots).
<html> <head> <title>Foo!</title> <script type="text/javascript"> // Fun little function i found function getElement(id){ return document.getElementById ? document.getElementById(id) : document.all[id]; } // Event handling! window.onload = function(){ // Get the date/hour info var date = new Date(); var hour = date.getHours(); // Create other vars and set default image directory, changes might be needed var img, dir='images/'; if(hour >= 0 && hour < 6) img = 'sunrise.jpg'; else if(hour >= 6 && hour < 12) img = 'midday.jpg'; else if(hour >= 12 && hour < 18) img = 'sunset.jpg'; else img = 'midnight.jpg'; // Change the image. getElement('header').src = dir + img; } </script> </head> <body> The following image should show a default in the event JS breaks, please make note this. If this works, you'll see the proper image below.<br> <img src="default_image.jpg" alt="" id="header"> </body> </html>
Now of course, there is the chance that you could be using a background image rather than an "image." So, let me assume (since you have yet to provide us any source code) you have a div with a certain class name or what ever. Simply give it the id="header" attribute, or change the id in the JS to match one that it already has and then just change the last line in the JS i provided to this:
getElement('header').style.backgroundImage = dir + img;Now, life either got really simple, or this was one big waste of time
p.s. It's late, so please excuse any sarcasim. Also, i have a tendancy to make parse errors (even when i am awake), so don't expect this to work right out of the box.
Edited by rc69, 06 June 2007 - 02:34 AM.
#20
Posted 06 June 2007 - 02:34 AM
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users