Articles | Dynamic Style Sheets |  back 

custom.htm

 
<HEAD>
<TITLE>Customise page</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="library.js"></SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript1.2"><!--
if (document.styleSheets || document.layers) {
    document.write('<P>Please browse available styles using
    the box below, and confirm your choice by pressing the
    OK button.');
    document.write('<FORM>');
    document.write('<SELECT NAME="style" onChange=
    "changeSheet(this.selectedIndex)">');
    document.write('<OPTION>Style 1<\/OPTION>');
    document.write('<OPTION>Style 2<\/OPTION>');
    document.write('<OPTION>Style 3<\/OPTION>');
    document.write('<\/SELECT>');
    document.write('<INPUT TYPE="BUTTON" VALUE="OK" onClick=
    "Set_Cookie(\'stylesheet\',mySheet,expires)">');
    document.write('<\/FORM>');

    if (document.styleSheets) {
    document.write('<H1>Headings will appear like this.<\/H1>');
    document.write('<P><A HREF="javascript:alert(\'just testing\')
    ">Links will appear like this.<\/A>');
    document.write('<P><CODE>Any quoted code will appear like this.
    <\/CODE><BR>');
    }
    else if (document.layers) {
        document.write('<LAYER SRC="style1.htm" NAME="style1"
        VISIBILITY="show"><\/LAYER>');
        document.write('<LAYER SRC="style2.htm" NAME="style2"
        VISIBILITY="hide"><\/LAYER>');
        document.write('<ILAYER SRC="style3.htm" NAME="style3"
        VISIBILITY="hide"><\/ILAYER>');
    }

    checkStyle();
}
//--></SCRIPT>

<P>Once you've stored a cookie try out the style sheet on the
 <A HREF="test.htm">next page</A>.

<P><A HREF="index.htm">return</A>

</BODY>
</HTML>

Return

test.htm

 
<HTML>
<HEAD>
<TITLE>Test page</TITLE>

<SCRIPT LANGUAGE="JavaScript1.2" SRC="library.js"></SCRIPT>

</HEAD>

<BODY>

<H1>This is the test page</H1>

<P>Return to the <A HREF="custom.htm">custom page</A>
 or return to the <A HREF="index.htm">article</A>

<P><CODE>"Too many cooks spoil the broth"</CODE><BR>

</BODY>
</HTML>

Return

style1.htm

 
<HTML>
<HEAD>
<LINK REL=STYLESHEET HREF="style1.css" TYPE="text/css">
</HEAD>

<BODY>

<H1>Headings will appear like this.</H1>

<P><A HREF="javascript:alert('just testing')">
Links will appear like this.</A>

<P><CODE>Any quoted code will appear like this.</CODE><BR>

</BODY>
</HTML>

Return

style1.css

 
A {text-decoration:none;color:blue;font-weight:normal}
H1 {font-family:Arial;font-weight:normal;font-size:16pt}
CODE {font-family:Verdana;font-style:normal;color:black}

Return

style2.htm

 
<HTML>
<HEAD>
<LINK REL=STYLESHEET HREF="style2.css" TYPE="text/css">
</HEAD>

<BODY>

<H1>Headings will appear like this.</H1>

<P><A HREF="javascript:alert('just testing')">
Links will appear like this.</A>

<P><CODE>Any quoted code will appear like this.</CODE><BR>

</BODY>
</HTML>

Return

style2.css

 
A {text-decoration:none;color:red;font-weight:bold}
H1 {font-family:Arial;font-weight:bold;font-size:36pt}
CODE {font-family:Verdana;font-style:italic;color:blue}

Return

style3.htm

 
<HTML>
<HEAD>
<LINK REL=STYLESHEET HREF="style3.css" TYPE="text/css">
</HEAD>

<BODY>

<H1>Headings will appear like this.</H1>

<P><A HREF="javascript:alert('just testing')">
Links will appear like this.</A>

<P><CODE>Any quoted code will appear like this.</CODE><BR>

</BODY>
</HTML>

Return

style3.css

 
A {text-decoration:none;color:
green;font-weight:bold;font-size:14pt}
H1 {font-family:Sans Serif;font-size:
48pt;text-decoration:underline}
CODE {font-family:Verdana;font-style:
italic;color:white;background:blue}

Return

library.js

 
function Get_Cookie(name) {
    var start = document.cookie.indexOf(name+"=");
    var len = start+name.length+1;
    if ((!start) && (name != document.cookie.substring
    (0,name.length))) return null;
    if (start == -1) return null;
    var end = document.cookie.indexOf(";",len);
    if (end == -1) end = document.cookie.length;
    return unescape(document.cookie.substring(len,end));
}

function Set_Cookie(name,value,expires,path,domain,secure) {
    document.cookie = name + "=" +escape(value) +
        ( (expires) ? ";expires=" + expires.toGMTString() : "") +
        ( (path) ? ";path=" + path : "") + 
        ( (domain) ? ";domain=" + domain : "") +
        ( (secure) ? ";secure" : "");
}

var expires = new Date();
expires.setTime(expires.getTime() + 
(365 * 24 * 60 * 60 * 1000 * 365));

mySheet = Get_Cookie('stylesheet');

if (mySheet != null)
    document.write('<LINK REL="stylesheet"
 HREF="' + mySheet + '.css">');
else
    document.write('<LINK REL="stylesheet" HREF="style1.css">');

function checkStyle() {
    if (mySheet != null) {
        if (document.styleSheets)
            document.styleSheets[0].href = mySheet + '.css';
        else if (document.layers) {
            document.layers['style1'].visibility = 'hide';
            document.layers['style2'].visibility = 'hide';
            document.layers['style3'].visibility = 'hide';
            document.layers[mySheet].visibility = 'show';
        }
    }
}

function changeSheet(choice) {
    if (choice == 0) mySheet = 'style1';
    if (choice == 1) mySheet = 'style2';
    if (choice == 2) mySheet = 'style3';

    if (document.styleSheets)
        document.styleSheets[0].href = mySheet + '.css';
    else if (document.layers) {
        document.layers['style1'].visibility = 'hide';
        document.layers['style2'].visibility = 'hide';
        document.layers['style3'].visibility = 'hide';
        document.layers[mySheet].visibility = 'show';
    }

Articles | Dynamic Style Sheets |  back

 

 

Menu

Home
Articles
FAQ's
Links
Tools
Blog Links
AJAXCoded Blog
CyberCoded.net
CyberCoder
CybersView

Applications

 

Questions, Comments
or Suggestions

Site Search
FAQ Search

AJAX Coded
CAAD @ CyberCoded.net


 


 
Provide Feedback on CyberCoded.com
Copyright © 1996-2004 CyberCoded.com, All Rights Reserved.
CyberCoded.com liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public privacy statements.
Website Hosted By: U.S. Networx