CSS Switcher Help

jcb33 · 24 Apr 2007 at 14:14

Hi all, trying to make it so my site has the following options:

Default Style - The one thats on untill someone selects otherwise
Large Font - For Accesability
Text Only - For None CSS Browsers

http://cpanel.lincoln.ac.uk/dci125/index.shtml#

I have the javascript code from:
http://alistapart.com/d/alternate/styleswitcher.js

in assets/javascript/styleswitcher.js

and I have my 2 CSS Files, assets/css/Style.css and assets/css/LargeFont.css

I use the code:

Code:

<p><a href="#" onclick="setActiveStyleSheet('Style'); return false;">Default</a></p>
				<p><a href="#" onclick="setActiveStyleSheet('LargeFont'); return false;">Large Font</a></p>
				<p><a href="#" onclick="setActiveStyleSheet('none'); return false;">Text Only</a></p>

And have this in the header:

Code:

	<link rel="stylesheet" href="assets/css/Style.css" type="text/css">
	<link rel="alternate stylesheet" href="assets/css/LargeFont.css" type="text/css">
	<script type="text/javascript" src="assets/javascript/styleswitcher.js"></script>

But clicking the links does nothing but add # to the url, what am I doing wrong?

growse · 24 Apr 2007 at 14:20

You need to set the title attribute on your stylesheet links. The javascript is looking for a <link> with the 'title' attribute of whatever argument you pass.

Therefore:

Code:

<link title="none" rel="stylesheet" href="assets/css/Style.css" type="text/css">
	<link title="LargeFont" rel="alternate stylesheet" href="assets/css/LargeFont.css" type="text/css">

jcb33 · 24 Apr 2007 at 14:26

*Slaps self* Thanks! Seems to be working now, only problem is that it breaks my guestbook if comments are to long again on large font

jcb33 · 24 Apr 2007 at 14:47

Sorry final quick question.. or 2

a) Would it be better to have a drop down menu offering the styles, or text in a menu bar?

b) How would I create said drop down menu? I have the js working, that can take me to a url, but im not sure what syntax to use to get it to change the style... Im trying:

Code:

<form>
	<select id="menu" onchange="go()">
  	<option>--Accessibility Style Changer--</option>
  	<option onChange="setActiveStyleSheet('default'); return false;">Default</option>
  	<option value="">Test</option>
  	<option value="">Test</option>
	</select>
</form>

But that does nothing so far but take me to a page 404...

jcb33 · 24 Apr 2007 at 16:20

Anyone? Need to finish this asap

jcb33 · 24 Apr 2007 at 18:11

<form>
<select id="switcher" else onchange="setActiveStyleSheet(this.options[this.selectedIndex].value); return false;">
<option value="nothing">--Style Changer--</option>
<option value="default">Default Style</option>
<option value="LargeFont">Large Font</option>
<option onChange="">Text Only</option>
</select>
</form>

Never mind got it working, only problem is that if people select the first option it changes to no style and I want it to do nothing.... Any other styles people think I should add for accesability?