Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    DIfferent Styles Sheets

    Wanting to have a button that changes the external style sheet. Very simple but it doesn't work for some reason. What's up?

    Code:
    <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
    Code:
    body {background: #666666;}
    table {background: #333333;}
    red.css
    Code:
    body {background-color : #666666;}
    table { background-color: #aa0000;}
    Told you it was simple...

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    You would do best to ask javascript questions in the javascript area.

    BTW, you need a DOCTYPE for that page.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    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.

    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/

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The JS external stylesheet is right here. Sorry for posting this on css just was asking about the css part of the file.

    Code:
    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;
    		}
    	}
    }

  • #5
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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/...ng-jquery.html


  •  

    Posting Permissions

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