Log in

View Full Version : 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/dynamicindex9/stylesheetswitcher.htm

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

here is my <head> 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



<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
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
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/viewtopic.php?f=52&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
<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
=============================================================



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
Strangeplant
01-25-2008, 08:11 PM
What is it that you are trying to accomplish? First you say
these two js scripts need to work independantlyand then you say
styleswitcher.js should work on whatever stylesheet that styleswitch.js has calledand these obviously conflict with each other, so you are implying that they need to interact in some way. Why not use only the DD script? But, yes, you could have both (if you really must) if their functions and cookies both have different names, but having both control the same active alternate css, that's different, and possibly troublesome, so we need to figure out the intent and methods of use. Do you intend to use (BB) styleswitcher.js on other pages for the BB system defaults and still have user specifieds on different set of pages? On every page that (DD) styleswitch.js (DD) exists, the identical group of alternate css files must be specified as links, or else the default css will be invoked.
HelterSkelter
01-26-2008, 02:26 AM
not sure I understand your post.
The styleswitcher.js controls 3 stylesheets that increase and decrease font size on all the pages.
The styleswitch.js controls 10 stylesheets. 5 that change the color, and five that change the color and width.
I would like to be able to change the font size, regardless of the color and width.

http://www.forumimages.co.uk/RC4/
Strangeplant
01-28-2008, 03:16 PM
I see now that you want to have two (or more) alternate style sheets selected simultaneously, one for css property set 1 (color/width) and a second one for css property set 2 (font size and maybe something else to get the font to display correctly in the available area). Both existing style sheet switcher scripts write and read a single cookie with a single name/value pair (The cookie data is stored as name='value'; expires='dateGMT'; path='URLpath'; - and there can be many multiple name/value pairs if you use stacked cookies where instead you have name-'value'; and the cookie name is not the same as the 'value') So, the script would have to be rewritten to use either multiple cookies for single name/value pairs or multiple name/value pairs in a stacked cookie (probably the more universal solution).