web scripts
Language: JavaScript
Purpose: Just for fun, for this work portfolio
I'm a big advocate for CSS (Cascading Style Sheets) and all other forms of unobtrusive design, in order to keep the basic HTML markup simple. So, to demonstrate how powerful CSS can be—to dramatically re-structure the layout and style of a web page—I created a few different style sheets for this web site. In order to share these styles sheets with you, I wrote some JavaScript that can dynamically modify the DOM (Document Object Model) to change the primary style sheet that is referenced in the header of the HTML document. If you have JavaScript enabled in our browser, you'll see a list of links at the very top of this page—clicking each one will transform the look of the page.
See the (well documented) swapStyle.js script for the nitty gritty on how I've done this.
Discussion:
As you can see, if you inspect this page's HTML, there is no indication of scripting, other than the link to the JavaScript page in the header. In fact, the links that allow users to swap the styles aren't even there. The first task of my script is to create these links and add them to the page by modifying the DOM. This is done by reading the HTML header and identifying each of the available stylesheet links. For each stylesheet link found, the title attribute of the link is extracted and used to create the style swapping link, which is placed in an HTML division that is located by id; thus, only those stylesheets that are included in the HTML header will be made available for swapping. The links are now in place and will execute some other JavaScript action when clicked. Of course, I don't need to worry about what to do if the user has JavaScript disabled at this point, because if it is disabled, then they won't be seeing the links.
Now, when one of these links is clicked, the JavaScript receives the event and reads the text value of the link that was clicked. This value exactly matches the name of the CSS file, minus the .css extension, so all that must be done now is read the header's stylesheet links again and locate the primary stylesheet link (the only one not identified as an "alternate") and then change it's reference value to the name extracted from the click event. Voila! The DOM has been instantly changed and we now see the new stylesheet in action.
But there's more. If the user changes pages within the site, then the next page will go back to the default style sheet, but we want to keep it on the one just chosen. So we must create a browser cookie—a small morsel of memory in the web browser that we can write to and read from. So I need to write the name of the stylesheet we're using, and then read that name when the user gets to the next page. This is exactly what the script does. So, each time a page is loaded, the script reads the browser's cookie and searches for my cookie name. If it's found, the script reads the value given to my cookie name an then modifies the DOM so that the page uses the stylesheet named in the cookie.
One bonus feature remains: identifying the current stylesheet being used and highlight it, just like the web site navigation does for the currently viewed page. This is done by reading the reference value of the currently used stylesheet in the HTML header, and then locating that name in the list of stylesheets. The script then adds a special stylesheet class name to the list item. The style of this class is then defined by each stylesheet, so that the look of the highlighting can be different for each design.
Notice that the script never needs to be modified in the event that style sheets are added, removed or changed. The only dependency is that all stylesheets are linked in the header, only one is given the "rel" value of "stylesheet," while the others are "alternate stylesheet," and each has a "title" value that exactly matches the name of the stylesheet minus the file extension.
Foobar II.
Hello world!
Back to top