Exercise 5
Style Switcher Using JavaScript and Cookies
Resources for this exercise:
- See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
- See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
- See this Style Switcher Demo that changes colors.
- See this Style Switcher Demo that changes text sizes.
Special thanks to David McCracken for writing the script (when he took this course in 2005) and making it available!
In this exercise you will download, configure, install, and use a CSS style switcher that utilizes JavaScript and cookies. This JavaScript will allow a user to select a style sheet (with which to view your page) from a list of style sheets that you make available, and will set a cookie to hold the selected style as the user goes from page to page on your site. For example, check out this Style Switcher Demo that changes colors, and this Style Switcher Demo that changes text sizes.
1) Create a new Web page for exercise 5.
2) This page must contain the XHTML 1.0 Strict DocType, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)
4) This page must display your name and say "Exercise 5."
5) This page's <title> must indicate that this is your
exercise 5 page, so it should say something like "John Sky's DM160C Exercise
5".
6) This page must contain a relative link to your home page.
8) As you normally would, create an external style sheet. This style sheet is used when the user first goes to your page, so we will refer to it as your default style sheet.
9) Create two or more alternate external style sheets. These style sheets only need to contain the styles you wish to change when the user selects them.
For example, let's assume you wish to allow the user to change the font size. Your default style sheet would contain all the styles applied to your page, such as colors, backgrounds, font sizes, margins, etc. Then you would create alternate style sheets that only need to contain font size styles. When the user selects one of these alternate style sheets, its font-size rules take priority over the font size rules in the default style sheet, but the rest of the styles in the default style sheet are still applied.
10) In head section of your Web page, place a link tag for your default style sheet. If your style sheet is called "default.css" the code would look something like this:
<link rel="stylesheet" href="css/default.css" type="text/css" />
Of course, you might need to change the path (shown above in bold) to your style sheet.
11) Also in the head section, add the following two lines that load the JavaScripts to be used:
<script type="text/javascript" src="js/uberCookie.js"></script>
<script type="text/javascript" src="js/styleCookie.js"></script>
Note that, for technical reasons relating to how this JavaScript works, it is important that you place these lines of code at the very end of the head section, immediately before the </head> tag.
Of course, you might need to change the paths (shown above in bold) to the JavaScripts. You will be creating a new folder called "js" in your public_html folder; the two JavaScripts, "uberCookie.js" and "styleCookie.js", will be uploaded into this folder.
If you would rather use a full URL instead of a relative path, instead of the above code you could use something that looks like the following code:
<script type="text/javascript" src="http://webhawks.org/~dm160cstudent/js/uberCookie.js"></script>
<script type="text/javascript" src="http://webhawks.org/~dm160cstudent/js/styleCookie.js"></script>
Of course, if you choose to use the above code with the URLs instead of the code with the relative paths, you will need to replace "~dm160cstudent" with your own account name on webhawks.
12) Now you need to add the links that the user will use to select a style sheet.
For example, let's assume you created four style sheets: a default style sheet, and three alternate style sheets: a style sheet that changes some colors to be red, a style sheet that changes some colors to be blue, and a style sheet that changes some colors to be yellow. This is the situation used in the Style Switcher Demo that changes colors. And here is the HTML code used by that demo:
<p>
<a href="javascript:setStyle( 'css/red' )">RED</a> |
<a href="javascript:setStyle( 'css/blue' )">BLUE</a> |
<a href="javascript:setStyle( 'css/yellow' )">YELLOW</a> |
<a href="javascript:setStyle( 0 )">NORMAL</a>
</p>
The above code indicates that the css folder contains three alternate style sheets: one with a filename of "red.css", one with a filename of "blue.css", and one with a filename of "yellow.css". Important — note that in the above code the paths (shown in bold) to these style sheets are not to include the ".css" extension to the filenames.
The last link, to NORMAL, is the link that returns the styles to those used by the default style sheet.
Of course, you will need to change the paths (shown in bold) to point to your own style sheets.
Here is another example of HTML code to link to the style sheets. This is the code used by the Style Switcher Demo that changes text sizes:
<ul>
<li><a href="javascript:setStyle( 'css/style-big' )">Make
text big.</a></li>
<li><a href="javascript:setStyle( 'css/style-bigger' )">Make
text bigger.</a></li>
<li><a href="javascript:setStyle( 'css/style-biggest' )">Make
text biggest.</a></li>
<li><a href="javascript:setStyle( null )">Use original
style (default).</a></li>
< /ul>
The above code indicates that the css folder contains three alternate style sheets: one with a filename of "style-big.css", one with a filename of "style-bigger.css", and one with a filename of "style-biggest.css". Again, note that in the above code the paths (shown in bold) to these style sheets do not include the ".css" extension to the filenames.
13) After you have added the links to the style sheets, add other elements to the page so that it will be easy to see the changes when using the style switcher.
14) Save your exercise 5 page.
15) Now it's time to download the JavaScript files. You will not have to edit or modify these files in any way; you will only need to download these files and then upload these files to your space on the Web server.
You can download the scripts as a zipped (.zip) archive.(Or, you can view the two files, save each one as a text file (make sure each file has a ".js" filename extension), and place them in a folder called "js").
16) If all goes correctly, the zipped file ("js.zip") will automatically expand into a folder called "js" after the file downloads. If it doesn't, you may need to manually open the zipped file with your decompression software. If you still have trouble decompressing the zipped file, then view and save the files as text files, as indicated above.
In the "js" folder, you should see two files:
- uberCookie.js
- styleCookie.js
17) Create a folder named "js" directly inside your "public_html" folder on the server.
18) Upload the two JavaScripts into this "js" folder.
Note that you will not have to make these files executable; no changes in permissions are necessary. That's because these scripts are actually run by the browser, not the server. They are simply stored on the server and given to the browser when the page is served to the browser, in the same way that external style sheets are given to and used by the browser.
19) Upload your exercise 5 page into your public_html folder on the server.
20) Upload your style sheets into your css folder that is within your public_html folder on the server.
21) Test the switcher!
22) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
23) Make sure the CSS used with this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.
24) If there are any errors, fix them, re-upload the page, and validate it again.
25) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates.
26) Submit the feedback form. To receive credit for this exercise you must submit thi feedback form before it expires. This exercise is due on 3/31/08. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 04/02/08.