CODEWITHSUNDEEP
phpjavascript
Austen
Austen

Reputation: 293

PHP Cookies not working properly

So I have some special effects with CSS3 on my website, but I'm trying to give viewers an option to disable these. So I am going with the PHP Cookie approach, but it's not working at all.

Without any cookies, I see "Click here to enable special effects" even when they are already enabled. Going to the disable page directly doesn't turn them off either.

Here's some snippits from my code.

Check if cookie is set:

<?php
if(!$_COOKIE['nofancy']){ 
?>
<link rel="stylesheet" type="text/css" href="http://pattersoncode.ca/incls/nofancy.css" media="screen" />
<?php
}
?>

Turn off special effects:

<p>You have successfully turned off all special effects used in this website. This effect will last 48 hours after which you will need to disable them again. You will be redirected to the homepage in 5 seconds.</p>
<?php
$value = "nofancy";
setcookie("nofancy",$value, time()+3600*48);
?>
<script type='text/javascript'>
setTimeout(function () {
   window.location.href= 'http://www.pattersoncode.ca';

},5000); // 5 seconds
</script>

Turn special effects back on:

<p>Special effects have been enabled again. This effect will be permanent unless disabled again. You will be redirected to the homepage in 5 seconds.</p>
<?php
setcookie ("nofancy", "", time() - 3600);
?>
<script type='text/javascript'>
setTimeout(function () {
   window.location.href= 'http://www.pattersoncode.ca'; 

},5000); // 5 seconds
</script>

Disable/enable button:

<?php
if (!isset($_COOKIE["nofancy"]))
{
?>
 <a href="?a=fancyon"> Turn special effects back on </a> 
<?php
} else {
?>
 <a href="?a=nofancy"> Remove all effects </a> 
<?php
}
?>

Anyone able to help me? Pretty stumped..

Upvotes: 0

Views: 109

Answers (1)

defaude
defaude

Reputation: 308

I recommend you set up the CSS so that all selectors that enable the fancy stuff begin with an additional class like this:

/* regular CSS - just to demonstrate the normal selectors that have
   nothing to do with fancy CSS stuff */
#foo {
    border: 1px solid hotpink;
    width: 300px;
    height: 200px;
}

/* fancy stuff added here */
.fancy-css #foo {
    box-shadow: 5px 5px 10px lime;
    border-radius: 4px;
}

This way, you can simply enable / disable the styles by controlling your HTML output. Styles active? Put the class on the body tag. Styles not active? Don't put it there.

This way, you can control the styling on the server by modifying the HTML output accordingly. You can also toggle the fancy stuff without reloading by simply removing / adding the class to the body tag.

Upvotes: 1

Related Questions