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 [b]three different style sheets[/b] assigned to them (the same three being on both.) And we have been told the user [b]should be able to swap between each of the three in realtime[/b]. 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 [b]XHTML Strict[/b] code.
The following is the javascript code (stylesheets.js) that was provided:
[code] 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);
}[/code]
So far, I've got this in the head of the webpage:
[html]<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> [/html]
As you can see, I've chosen to have a permanent style sheet implemented (being the first one of three.)
[b]Would it be possible to make a command button for each stylesheet to run off?[/b] (For example, clicking the "Style Sheet 2" button would enable the second style sheet.)
Any help?
I would do it by only having the single <link> and changing the href. I'd probably give the <link> an id and use that to select it.
[HTML]
<link id="stylesheet" rel="stylesheet" type="text/css" href="stylesheet1.css" />
[/HTML]
[CODE]
function setStyleSheet(url){
var stylesheet = document.getElementById("stylesheet");
stylesheet.setAttribute('href', url);
}
[/CODE]
Then you can do this:
[HTML]
<a onclick="setStyleSheet('stylesheet2.css')">Style 2</a>
[/HTML]
Hope that helps.
Ok, I have included this function at the beginning of the java code.
[QUOTE=CBastard;40195870][CODE]
function setStyleSheet(url){
var stylesheet = document.getElementById("stylesheet");
stylesheet.setAttribute('href', url);
}
[/CODE][/QUOTE]
And this in the head of the HTML (removing all of the "link rel" elements.)
[QUOTE=CBastard;40195870][HTML]
<link id="stylesheet" rel="stylesheet" type="text/css" href="stylesheet1.css" />
[/HTML][/QUOTE]
Then this in the body of the HTML, but the link won't work.
[QUOTE=CBastard;40195870][HTML]
<a onclick="setStyleSheet('stylesheet2.css')">Style 2</a>
[/HTML][/QUOTE]
I tried including more "link id"s, such as for each stylesheet, but it still won't work.
I apologise for my poor ability to decipher java - I honestly don't understand why I've been given this task without knowing it.
Could it possibly be because it is in XHTML Strict?
[QUOTE=Uni Git;40206950]Ok, I have included this function at the beginning of the java code.
And this in the head of the HTML (removing all of the "link rel" elements.)
Then this in the body of the HTML, but the link won't work.
I tried including more "link id"s, such as for each stylesheet, but it still won't work.
I apologise for my poor ability to decipher java - I honestly don't understand why I've been given this task without knowing it.
Could it possibly be because it is in XHTML Strict?[/QUOTE]
This is very basic example of the CBastard's suggestion.
I validated this with W3C validator so it should be XHTML 1.0 strict.
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<title>Critique of an Information Graphic</title>
<script type="text/javascript">
function setStyleSheet(url){
var stylesheet = document.getElementById("stylesheet");
stylesheet.setAttribute('href', url);
}
</script>
<link id="stylesheet" rel="stylesheet" type="text/css" href="stylesheet1.css"/>
</head>
<body>
<div>
<a onclick="setStyleSheet('stylesheet1.css')" href="#">Style 1</a>
<a onclick="setStyleSheet('stylesheet2.css')" href="#">Style 2</a>
<a onclick="setStyleSheet('stylesheet3.css')" href="#">Style 3</a>
</div>
</body>
</html>
[/CODE]
Also something to quickly note, this is JavaScript and not Java, they are very different so you'll have better luck searching for things if you use 'JavaScript' as a search term.
Thank you very much. I had no idea it only took one function do that! Why would they provide us with some bloat program to use?
And cheers for clearing that up, I had no idea they were two different languages.
Sorry, you need to Log In to post a reply to this thread.
