Joomla / Php / Jquery / Css中的Switchstyle问题

Question

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.

Answer 1

I resolved this... the solutions were fixing three to four errors:

first of all, the cookie checker in the html should have asked if the coockie wasn't empty, no if it was SET. So:

<?php  // Checks for, and assigns cookie to local variable:
if(!empty($_COOKIE['style'])) $style = $_COOKIE['style'];
// If no cookie is present then set style as "red" (default):
else $style = 'red';
?>

That was the first thing to fix. Then this line is fixed, because the JQuery plugin asked for an ID in the header to alter. I didn't realized I haven't an ID at the link stylesheet declaration

<link id="stylesheet" rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/wh1/css/template_<?php echo $style ?>.css" media="screen" />

In this line I also discovered that

<?php echo $this->baseurl ?>

should be replaced with the base address but, without the domain, so it should be

/gloom/templates/wh1/css/template_<?php echo $style ?>.css

Also, in the initialization of the JQuery plugin, i made a fatal mistake. I didn't changed the ID for the container of the tag that was going to be captured by the plugin. That was in part for the confusion between the ID on the header for the stylesheet and the ID on the tag container. So I used "#tselect" for the ID of a DIV and it solved the Jquery work. Besides, is mandatory to ad $j in every statement of the plugin.

$j(document).ready(function(){
    $j.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});
        $j("img#hhead").toggle(
        function () { 
            $j("#headtop").slideDown();
        },
        function () {
            $j("#headtop").slideUp();
        });
    $j("#tselect a").styleSwitcher(); // here is the "ID TAG".plugin() call.
});

Now, in the styleswitcher.php I used a tip someone told me about the cookie:

<?php $style = $_GET['style'];
setcookie("style", $style, time()+604800,"/"); // 604800 = amount of seconds in one week
if(isset($_GET['js'])) echo $style;
else header("Location: ".$_SERVER['HTTP_REFERER']);
?>

Did you noticed? is a simple / slash.

Now everything works fine. The stylechanger changes the styles and the JQuery effects work. You could see it here: link text

If anyone wants the files and an explanation, send me a message.