Help - Search - Members - Calendar
Full Version: daycheck
HTMLHelp Forums > Programming > Client-side Scripting
cedric
Hi, it's me again.
Now i'm wondering if it is possible to change the css file depending on the day of the week??

Thanks for all the help.
Darin McGrew
Sure.

You could generate the HTML with a server-side system that uses sunday.css or monday.css or ... depending on the day of the week.

Or you could have your HTML use redirect.css and configure your server to redirect that to sunday.css or monday.css or ... depending on the day of the week.

Or you could generate the CSS with a server-side system that sends different CSS depending on the day of the week.
pandy
Or you could use JS to change style sheet (but I think that's bit of a bother) or just toadd some rules. How much is it you want to change? Is it a whole different design each day, definitely go with server side.
Brian Chandler
It's very simple if you use document.write() to put the relevant style sheet name, and <noscript> to 'thursday'. This assumes it's really not crucial; another advantage of javascript in this particular case is that it will use the client's clock, not the server's. So if it's meant to match the local day-of-the-week it will.

pandy
Right... that way you never need to access the cssRules array. That's nice an easy.
cedric
Thanks Brian I think I will go with your option.
How is it that I can change the link then to the external file?
Or how do I chang the file itself.
All depending on the day of the week.
Could you please give me some code.

The idea is to change the colors on the page by day.
pandy
You'd have to use the getDay() method.
http://www.javascriptkit.com/javatutors/time1.shtml

Then it's just about creating a bunch of if statements for each day of the week. IIRC getDay() returns 1 for Monday and so on.

If today is 1, write LINK for monday.css
Else if today is 2, write LINK for tuesday.css
Else if today is 3, write LINK for wednesday.css
and so on.

One problem is that I don't think you can use NOSCRIPT because it can't occur in HEAD.
Christian J
QUOTE(pandy @ Jun 17 2009, 11:37 AM) *

Then it's just about creating a bunch of if statements for each day of the week. IIRC getDay() returns 1 for Monday and so on.

Or just name the CSS files 1.css, 2.css etc?

QUOTE
One problem is that I don't think you can use NOSCRIPT because it can't occur in HEAD.

You can always let the JS-generated CSS override the rules in a previous fallback CSS file. But the few humans that disable JS in their browsers will probably manage without CSS anyway (assuming the HTML structure is adequate).
pandy
Not necessarily. Don't some companies still kill JS at the firewall? But how important the need of a noscript fallback is really depends on how much you plan to change, if it's a whole new style sheet or just changes of colors and such. If the latter overriding existing declarations would be doable and sensible since it wouldn't add any extra fat.

Yeah, you can name them 1, 2, 3 or a, b, c, but that wouldn't be as explanatory. tongue.gif
cedric
ok thanks i'll try to make something of it.
Brian Chandler
QUOTE(pandy @ Jun 17 2009, 06:37 PM) *

You'd have to use the getDay() method.
http://www.javascriptkit.com/javatutors/time1.shtml

Then it's just about creating a bunch of if statements for each day of the week. IIRC getDay() returns 1 for Monday and so on.

If today is 1, write LINK for monday.css
Else if today is 2, write LINK for tuesday.css
Else if today is 3, write LINK for wednesday.css
and so on.



Strings of if/elses are very clumsy -- just use an array indexed by the number to the file name. Or use filenames day1.css to day7.css. Or find a formatted date thing in javascript that gives you the English name.

QUOTE

One problem is that I don't think you can use NOSCRIPT because it can't occur in HEAD.


Really? Do you have a reference for that? It would seem to be an extraordinarily arbitrary restriction, given that <script> can appear anywhere [at least after the doctype, I suppose]...
Christian J
QUOTE(pandy @ Jun 17 2009, 02:12 PM) *

Don't some companies still kill JS at the firewall?

Instead of disabling JS in the browser? But then the NOSCRIPT content won't be shown either, or? wacko.gif
Christian J
QUOTE(Brian Chandler @ Jun 17 2009, 06:33 PM) *

QUOTE(pandy @ Jun 17 2009, 06:37 PM) *

One problem is that I don't think you can use NOSCRIPT because it can't occur in HEAD.


Really? Do you have a reference for that? It would seem to be an extraordinarily arbitrary restriction, given that <script> can appear anywhere [at least after the doctype, I suppose]...

http://www.htmlhelp.com/reference/html40/block/noscript.html doesn't mention HEAD, just BODY. I've never understood the W3C spec when it comes to allowed parent- and child elements http://www.w3.org/TR/html401/interact/scri...l#edef-NOSCRIPT

Not sure if the W3C validator allows it, at least it doesn't appear to accept any content for it (tried LINK STYLE and META elements).
Christian J
This way you'd get a default style sheet when JS is not used:

CODE
<link rel="stylesheet" type="text/css" href="default.css" media="screen" id="x">
<script type="text/javascript">
document.getElementById('x').href='weekday'+new Date().getDay()+'.css';
</script>


The above seems to work when I tested it online, but in theory I guess the browser could send a request for "default.css" to the server before running the script, which could cause a flicker.
pandy
QUOTE(Brian Chandler @ Jun 17 2009, 06:33 PM) *

Strings of if/elses are very clumsy -- just use an array indexed by the number to the file name.

Yes, but they are easy to understand and where a beginner would want to start, don't you think? It isn't that clumsy with so few options as here.

QUOTE

QUOTE

One problem is that I don't think you can use NOSCRIPT because it can't occur in HEAD.


Really? Do you have a reference for that? It would seem to be an extraordinarily arbitrary restriction, given that <script> can appear anywhere [at least after the doctype, I suppose]...


Try the reference on this site.
http://htmlhelp.com/reference/html40/block/noscript.html
pandy
QUOTE(Christian J @ Jun 17 2009, 07:15 PM) *

Instead of disabling JS in the browser? But then the NOSCRIPT content won't be shown either, or? wacko.gif

I used it as a way of expression, doesn't matter how they do it. Point is, the user may not have a say about it. I imagine browsing from public places may be limited as well.

QUOTE
I've never understood the W3C spec when it comes to allowed parent- and child elements http://www.w3.org/TR/html401/interact/scri...l#edef-NOSCRIPT


No wonder, because I don't think it says anything about that. tongue.gif
You have to reverse-engineer it.

CODE
<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

HEAD can contain %head.content; and %head.misc;
Neither TITLE, BASE, SCRIPT, STYLE, META nor LINK can contain NOSCRIPT. OBJECT can, but I doubt it's possible to make that work. Maybe there's some fineprint that disallows '%flow;' when OBJECT is inside HEAD. Feels like there should be. angry.gif

Cedrik, sorry for the OT. This all isn't all that relevant to your question. We're just trying to figure it out ourselves. blush.gif
cedric
No problem, i'm trying to follow you guys and still figuring out what is best now to use blink.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.