Printed from TeacherJohn.com • http://teacherjohn.com/cabrillo/dm160c/exercises/ex06.php

Exercise 6: Style Switcher Using JavaScript and Cookies


Resources for this exercise:


Special thanks to David McCracken for writing the script 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.

You will actually create two pages for this exercise, because we need to make sure the cookies that keep the selected styles are working properly. We will start with one page:

1) Create a new Web page for exercise 6.

2) This page must contain the HTML5 DocType, and the character encoding meta tag for UTF-8.

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) Because this page is using the HTML 5 DocType, make sure you change the validator button image (if you are using an image insted of a text link) so that it says HTML, not XHTML.

5) This page must display your name and say "Exercise 6."

6) This page's <title> must indicate that this is your exercise 6 page, so it should say something like "John Sky's DM62 Exercise 6".

7) 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) In addition to the default style sheet, 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 6 page. (Later, you will also need to place a link on this exercise 6 page to another page that you will create later in this exercise.)

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:

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 6 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 5 DocType) with no errors, according to the W3C's online HTML Validator. 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.

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. The navigation menu on your home page, that links to your exercises, must be coded as an HTML list.

26) Once you have made sure the style switcher is working, you will need to create another page for this exercise. Your two exercise 6 pages need to link to each other, so that we can see the cookies in action. You may start by simply making a copy of your first exercise 6 page (let's call your first exercise 6 page your main exercise 6 page) and then changing its title and headline to indicate is is different from the first page (call its title and headline something like "Exercise 6b", for example).

27) Add a link to your exercise 6b page that links to your main exercise 6 page.

28) Save your exercise 6b page. Name this file sonething like "exercise6b.html" to distinguish it from your main exercise 6 page.

29) Make sure your exercise 6b page contains the validator links, and that both the HTMl and CSS validates.

30) Add a link to your main exercise 6 page that links to your exercise 6b page.

31) Upload your exercise 6b page, and your updated main exercise 6 page (that now has a link to your exercise 6b page) into your public_html folder on the server.

32) Test both pages. The chosen style sheet should be the one that is used as you visit both pages, until you switch the styles. This tells us that the cookies are working properly and keeping the selected style sheet.

33) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 3/6/17. 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 03/08/17.