Over Easter I was set a task by the HTML sub-module of the Computer Science degree I am doing. Basically, it was to do a critique of an infographic and then present that in the form of two webpages. These webpages both have to have three different style sheets assigned to them (the same three being on both.) And we have been told the user should be able to swap between each of the three in realtime. We have been provided with a javascript program to allow this (since we haven't started learning java yet,) however we have not really been told how to implement the change in the XHTML Strict code.
The following is the javascript code (stylesheets.js) that was provided:
So far, I've got this in the head of the webpage:
As you can see, I've chosen to have a permanent style sheet implemented (being the first one of three.)
Would it be possible to make a command button for each stylesheet to run off? (For example, clicking the "Style Sheet 2" button would enable the second style sheet.)
The following is the javascript code (stylesheets.js) that was provided:
function setActiveStyle (styletitle) {
var stylelist = document.getElementsByTagName("link");
for (i = 0; i < stylelist.length; i++) {
if (isOptionalStylesheet(stylelist[i])) {
activateWhenMatching(stylelist[i], styletitle);
}
}
}
function isOptionalStylesheet(thislink) {
return (thislink.getAttribute("rel").indexOf("style") != -1) && thislink.getAttribute("title")
}
function activateWhenMatching(thislink, styletitle) {
if (thislink.getAttribute("title") == styletitle) {
thislink.disabled = false;
}
else {
thislink.disabled = true;
}
}
function chooseStyleBySize() {
var theWidth = document.documentElement.clientWidth;
if (theWidth < 800) {
theSheet = "smallsheet";
}
else if (theWidth < 900) {
theSheet = "mediumsheet";
}
else {
theSheet = "bigsheet";
}
setActiveStyle(theSheet);
}So far, I've got this in the head of the webpage:
<head><title>Critique of an Information Graphic</title><script type="text/javascript" src="stylesheets.js"> </script><link rel="stylesheet" type="text/css" href="stylesheet1.css" title="stylesheet1"/><link rel="alternate stylesheet" type="text/css" href="stylesheet2.css" title="stylesheet2"/><link rel="alternate stylesheet" type="text/css" href="stylesheet3.css" title="stylesheet3"/></head>
As you can see, I've chosen to have a permanent style sheet implemented (being the first one of three.)
Would it be possible to make a command button for each stylesheet to run off? (For example, clicking the "Style Sheet 2" button would enable the second style sheet.)