|
Stylesheet Switcher Tutorial
Changes the Stylesheet Based on the User's Browser Time
You'll need to know:
- basic HTML coding, and linking
- basic stylesheet knowledge
Instructions
Detailed instructions are coming soon, but this should get
you by.
- Read the Tech Tips at the end of this page.
- Add the Javascript in orange
to the <head> section of your web page. This is the
bit of script that instructs the browser to display a specific
stylesheet, based on the time of day.
- Remember to remove the current stylesheet link, if one
exists.
- Create a folder in the top, or root level of your site
and name it stylesheet.
- In the stylesheet folder, create
3 stylesheets and name them day.css,
night.css and twilight.css.
- Add <noscript> code below to the <head> section
of your web page. This will display a chosen stylesheet
for the users that have Javascript disabled. If you like,
you can also add HTML text asking the users to enable Javascript
in their browser.
<noscript>
<link rel="stylesheet" href="../stylesheet/no-javascript.css"
type="text/css">
</noscript>
For Root Level HTML Pages
(For HTML pages that are not in a folder - notice the stylesheet
links in bold) add the Javascript below in the <head>
section of your web page. To prevent errors you may want to
copy the code, place it in Notepad, then add it to the HTML
page.
<script language="JavaScript">
var d=new Date();
var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;
if (d.getHours() < twi_am_start
|| d.getHours() > twi_pm_end)
document.write('<link rel="stylesheet" href="stylesheet/night.css"
type="text/css">');
else if (d.getHours() > twi_am_end && d.getHours()
< twi_pm_start )
document.write('<link rel="stylesheet" href="stylesheet/day.css"
type="text/css">');
else
document.write('<link rel="stylesheet" href="stylesheet/twilight.css"
type="text/css">');
</script>
For HTML Pages that are in a Sub-Folder
(For HTML pages that are in a folder, not in the main, root
level - notice the stylesheet links in bold) add the Javascript
below in the <head> section of your web page. To prevent
errors, you may want to copy the code, place it in Notepad,
then add it to the HTML page.
<script language="JavaScript">
var d=new Date();
var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;
if (d.getHours() < twi_am_start
|| d.getHours() > twi_pm_end)
document.write('<link rel="stylesheet" href="../stylesheet/night.css"
type="text/css">');
else if (d.getHours() > twi_am_end && d.getHours()
< twi_pm_start )
document.write('<link rel="stylesheet" href="../stylesheet/day.css"
type="text/css">');
else
document.write('<link rel="stylesheet" href="../stylesheet/twilight.css"
type="text/css">');
</script>
Tech Tips
- Try this out on a test site first.
- Create 1 stylesheet that works well, copy it, then create
the other 2 stylesheets based on the original.
- If you're using a visual editor to create your HTML pages,
you probably won't be able to see any of the sytlesheets
applied to your HTML page within that program.
- To see if the stylesheets are working properly, you'll
have to view them in your browser.
- To see if the stylesheets are changing, you'll have to
change the time on your computer, then hit the Refresh button
on your browser. The Javascript displays the stylesheet
based on the Browser's time, and that's derived from the
time on your computer.
- If you can't get the stylesheets to display, you may have
an existing stylesheet link, or the link in the Javascript
is incorrect. The links in the Javascript are in Bold above,
and you can edit these accordingly. The links are similar
to an image link.
- Root Example:
- href="stylesheet/twilight.css"
- Sub-folder Example:
- href="../stylesheet/twilight.css"
- To change the time the stylesheets display, you can edit
the Javascript. Just be sure not to add any spaces
or delete any code, like the semi-colons
after the time. The time is based on 24-hour time.
var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;
- 4am - 5:59am = twilight.css
- 6am - 4:49pm = day.css
- 5pm - 6:59pm = twilight.css
- 7pm - 3:39am = night.css
disclaimer |
|
