FF cookie problem w/ Style Sheet Switcher 1.1

**HelterSkelter** · 01-18-2008, 03:28 PM

1) Script Title: Style Sheet Switcher 1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...etswitcher.htm

3) Describe problem: Reloads default stylesheet on every page refresh in both IE7 and FF2.0x

here is my <head> code

Code:

<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitch.js"></script>
<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link rel="stylesheet" type="text/css" href="{T_THEME_PATH}/color_blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-wide" href="{T_THEME_PATH}/color_red.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="green-wide" href="{T_THEME_PATH}/color_green.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="yellow-wide" href="{T_THEME_PATH}/color_yellow.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="ice-wide" href="{T_THEME_PATH}/color_ice.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-fixed" href="{T_THEME_PATH}/f_color_blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-fixed" href="{T_THEME_PATH}/f_color_red.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="green-fixed" href="{T_THEME_PATH}/f_color_green.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="yellow-fixed" href="{T_THEME_PATH}/f_color_yellow.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="ice-fixed" href="{T_THEME_PATH}/f_color_ice.css" />

here is my <body> code

Code:

		<div id="selector">
		<span class="selector"><a href="javascript:chooseStyle('none', 60)" checked="checked"><img src="{T_THEME_PATH}/images/wbl.gif"></a></span>
		<span class="selector"><a href="javascript:chooseStyle('blue-fixed', 60)"><img src="{T_THEME_PATH}/images/fbl.gif"></a></span><br />
		<span class="selector"><a href="javascript:chooseStyle('ice-wide', 60)"><img src="{T_THEME_PATH}/images/wi.gif"></a></span>
		<span class="selector"><a href="javascript:chooseStyle('ice-fixed', 60)"><img src="{T_THEME_PATH}/images/fi.gif"></a></span><br />
		<span class="selector"><a href="javascript:chooseStyle('red-wide', 60)"><img src="{T_THEME_PATH}/images/wr.gif"></a></span>
		<span class="selector"><a href="javascript:chooseStyle('red-fixed', 60)"><img src="{T_THEME_PATH}/images/fr.gif"></a></span><br />
		<span class="selector"><a href="javascript:chooseStyle('green-wide', 60)"><img src="{T_THEME_PATH}/images/wg.gif"></a></span>
		<span class="selector"><a href="javascript:chooseStyle('green-fixed', 60)"><img src="{T_THEME_PATH}/images/fg.gif"></a></span><br />
		<span class="selector"><a href="javascript:chooseStyle('yellow-wide', 60)"><img src="{T_THEME_PATH}/images/wy.gif"></a></span>
		<span class="selector"><a href="javascript:chooseStyle('yellow-fixed', 60)"><img src="{T_THEME_PATH}/images/fy.gif"></a></span>
		</div>

here is my dev url http://www.forumimages.co.uk/RC4/index.php
the selector is in the right header. Any help is appreciated
Thx, John

**HelterSkelter** · 01-22-2008, 02:06 AM

60 views and no suggestions?

**HelterSkelter** · 01-23-2008, 02:13 PM

nice...first class support here.....

**jscheuer1** · 01-23-2008, 04:06 PM

Originally Posted by HelterSkelter

nice...first class support here.....

That kind of attitude won't help your cause much.

**TimFA** · 01-23-2008, 04:24 PM

You should probably consider that not all of us know these scripts, you'll most likely get your help. 60 views means 60 people tried to see if they knew how to fix your problem.

**HelterSkelter** · 01-24-2008, 05:54 AM

Originally Posted by jscheuer1

That kind of attitude won't help your cause much.

I think after 5 days and over a hundred views my cause is already lost...

**Strangeplant** · 01-24-2008, 02:56 PM

Not necessarily. IE7 has a ton of differences compared to IE6 (disgusting - better?) The layout differences are very frustrating to me. I'm guessing that the cookie is not being set properly because the setStylesheet() should work. Personally, I've just about given up with stylesheet switchers because of the layout differences between IE6, IE7 (I want more than to just change colors.....)

And I hesitate to point to a script off DD, because I owe a lot to DD and the people that contribute to DD, but you may try here: http://awardsites.com/assembly/viewt...2&t=590&p=6498 because that StyleSheetSwitcher code does work in IE7, FF, etc.s

**HelterSkelter** · 01-25-2008, 07:19 AM

this style switcher script works fine, the problem is the cookie set/read function. Im using this script in a phpbb3 template. When the styleswitch.js is used alone, it will switch styles no problem, but it resets to the default css on every page load in both FF and IE. When I use styleswitch.js AND the phpbb styleswitcher.js, it works correctly in IE, but still resets to default in FF. I think this is because phpbb's styleswitcher.js is properly setting and reading cookies. If I knew js, the answer would be to integrate the two js files into one, so styleswitch.js would benifit from styleswitcher.js cookie handeling function

**Strangeplant** · 01-25-2008, 01:39 PM

Well, you should move this

Code:

<script type="text/javascript" src="./styles/fiPro_/template/styleswitch.js"></script>

to be the last line in the head section. You see, on reentry, the cookie is read, but there is nothing in the array of style sheets because the links are defined after the styleswitcher.js does its setStylesheet() evaluation.......

**HelterSkelter** · 01-25-2008, 07:37 PM

thank you. Your suggestion, combined with hard coding the alt stylesheet paths, fixed the problem in both FF and IE7.
I need to incorporate the styleswitcher.js function. Is there a way to rewrite this to not use any of the conflicting styleswitch.js functions?

=============================================================
styleswitcher.js
=============================================================

Code:

function fontsizeup()
{
	var active = getActiveStyleSheet();

	switch (active)
	{
		case 'A--':
			setActiveStyleSheet('A-');
		break;

		case 'A-':
			setActiveStyleSheet('A');
		break;

		case 'A':
			setActiveStyleSheet('A+');
		break;

		case 'A+':
			setActiveStyleSheet('A++');
		break;

		case 'A++':
			setActiveStyleSheet('A');
		break;

		default:
			setActiveStyleSheet('A');
		break;
	}
}

function fontsizedown()
{
	active = getActiveStyleSheet();

	switch (active)
	{
		case 'A++' : 
			setActiveStyleSheet('A+');
		break;

		case 'A+' : 
			setActiveStyleSheet('A');
		break;

		case 'A' : 
			setActiveStyleSheet('A-');
		break;

		case 'A-' : 
			setActiveStyleSheet('A--');
		break;

		case 'A--' : 
		break;

		default :
			setActiveStyleSheet('A--');
		break;
	}
}

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'))
		{
			a.disabled = true;
			if (a.getAttribute('title') == title)
			{
				a.disabled = false;
			}
		}
	}
}

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 null;
}

function getPreferredStyleSheet()
{
	return ('A-');
}

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

function load_cookie()
{
	var cookie = readCookie('style_cookie');
	var title = cookie ? cookie : getPreferredStyleSheet();
	setActiveStyleSheet(title);
}

function unload_cookie()
{
	var title = getActiveStyleSheet();
	createCookie('style_cookie', title, 365);
}

onload_functions.push('load_cookie()');
onunload_functions.push('unload_cookie()');

/*
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
*/

Im not sure about incorporating this into styleswitch.js because these two js scripts need to work independantly, meaning styleswitcher.js should work on whatever stylesheet that styleswitch.js has called

Thread: FF cookie problem w/ Style Sheet Switcher 1.1

Thread Tools

Search Thread

FF cookie problem w/ Style Sheet Switcher 1.1

Bookmarks

Bookmarks

Posting Permissions