Styleswitcher not working for sub-directories?

[rafaelrasalan]

1) Script Title: Style Sheet Switcher

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

3) Describe problem: Hi i'm working on a new website with DD's style switcher, everything is working fine but not for sub folders let's say i have a parent folder where obviously where the index.html is located including about pages, contact, blog, services pages. The styleswitcher works for these pages but in my case i have another folder inside the parent folder where another html files is located. I checked all the paths, double checked and it is correct, i believe the problem is from the jquery.cookie.js file and that is this script:

	$("#select ul li a").click(function() { 
		$("link.skin").attr("href",$(this).attr('href'));
		$.cookie("css",$(this).attr('href'), {expires: 365, path: '/'});
		return false;
	});

You can see i highlighted the code to red. Unfortunately i have no idea what to do about this code as i only have a basic knowledge in jquery.

[jscheuer1]

Hi i'm working on a new website with DD's style switcher . . .

	$("#select ul li a").click(function() { 
		$("link.skin").attr("href",$(this).attr('href'));
		$.cookie("css",$(this).attr('href'), {expires: 365, path: '/'});
		return false;
	});

You can see i highlighted the code to red. Unfortunately i have no idea what to do about this code as i only have a basic knowledge in jquery.

The DD Style Sheet Switcher (v1.1) script doesn't use jQuery, and has its own cookie routines for preserving site wide the stylesheet selection. That looks like the proper path info for a site wide cookie though. But without seeing the entire page/code, it's hard to say for certain. And hard to say if it has anything to do with the Style Sheet Switcher script, if in fact that's the script you're using.

One other thing I should mention is that if you're testing this on a local machine, unlike on a live server, cookies set in one folder often will not be available in another folder.

Try it out live and see.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[rafaelrasalan]

John, this is the link to the website: www.farea.pl
it's in Polish but if you translate the website you'll see what i'm talking about.
If you change the color from homepage and then you go to Graphic Design, or Corporate Identity from the navigation the links inside it the color resets and goes back to blue.

[jscheuer1]

No need to translate, I rarely read what the sites are about, even when they're in English.

And you're not using the DD Style Sheet Switcher script. You're using a jQuery script for that.

Anyways, the cookies are fine. The problem is the href attributes to the stylesheets. They're relative. They should be absolute or network. I like network for this, it's more concise, easier to store in the cookie.

Where you have this on pages in the sub-folders (relative path):

<div id="select">
	<a id="toggle"></a>
	<h3>Zmień skórkę:</h3>
	<ul id="styleswitcher">
		<li><a href="none" class="default"></a></li>
		<li><a href="../styleswitcher/red/red.css" class="red"></a></li>
		<li><a href="../styleswitcher/yellow/yellow.css" class="yellow"></a></li>
		<li><a href="../styleswitcher/green/green.css" class="green"></a></li>
		<li><a href="../styleswitcher/orange/orange.css" class="orange"></a></li>
		<li><a href="../styleswitcher/pink/pink.css" class="pink"></a></li>
	</ul>
</div> <!-- END select -->

and this on the pages in the root folder (relative path):

<div id="select">
	<a id="toggle"></a>
	<h3>Zmień skórkę:</h3>
	<ul id="styleswitcher">
		<li><a href="none" class="default"></a></li>
		<li><a href="styleswitcher/red/red.css" class="red"></a></li>
		<li><a href="styleswitcher/yellow/yellow.css" class="yellow"></a></li>
		<li><a href="styleswitcher/green/green.css" class="green"></a></li>
		<li><a href="styleswitcher/orange/orange.css" class="orange"></a></li>
		<li><a href="styleswitcher/pink/pink.css" class="pink"></a></li>
	</ul>
</div> <!-- END select -->

Make them all like this (network path):

<div id="select">
	<a id="toggle"></a>
	<h3>Zmien skórke:</h3>
	<ul id="styleswitcher">
		<li><a href="none" class="default"></a></li>
		<li><a href="/styleswitcher/red/red.css" class="red"></a></li>
		<li><a href="/styleswitcher/yellow/yellow.css" class="yellow"></a></li>
		<li><a href="/styleswitcher/green/green.css" class="green"></a></li>
		<li><a href="/styleswitcher/orange/orange.css" class="orange"></a></li>
		<li><a href="/styleswitcher/pink/pink.css" class="pink"></a></li>
	</ul>
</div> <!-- END select -->

The browser cache and/or cookies may need to be cleared and/or the page(s) refreshed to see changes.

[rafaelrasalan]

Thanks for the help John, I tried what you suggests but styleswitcher doesn't seem to be working still for sub pages. You can refer to the site directory, maybe something is wrong with the location of the files?

[jscheuer1]

You have not made the changes to the live pages. The first two code blocks were how they were (and still are). They should all be edited to look like the third code block in my previous post.