Results 1 to 2 of 2
  1. #1
    Uni Git is offline Member
    Join Date
    Apr 2013
    Posts
    1
    Rep Power
    0

    Question JavaScript to Swap CSS on XHTML Strict Webpage

    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:

    Java 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);
    		}
    So far, I've got this in the head of the webpage:

    XML Code:
    <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.)

  2. #2
    wsaryada is offline Senior Member
    Join Date
    Jun 2007
    Location
    Bali, Indonesia
    Posts
    758
    Rep Power
    8

    Default Re: JavaScript to Swap CSS on XHTML Strict Webpage

    Because this is a Java forum, I don't know if I am allowed to answer a Javascript question by the moderators :)

Similar Threads

  1. Making Applet tags XHTML 1.0 Strict Compatible
    By gehrc in forum New To Java
    Replies: 0
    Last Post: 12-15-2010, 12:26 AM
  2. Replies: 5
    Last Post: 07-21-2010, 11:45 PM
  3. Java Developer AJAX/XHTML/Javascript Milton Keynes
    By ICResourcing in forum Jobs Offered
    Replies: 0
    Last Post: 11-09-2009, 12:04 PM
  4. Replies: 0
    Last Post: 11-27-2008, 08:25 AM
  5. XHTML Doclet 0.2
    By JavaBean in forum Java Software
    Replies: 0
    Last Post: 07-08-2007, 05:46 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •