Jump to content


Photo

Image(header) rotation based on time?


  • Please log in to reply
24 replies to this topic

#1 kingzl3y

kingzl3y

    Young Padawan

  • Members
  • Pip
  • 16 posts

Posted 03 June 2007 - 02:23 PM

Well, as the title suggests
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 Demonslay

Demonslay

    P2L Jedi

  • Members
  • PipPipPip
  • 973 posts
  • Gender:Male
  • Location:A strange world where water falls out of the sky... for no reason.
  • Interests:Graphic Design, Coding, Splinter Cell, Cats

Posted 03 June 2007 - 03:34 PM

Well, when it comes to this kind of thing, you probably won't get the most accurate thing, because when using a server-side script, you will be working off the server's local time, and not the client's.
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 Mr. Matt

Mr. Matt

    Moderator

  • Validating
  • PipPipPipPip
  • 1,945 posts
  • Gender:Not Telling

Posted 04 June 2007 - 04:16 AM

This is a quick thing I knocked up:

$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 kingzl3y

kingzl3y

    Young Padawan

  • Members
  • Pip
  • 16 posts

Posted 04 June 2007 - 05:19 AM

:w00t:
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 Mr. Matt

Mr. Matt

    Moderator

  • Validating
  • PipPipPipPip
  • 1,945 posts
  • Gender:Not Telling

Posted 04 June 2007 - 05:26 AM

You need to change the
time('H')
to
date('H')
and then it will work.

Matt

#6 kingzl3y

kingzl3y

    Young Padawan

  • Members
  • Pip
  • 16 posts

Posted 04 June 2007 - 07:21 AM

Awesome.
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 Demonslay

Demonslay

    P2L Jedi

  • Members
  • PipPipPip
  • 973 posts
  • Gender:Male
  • Location:A strange world where water falls out of the sky... for no reason.
  • Interests:Graphic Design, Coding, Splinter Cell, Cats

Posted 04 June 2007 - 10:43 PM

I've never done anything with dates in JavaScript, but you're syntax is way off either way.

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 SatanicPenguins

SatanicPenguins

    P2L Jedi

  • Members
  • PipPipPip
  • 541 posts
  • Gender:Male
  • Interests:Photoshop, Web Design, Graphic Design, Internet.

Posted 04 June 2007 - 11:01 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?

#9 Demonslay

Demonslay

    P2L Jedi

  • Members
  • PipPipPip
  • 973 posts
  • Gender:Male
  • Location:A strange world where water falls out of the sky... for no reason.
  • Interests:Graphic Design, Coding, Splinter Cell, Cats

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 SatanicPenguins

SatanicPenguins

    P2L Jedi

  • Members
  • PipPipPip
  • 541 posts
  • Gender:Male
  • Interests:Photoshop, Web Design, Graphic Design, Internet.

Posted 04 June 2007 - 11:20 PM

i didn't even see your script my bad lol, I wouldn't of thought of using JS to change up the stylesheets don't know what i was thinkin. Shoulda figured that much because thats how i change headers on mine

nice script by the way

#11 Mr. Matt

Mr. Matt

    Moderator

  • Validating
  • PipPipPipPip
  • 1,945 posts
  • Gender:Not Telling

Posted 05 June 2007 - 01:16 AM

Please use the edit feature next time and sorry no you cannot use my photos, just for show only.

Matt

#12 kingzl3y

kingzl3y

    Young Padawan

  • Members
  • Pip
  • 16 posts

Posted 05 June 2007 - 05:08 AM

well, my knowledge of js is well ***. I'm also new to php so everything i do is just by accident :'].
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 :D

T'is back now:
I implemented it; and got this
Posted Image
:unsure:

Edited by . Adam ., 05 June 2007 - 04:13 PM.
Please leave the swearing out of your replys


#13 Demonslay

Demonslay

    P2L Jedi

  • Members
  • PipPipPip
  • 973 posts
  • Gender:Male
  • Location:A strange world where water falls out of the sky... for no reason.
  • Interests:Graphic Design, Coding, Splinter Cell, Cats

Posted 05 June 2007 - 11:52 AM

And what about it?

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 kingzl3y

kingzl3y

    Young Padawan

  • Members
  • Pip
  • 16 posts

Posted 05 June 2007 - 04:06 PM

It didn't work, i dunno why. I changed it in my document and then uploaded it, and it didn't show the css. I then viewed the sites source and it just highlighted 'STYLESHEET' in red. It didn't actually replace it with 'sunrise' 'midday' or whatnot. It just doesn't write the name of the css.
If that makes sense :<.
:bashhead:

#15 Mr. Matt

Mr. Matt

    Moderator

  • Validating
  • PipPipPipPip
  • 1,945 posts
  • Gender:Not Telling

Posted 05 June 2007 - 04:08 PM

Next time its a warn, please edit your posts if you are going to post one after the other.

#16 kingzl3y

kingzl3y

    Young Padawan

  • Members
  • Pip
  • 16 posts

Posted 05 June 2007 - 04:28 PM

Oh, okey dokey.

#17 SatanicPenguins

SatanicPenguins

    P2L Jedi

  • Members
  • PipPipPip
  • 541 posts
  • Gender:Male
  • Interests:Photoshop, Web Design, Graphic Design, Internet.

Posted 05 June 2007 - 04:35 PM

Lolololololololol :lol:

#18 Demonslay

Demonslay

    P2L Jedi

  • Members
  • PipPipPip
  • 973 posts
  • Gender:Male
  • Location:A strange world where water falls out of the sky... for no reason.
  • Interests:Graphic Design, Coding, Splinter Cell, Cats

Posted 05 June 2007 - 09:29 PM

I still think you are missing the point...
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 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 06 June 2007 - 02:32 AM

Lolololololololol :lol:

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.

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>
&lt;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 :D

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 SatanicPenguins

SatanicPenguins

    P2L Jedi

  • Members
  • PipPipPip
  • 541 posts
  • Gender:Male
  • Interests:Photoshop, Web Design, Graphic Design, Internet.

Posted 06 June 2007 - 02:34 AM

Was actually laughing at the joke Adam made :), SO yeh.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users