JavaScript Forum

**UUilliam** · 08-19-2010, 12:18 PM

Hi I have set up a Quick little website
and I am trying to switch the background color ~(when user presses a button.)
I would like that colour to follow to the next page too.

I would also need a default background color.

as of just now, I am using javascript which works well, but my default color is white, if i make the background another color, it stops the javascript from working.
and it resets when user clicks next page.

URL: http://www.uuilliam.net/zombies

as I said, design is Very simplistic as it is only a small information page.

**chrishirst** · 08-19-2010, 12:45 PM

Save it to a cookie with javascript

**UUilliam** · 08-19-2010, 12:50 PM

heh, I dunno how to do cookies

I searched on google and from what I gathered, I just put in
<?php
setcookie("ID", "Name", time()+3600);
?>
above head, but it didn't work.

I posted it originally in php forum as I have now modified the code so that the css file is actually a .php file and i set
background to: <?php
$colour=$_GET["bg"];
?>
body {
background:#<?php echo $colour ?>;
}

so I just create a link like "<a href="?bg=hexcode">click</a> and that changes background, but still it resets (and reloads page, but I can deal with that.)

**chrishirst** · 08-19-2010, 01:08 PM

If you change the background with javascript you will have to save the setting to a Javascript Cookie NOT PHP

**UUilliam** · 08-19-2010, 01:20 PM

This is brain hurting stuff...

