Hi, I've been developing a site (for now is here as an example: http://neurotoxine.mine.nu/gloom), and I'm getting a strange behaviour from a styleswitcher code. It's big so please be patient.
First, you may go to the site I appointed first and see it. What you've got there, it's a joomla page, with a Jquery using
var $j = jQuery.noConflict();
in order to avoid mootools conflicts. Then, I used these:
<? // Checks for, and assigns cookie to local variable:
if(isset($_COOKIE['style']))
{ $style = $_COOKIE['style'];
}
// If no cookie is present then set style as "red" (default):
else { $style = 'red';
}
?>
This is just for the cookie setting, if the cookie is not set then $style=red, and this variable will be appended to the CSS. Like this:
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/wh1/css/template_<?php echo $style ?>.css" media="screen" />
The first code, $this->baseurl=directory for joomla installation, in this case gloom. The second one, echo $style, will write the cookie loaded value or the value assigned from the options, in the case you get there for first time then you'll got RED as value then, template_red.css will be the CSS for the entire site.
There's a JS, that works doing some jquery tricks:
jQuery.fn.styleSwitcher = function(){
$j(this).click(function(){
// We're passing this element object through to the loadStyleSheet function.
loadStyleSheet(this);
// And then we're returning false.
return false;
});
function loadStyleSheet(obj) {
$j('#preloader')
// Now fade in the div (#preloader):
.fadeIn(500,function(){
// The following will happen when the div has finished fading in:
// Request PHP script (obj.href) with appended "js" query string item:
$j.get( obj.href+'&js',function(data){
// Select link element in HEAD of document (#stylesheet) and change href attribute:
$j('#stylesheet').attr('href','css/' + data + '.css');
// Check if new CSS StyleSheet has loaded:
cssDummy.check(function(){
// When StyleSheet has loaded, fade out and remove the #overlay div:
$j('#preloader').fadeOut(500);
});
});
});
}
// CSS DUMMY SECTION
var cssDummy = {
init: function(){
// Appends "dummy-element" div to body:
$j('<div id="dummy-element" style="display:none" />').appendTo('body');
},
check: function(callback) {
// Checks if computed width equals that which is defined in the StyleSheets (2px):
if ($j('#dummy-element').width()==2) callback();
// If it has not loaded yet then simple re-initiate this function every 200 milliseconds until it had loaded:
else setTimeout(function(){cssDummy.check(callback)}, 200);
}
}
cssDummy.init(); }
then, I start the function in my page:
$j(document).ready(function(){
$j('#style-switcher a').styleSwitcher();
});
and I call it from a link like this:
<a href="<?php echo $this->baseurl ?>/templates/wh1/style-switcher.php?style=fire">img</a>
Finally, the styleswitcher.php code is here:
<?php
$style = $_GET['style'];
setcookie("style", $style, time()+604800*24); // 604800 = amount of seconds in one week *4=1 month *24=1/2 year *48=1 year
if(isset($_GET['js']))
echo $style;
else header("Location: ".$_SERVER["HTTP_REFERER"]); ?>
Now, the problem is, that when I tested this in a site, everything worked fine (http://neurotoxine.mine.nu/wht/index-test.php - The links for the stylechanger are in the top and left of them says THEMES). But when I inserted the whole code in joomla template, the whole system failed. I did some fixes here and there (mainly the $j declaration) and then I realized that could be something related to the path of the templates, so I tested many types of declarations, absolute paths, relative paths, etc. and nothing happens.
Then I copied styleswitcher.php to the root of joomla (neurotoxine.mine.nu/gloom) and checked if ti would work there, and I'm getting a blank page. I clicked go-back and then WOW the stylechanger worked, but then something isn't telling where to go back to I think it could be the header("Location: ".$_SERVER["HTTP_REFERER"]); instruction, but I don't know what to change there to make it work.
Joomla gives a declaration in the header for its templates:
<base href="http://neurotoxine.mine.nu/gloom/" />
I don't know if this is doing something to the way the http_referer works, but I disabled this and the site still does the same, click a style, page blank, hit go-back and voila, the style has changed but failed to retrieve the page where I was.
Some ideas? Any help could be useful.