Simple Machines Community Forum

Customizing SMF => SMF Coding Discussion => Aiheen aloitti: gidus - lokakuu 15, 2013, 10:26:51 AP

Otsikko: Change background on top by time
Kirjoitti: gidus - lokakuu 15, 2013, 10:26:51 AP
The idea is to change background by the clock time if it's morning a background type if it's night another type so:

I added to my css file style the following codes :
.morning { background:url(bg-header.png); }
.night { background:url(bg-headernight.png); }


And i tried to add to index.template.php the following code
<body onload="var hr=new Date().getHours();document.getElementById('wrapper').className = (hr >= 6 && hr < 19 ? 'morning': 'night');">';

But i received an error about wrong syntax how could fix that?
Otsikko: Re: Change background on top by time
Kirjoitti: Kindred - lokakuu 15, 2013, 10:52:00 AP
you can't use mixed quotes like that...   SMF uses php echo statements with single quotes to display the content... which means that any single quotes MUST be escaped, if used within the echo.
Otsikko: Re: Change background on top by time
Kirjoitti: gidus - lokakuu 15, 2013, 11:07:29 AP
So i have to do a javascript function out from body and recall it with body onload="fuctionname()" ??
Otsikko: Re: Change background on top by time
Kirjoitti: Kindred - lokakuu 15, 2013, 11:08:36 AP
or escape the single quotes...
Otsikko: Re: Change background on top by time
Kirjoitti: gidus - lokakuu 15, 2013, 11:11:15 AP
<body onload=var hr=new Date().getHours();document.getElementById('wrapper').className = (hr >= 6 && hr < 19 ? 'morning': 'night')>';

Like that?
Otsikko: Re: Change background on top by time
Kirjoitti: Kindred - lokakuu 15, 2013, 11:46:34 AP
no...   you just took out the double quotes, which makes it even worse.

I said that you need to ESCAPE the quotes... like  \'   but I don't know if even that will work correctly.

http://stackoverflow.com/questions/5647242/how-to-escape-quotes-and-already-escaped-quotes-in-php-before-passing-to-javascr
Otsikko: Re: Change background on top by time
Kirjoitti: Arantor - lokakuu 15, 2013, 12:12:50 IP
As in:
<body onload="var hr=new Date().getHours();document.getElementById(\'wrapper\').className = (hr >= 6 && hr < 19 ? \'morning\': \'night\');">';

(and not escaping the last one because that's the end of the echo statement.
Otsikko: Re: Change background on top by time
Kirjoitti: gidus - lokakuu 15, 2013, 01:47:30 IP
It's works but after i loaded it the charcther of forum it's all in Bold Type  :'( like that Test maybe i have to adding something ?
Otsikko: Re: Change background on top by time
Kirjoitti: Arantor - lokakuu 15, 2013, 01:49:22 IP
Or it was done wrong, but can't tell that without seeing this live.