I have changed it back to php so the url is changed to change bg (http://uuilliam.net/zombies?bg=000000)

I don't understand how to set the cookie to target the background.
that javascript one was for a username?
I also need a default background color which I cannot set as it removes my script if i do

**chrishirst** · 08-19-2010, 01:27 PM

username, background, font size, style sheet, whatever.

It's the same principle and exactly the same code. Just what value you save and what you do with the read value that differs.

**UUilliam** · 08-19-2010, 02:15 PM

nah I really dont get it, I am uploading it and it just fails to work.
I don't understand which part corresponds to what.
Ill leave it as it is, no need for me to mess it up, will keep reading up on them though to try find out.

thanks anyway

**UUilliam** · 08-19-2010, 05:34 PM

okay I have it "working"

by that, I mean, there is text on my page that proves there is a cookie
and when i delete the cookie, that text changes.

how would I get it to target the background color instead of adding text to the website?
it says the text 3 times because, I have pasted it 3 times as I have 3 different backgrounds I want to allow.
zombies, human and neutral.
or can I do that in just 1 cookie?
but I still need to know how to target the background, I set the value + name of the buttons to the same value + name I have in the cookie but that doesn't work.

http://uuilliam.net/zombies

using php cookie btw, since thee background switcher is in php.

I think it is probably to do with this part of code, but I don't know how to change it to target background.

if (isset($_COOKIE["zombies"]))
echo "Welcome " . $_COOKIE["zombies"] . "!<br />";
else
echo "Welcome guest!<br />";
if (isset($_COOKIE["human"]))
echo "Welcome " . $_COOKIE["human"] . "!<br />";
else
echo "Welcome guest!<br />";
if (isset($_COOKIE["neutral"]))
echo "Welcome " . $_COOKIE["neutral"] . "!<br />";
else
echo "Welcome guest!<br />";

**UUilliam** · 08-19-2010, 05:36 PM

this is all my code

PHP Code:


			
<?php

setcookie("zombies", "zombies", time()+108000);

setcookie("human", "human", time()+108000);

setcookie("neutral", "neutral", time()+108000);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Call of Duty - Modernwarfare 2 - Zombies Private match</title>

<style type="text/css">

<?php include ('style.php') ?>

</style>

</head>

<!--<script language="javascript">

    function chngebck (id)

    {

        switch (id)

        {

            case 'b1':

                document.body.bgColor = "#d31111";

                 break;

                

            case 'b2':

                document.body.bgColor = "#1196d3";

                break;

            

            case 'b3':

                document.body.bgColor = "#76d311";

                break;    

        }

    }

</script>!-->

<?php

// Print a cookie

echo $_COOKIE["zombies"];

echo $_COOKIE["human"];

echo $_COOKIE["neutral"];



// A way to view all cookies

print_r($_COOKIE);

?>

<body>

<div class="wrapper">

<div class="container">

<div class="head">

<?php

if (isset($_COOKIE["zombies"]))

  echo "Welcome " . $_COOKIE["zombies"] . "!<br />";

else

  echo "Welcome guest!<br />";

if (isset($_COOKIE["human"]))

  echo "Welcome " . $_COOKIE["human"] . "!<br />";

else

  echo "Welcome guest!<br />";

if (isset($_COOKIE["neutral"]))

  echo "Welcome " . $_COOKIE["neutral"] . "!<br />";

else

  echo "Welcome guest!<br />";

?>



<a href="?bg=d31111" value="zombies" name="zombies" class="b1"> Zombies </a>&nbsp;

<a href="?bg=1196d3" value="human" name="human"class="b2"> Human </a>&nbsp;

<a href="?bg=76d311" value="neutral" name="neutral" class="b3">Neutral</a>

< click to change background

<div class="navbar">

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="howto.php">Instructions</a></li>

</ul>

</div>

<div class="img">

</div>

</div>

<div class="content">

**chrishirst** · 08-19-2010, 05:42 PM

just set a key of "background" (for example) and save the current value in it. Then read it back when the page opens and set the background to that value.

**UUilliam** · 08-19-2010, 06:17 PM

...

I am a newb here, only been learning for about... 20 odd weeks now...

do you mean accesskey ?
and to what? the button?
and how to save it?

and do you mean, instead of a cookie? :S

and how do i read it back?

**chrishirst** · 08-19-2010, 06:52 PM

accesskey?? That is an attribute for accessibility use.

"key" is the name of the cookie variable.

eg: bgimage='zombie'
bgimage is the key.
'zombie' is the value.

saving the value is setting the cookie

reading is getting the key value from the cookie.

Have a look at :- http://www.codeproject.com/KB/script...ageCookie.aspx

**jackrog** · 08-31-2010, 12:49 AM

For these there are so many things which is really very great. For these you have to set the background which is really great in all these there are so many things that can be good for the page opens.

**Colton** · 08-31-2010, 02:02 PM

PHP cookies ARE accessible via Javascript, and vise-versa (Javascript cookies are accessible via PHP).

With this information, you should easily be able to get the cookie with document.cookie.<name>. So, for example say you're creating a cookie:

Code:

<?php
   $expire=365; //Days until cookie expires
   setcookie('cookiename','cookievalue',time()+($expire*60*60*24));
?>

When we want to access this cookie, we can use:

Code:

alert(document.cookie.cookiename);

This code will alert the value of the cookie "cookiename".

With this in mind, we can use something like the following:

Code:

<?php
    $expires=365;
    if (!empty($_GET['bg'])) setcookie('bgColor',$_GET['bg'],time()+($expires*60*60*24));
    else if (empty($_GET['bg'])&&empty($_COOKIE['bgColor'])) setcookie('bgColor','white',time()+($expires*60*60*24)); // Default value
?><html>
    <head>
         <title>Test</title>
         <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript">/*jQuery makes life easier for us all.*/</script>
         <script type="text/javascript">
             $(document).ready(function() {updateBG();});
             function updateBG() {
                 if (document.cookie.bgColor!=undefined) $(document.body).css('background',document.cookie.bgColor);
                 $('#cookiereturn').text('Welcome '+document.cookie.cookiename+'!');
                 return false; // To keep the page from reloading if a Javascript link is clicked.
             }
         </script>
    </head>
    <body>
        <span id="cookiereturn"></span>
        <a href="./?bg=#d31111" onclick="document.cookie.bgColor='#d31111';updateBG();">Human</a>
        <a href="./?bg=#1196d3" onclick="document.cookie.bgColor='#1196d3';updateBG();">Neutral</a>
        <a href="./?bg=#76d311" onclick="document.cookie.bgColor='#76d311';updateBG();">Zombie</a>
    </body>
</html>

This code should work, but I don't have a way to test right now. However, you should still go through and validate values and other things. For example, making sure the input is an actual color that can be used.

**C0ldf1re** · 09-09-2010, 09:59 AM

Just a note of thanks to chrishirst to say that his patient teaching on this thread is a fine example of how a great forum should work!

**C0ldf1re** · 09-14-2010, 07:36 AM

Quote:

Originally Posted by Stephany297

...
<script language="JavaScript">

</script>
_______________________________

Malaysia Flights
Kuala Lumpur Accommodation

Thanks for the code snippet... and the manually-added signature!

**jack_ham** · 09-17-2010, 06:25 AM

this is a very helpful post. i was frantically looking for this info.

ty guys.

**smoseley** · 07:17 AM

I did this exact same thing for www.chasecam.com

The buttons on the top right change the background image/color, and the selection is stored in a cookie.

Feel free to jack the script for your use. It's here:

http://www.chasecam.com/sites/all/th...js/elements.js