...

View Full Version : DIfferent Styles Sheets



madeinmgs
02-20-2009, 04:07 PM
Wanting to have a button that changes the external style sheet. Very simple but it doesn't work for some reason. What's up?



<html>
<head>

<link rel="stylesheet" type="text/css" href="default.css" title="Default">
<link rel="alternate stylesheet" type="text/css" href=".file/red.css" title="Red">

<title>Javascript Calculator</title>

<script src="PATH TO SCRIPT/swapstyle.js" type="text/javascript" language="javascript1.2"></script>

</head>

<body onload="useStyleAgain('styleTestStore');" onunload="rememberStyle('styleTestStore');">

<center>
<form method="get" action="" onsubmit="return false;">
<p>
<input type="button" value="Default" onclick="changeStyle('Default')">
<input type="button" value="Red" onclick="changeStyle('Red')">
</p>
</form>
<form name="calculator">
<table border=15 bordercolor="#000000" cellspacing="10">
<tr><td colspan="5" bgcolor="#333333">
<input type="text" name="input" Size="37">
<tr><td style="border: 0px" valign="right" colspan="5">

</td></tr>
<tr>
<td></td>
<td><input type="button" name="one" VALUE=" 7 " onClick="calculator.input.value += '7'"></td>
<td><input type="button" name="two" VALUE=" 8 " onClick="calculator.input.value += '8'"></td>
<td><input type="button" name="three" VALUE=" 9 " onClick="calculator.input.value += '9'"></td>
<td><input type="button" name="times" VALUE=" '/. " onClick="calculator.input.value += '/'"></td>
</tr>
<tr>
<td><input type="button" name="plus" VALUE=" Off " onClick="javascript:window.close();"></td>
<td><input type="button" name="four" VALUE=" 4 " onClick="calculator.input.value += '4'"></td>
<td><input type="button" name="five" VALUE=" 5 " onClick="calculator.input.value += '5'"></td>
<td><input type="button" name="six" VALUE=" 6 " onClick="calculator.input.value += '6'"></td>
<td><input type="button" name="times" VALUE=" x " onClick="calculator.input.value += '*'"></td>
</tr>
<tr>
<td><input type="button" name="clear" VALUE=" C " onClick="calculator.input.value = ''"></td>
<td><input type="button" name="eight" VALUE=" 1 " onClick="calculator.input.value += '1'"></td>
<td><input type="button" name="nine" VALUE=" 2 " onClick="calculator.input.value += '2'"></td>
<td><input type="button" name="nine" VALUE=" 3 " onClick="calculator.input.value += '3'"></td>
<td><input type="button" name="minus" VALUE=" - " onClick="calculator.input.value += '-'"></td>
</tr>
<tr>
<td><input type="button" name="on" VALUE=" AC " onClick="calculator.input.value = ''"></td>
<td><input type="button" name="zero" VALUE=" 0 " onClick="calculator.input.value += '0'"></td>
<td><input type="button" name="point" VALUE=" . " onClick="calculator.input.value += ' . '"></td>
<td><input type="button" name="total" VALUE=" = " onClick="calculator.input.value = eval(calculator.input.value)"></td>
<td><input type="button" name="plus" VALUE=" + " onClick="calculator.input.value += '+'"></td>
</tr>
</table>
</form>
</center>
</body>


Default css file


body {background: #666666;}
table {background: #333333;}


red.css

body {background-color : #666666;}
table { background-color: #aa0000;}


Told you it was simple...

jerry62704
02-20-2009, 04:22 PM
You would do best to ask javascript questions in the javascript area.

BTW, you need a DOCTYPE for that page.

VIPStephan
02-20-2009, 04:35 PM
Yeah, first fix your numerous HTML errors. Then look at Firefox’s built in JavaScript console, it tells you if there are errors in the script. Lastly, you should always use unobtrusive JavaScript. That means: no inline JS calls. And no hard coded HTML whose only purpose is to do a JS action. Ideally your page has to work without any script or styles and then you add those as enhancement (http://en.wikipedia.org/wiki/Progressive_Enhancement).

Effectively that means you would also generate the style switch buttons with JS since they would be useless if JS was disabled.
An effective stylesheet switching script can be found on http://alistapart.com/articles/alternate/

madeinmgs
02-20-2009, 06:51 PM
The JS external stylesheet is right here. Sorry for posting this on css just was asking about the css part of the file.



function getSSTitle(ss) { if( ss.title ) { return ss.title; } else if( ss.owningElement ) { return ss.owningElement.title; } return ''; }
function getAllSheets() {
if( document.styleSheets && ( window.ScriptEngine || navigator.taintEnabled ) ) { return document.styleSheets; }
if( !document.getElementsByTagName ) { return []; }
for( var x = 0, Lt = document.getElementsByTagName('link'), os = []; Lt[x]; x++ ) {
var rel = Lt[x].rel ? Lt[x].rel : Lt[x].getAttribute ? Lt[x].getAttribute('rel') : '';
if( typeof( rel ) == 'string' && rel.toLowerCase().indexOf('style') + 1 ) { os[os.length] = Lt[x]; }
} for( var x = 0, St = document.getElementsByTagName('style'); St[x]; x++ ) { os[os.length] = St[x]; } return os;
}
function changeStyle() {
window.userHasChosen = true;
for( var x = 0, ss = getAllSheets(); x < ss.length; x++ ) {
if( getSSTitle( ss[x] ) ) { ss[x].disabled = true; }
for( var y = 0; y < arguments.length; y++ ) {
if( getSSTitle( ss[x] ) == arguments[y] ) { ss[x].disabled = false; }
}
}
}
function rememberStyle( cookieName, cookieLife ) {
if( !window.userHasChosen && !window.ScriptEngine && !navigator.taintEnabled ) { return; }
for( var x = 0, ss = getAllSheets(), outLine = ''; x < ss.length; x++ ) {
if( getSSTitle( ss[x] ) && ss[x].disabled == false ) { outLine += ( outLine ? ' MWJ ' : '' ) + escape( getSSTitle( ss[x] ) ); } }
if( ss.length ) { document.cookie = escape( cookieName ) + '=' + escape( outLine ) + ( cookieLife ? ';expires=' + new Date( ( new Date() ).getTime() + ( cookieLife * 86400000 ) ).toGMTString() : '' ) + ';path=/'; }
}
function useStyleAgain( cookieName ) {
for( var x = 0; x < document.cookie.split( "; " ).length; x++ ) {
var oneCookie = document.cookie.split( "; " )[x].split( "=" );
if( oneCookie[0] == escape( cookieName ) ) {
var styleStrings = unescape( oneCookie[1] ).split( " MWJ " );
for( var y = 0, funcStr = ''; styleStrings[y]; y++ ) { funcStr += ( y ? ',' : '' ) + 'unescape( styleStrings[' + y + '] )'; }
eval( 'changeStyle(' + funcStr + ');' ); break;
}
}
}

ipmark
02-21-2009, 08:06 AM
Have you ever tried JQuery? Makes a lot of javascript extremely simple.

Check out www.jquery.com

And for your solution
http://frinity.blogspot.com/2008/06/switch-css-stylesheets-using-jquery.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum