Change The Sytlesheet Via Remote Javascript

mole2k9 · May 1, 2006

This isn't my code take no credit for it but is pretty cool, allows you to change the css style via a radio button for your html page using javascript to access a css file , also stores your setting in a cookie hece you have te same style setting when you open up the page next.

I put together the html part ad the css style of this but not the javascript. would assume the js and css files are in the same directory as the html file.

save as test.html in your webserver root.

<html><head><title>etc</title><script type="text/javascript" src="/changeStyle.js"></script></head><body><input type="checkbox" name="grootte" value="1" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Original</body></html>

save as style1.css in your ws root.

.mygen { Created using MyGen 2.5 - http://www.mygen.co.uk/ }.mygen { Background Properties }table, tr, td { background-color:transparent; border:none; border-width:0;}body {	background-image:url('water.jpg');	background-attachment:scroll;	background-repeat:repeat;	scrollbar-face-color:222222;	scrollbar-highlight-color:222222;	scrollbar-3dlight-color:222222;	scrollbar-shadow-color:222222;	scrollbar-darkshadow-color:222222;	scrollbar-arrow-color:222222;	scrollbar-track-color:222222;	 }.mygen { Table Properties }table table { border: 0px }table table table table{border:0px}table table table {	border-style:double;	border-width:2px;	border-color:000000;	background-color:transparent;	   		}td a, td a:link {font-family:tahoma; color: #ffffff; }td a:visited, td a:hover { font-family:tahoma ;color:ffffff; }table table table td {	background-color:555555;	filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80; }table table table table td {filter:none;}.mygen { Text Properties }table, tr, td, li, p, div { font-family:tahoma; color:ffffff; font-size:14px;	 } a:active, a:visited, a:link {font-family:tahoma ; color:ffffff; font-size:14px;	 } a:hover { font-family:tahoma ; color:ffffff; font-size:14px;	 } th {	padding-bottom : 40px;}

there is way too much css in here but....most of it wont be used, also put any jpg and call it water in the web server root, or change water part in the line, to whatever backround pic you want

background-image:url('water.jpg');

now the js

save as

changeStyle.js in your ws root,

<!--/* This script and many more are available free online atThe JavaScript Source!! http://javascript.internet.comCreated by: Pascal Vyncke :: http://www.seniorennet.be/ */// These are the variables; you can change these if you wantvar expDays = 9999;  // How many days to remember the settingvar standardStyle = '2'; // This is the number of your standard style sheet; this will be used when the user did not do anything.var nameOfCookie = 'switchstyle'; // This is the name of the cookie that is used.var urlToCSSDirectory = ''; // This is the URL to your directory where your .css files are placed on your site.  For example: http://forums.xisto.com/no_longer_exists/ These are the names of your different .css files; use the name exactly as on your Web sitevar ScreenCSS_1 = 'style1.css';var ScreenCSS_2 = 'style2.css';var ScreenCSS_4 = 'style4.css';// If you use different .css files for printing a document, you can set these.  If you don't even know what this is, name then everything exactly the same as above.// So: make then PrintCSS_1 the same as ScreenCSS_1, for example "screen_1.css".var PrintCSS_1 = 'print_1.css';var PrintCSS_2 = 'print_2.css';/***********************************************************************************************	DO NOT CHANGE ANYTHING UNDER THIS LINE, UNLESS YOU KNOW WHAT YOU ARE DOING***********************************************************************************************/// This is the main function that does all the workfunction switchStyleOfUser(){	var fontSize = GetCookie(nameOfCookie);	if (fontSize == null) {		fontSize = standardStyle;	}	if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ' ' + ScreenCSS_1 + '" media="screen">'); }	if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen">'); }	if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }	if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }	var fontSize = "";	return fontSize;}var exp = new Date();exp.setTime(exp.getTime() + (expDays*24*60*60*1000));// Function to get the settings of the userfunction getCookieVal (offset) {	var endstr = document.cookie.indexOf (";", offset);	if (endstr == -1)	endstr = document.cookie.length;	return unescape(document.cookie.substring(offset, endstr));}// Function to get the settings of the userfunction GetCookie (name) {	var arg = name + "=";	var alen = arg.length;	var clen = document.cookie.length;	var i = 0;	while (i < clen) {		var j = i + alen;		if (document.cookie.substring(i, j) == arg)		return getCookieVal (j);		i = document.cookie.indexOf(" ", i) + 1;		if (i == 0) break;	}	return null;}// Function to remember the settingsfunction SetCookie (name, value) {	var argv = SetCookie.arguments;	var argc = SetCookie.arguments.length;	var expires = (argc > 2) ? argv[2] : null;	var path = (argc > 3) ? argv[3] : null;	var domain = (argc > 4) ? argv[4] : null;	var secure = (argc > 5) ? argv[5] : false;	document.cookie = name + "=" + escape (value) +	((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +	((path == null) ? "" : ("; path=" + path)) +	((domain == null) ? "" : ("; domain=" + domain)) +	((secure == true) ? "; secure" : "");}// Function to remove the settingsfunction DeleteCookie (name) {	var exp = new Date();	exp.setTime (exp.getTime() - 1);	var cval = GetCookie (name);	document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();}// This function is used when the user gives his selectionfunction doRefresh(){	location.reload();}// This will call the main function.  Do not remove this, because otherwise this script will do nothing...document.write(switchStyleOfUser());-->

You should be able to work out how to add more radio button sytles etc, you need to add 2 things to the js file, add 1 thing to the html file and create a new css file.Just make sure you have them numbered right.

Sign In

Change The Sytlesheet Via Remote Javascript

Recommended Posts

mole2k9 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information