Skip navigation

Page Content:

JS Code Snippet: Style Switcher

Download: /howto/webdesign/templates/style_switcher.js

// style_switcher.js
///////////////////////////////////////////////////////////////////////////////
// This program works better combined with  addons/alternate_styles.php ,
// without it, there will be flickering after clicking on an internal link.
///////////////////////////////////////////////////////////////////////////////

function setActiveStyleSheet(title) {
	var i, a, main;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if((a.getAttribute("rel").indexOf("style") != -1)
		&& (a.getAttribute("title"))
		) {	if(a.getAttribute("title") === title) {
				a.disabled = false;
			} else {
				a.disabled = true;
			}
		}
	}
	document.getElementById("style_link").setAttribute(
		"title", 'Toggle Style (Current: '+title+ ')'
	);

	SaveCookie();
}


function getActiveStyleSheet() {
	var i, a;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if((a.getAttribute("rel").indexOf("style") != -1)
		&& (a.getAttribute("title"))
		&& (!a.disabled)
		) {	return a.getAttribute("title");
		}
	}
	return 'Default';
}


function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}


function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') {
			c = c.substring(1,c.length);
		}
		if (c.indexOf(nameEQ) == 0) {
			return c.substring(nameEQ.length,c.length);
		}
	}
	return null;
}


// MAIN PROGRAM //

function AddEvent( element, event_name, event_function )
{
	 if (element.attachEvent) {		 // Internet Explorer
		element.attachEvent(
			"on" + event_name,
			function() { event_function.call(element); }
		);
	 }
	 else if (element.addEventListener) {	 // Rest of the world
		element.addEventListener(
			event_name,
			event_function,
			false
		);
	 }
}

function SaveCookie()
{
	var title = getActiveStyleSheet();
	createCookie("style", title, 365);
}


// TOGGLE //
function toggleStyle()
{
	current = getActiveStyleSheet();

	switch (current) {
		case 'Limit Page Width (Classic)':
			setActiveStyleSheet('Limit Page Width (Fancy)');
			break;
		case 'Limit Page Width (Fancy)':
			setActiveStyleSheet('Default')
			break;
		default:
			setActiveStyleSheet('Limit Page Width (Classic)');
	}
}

AddEvent( window, 'load', function () {
	var cookie = readCookie("style");
	var title = (cookie != null) ? cookie : 'Limit Page Width (Fancy)';
	setActiveStyleSheet(title);

	var e = document.getElementById('style_link');
	e.setAttribute( 'href', '#' );
	e.setAttribute( 'onclick', 'javascript:toggleStyle();' );

	e = document.getElementsByClassName('js_only');
	for( i = 0 ; i < e.length ; i++ ) {
		e[i].style.display = 'inline-block';
	}

	//window.onunload = function(e) { SaveCookie(); }
}); // onLoad