Search jQuery

jQuery Forum

changing page's background color

in Using jQuery • 13 years ago

Hi all
I have a small script that changes the background color of my page from white to grey when the user clicks a button.
at the moment it works fine accept for when the user tries to navigate to another page (on my website) after changing the background color.
if a user changes the background color to grey and than tries to view another page, the background color becomes white again.
is there any way to make the change only controlled by the button?

my head code looks like this (at least the relevant parts):

+++++++++++++++++++++++++++++++++++++++++++++++++++++++

i have a link with ID=#switch_lnk, which once clicked, changes attributes for 'body' and 'div#side_menu #menu li.active'..

i should add that this website is using Joomla! CMS and that this script is part of the index.php file - meaning it appears on every page in my website.

any ideas?

thank you all so much.

Replies(8)

relst.jqu..

Re: changing page's background color

13 years ago

When you change the background with jquery, you change it on the client side. When the user navigates to another page, he'll receive a new page from the server with the default background.
A new DOM is created when loading the new page.
You'll have to store the color of the background in a session variable.

eliadwagn..

Re: changing page's background color

13 years ago

thanks for your answer,
i am new to jQuery, so i am sorry if this is basic but how do i store the color of the background in a session variable?

thanks again

relst.jqu..

Re: changing page's background color

13 years ago

You can't do that in jQuery.
You'll have to use a server side language like PHP.

Or maybe you can use cookies?

suhajdab

Re: changing page's background color

13 years ago

...or you could use cookies to store color!

http://www.electrictoolbox.com/jquery-cookies/

Balázs Suhajda
frontend developer

Jaggi

Re: changing page's background color

13 years ago

yea session variable isn't practical. you will need to store it in a cookie.

eliadwagn..

Re: changing page's background color

13 years ago

sounds good.
if i was to use a cookie for that, can amyone give an example o fhow the code should look like? will i have to change the cookie value instead of changing the CSS attribute? and will the CSS attribute value should be connected with my cookie now?

thanks

suhajdab

Re: Re: changing page's background color

13 years ago

Check the above link about jquery-cookies!

When the page loads, you check your cookie, if set, update background.

When user clicks link, update cookie & change background.

Balázs Suhajda
frontend developer

eliadwagn..

Re: changing page's background color

13 years ago

Hi ,
i took your advice and tried using a cookie. i wrote a short if statement that checks he cookie value and changes the background accordingly. thing is it doesnt change the results. i am not sure what i am doing wrong though

this is my code:
///////////////////////////////////////////

<style type="text/css">
body.gray {
    background-color:#0a0a0a;
}
body.white {
background-color:white;
}
</style>

<script type="text/javascript">
jQuery(document).ready(function(){
        if( jQuery("body").css("background-color") == "transparent" || jQuery("body").css("background-color") == "white") {
                jQuery.cookie("egg", "gray", { expires: 7 });
                }
                else {
                jQuery.cookie("egg", "white", { expires: 7 });
                } ;

        jQuery("#switch_lnk").click(function(){
                if( jQuery.cookie("egg") == "gray" ) {
                jQuery('body').toggleClass('gray');
                jQuery.cookie("egg", "white", { expires: 7 });
                }
                else {
                jQuery('body').toggleClass('white');
                jQuery.cookie("egg", "gray", { expires: 7 });
                }
        });
});
</script>

///////////////////////////////

any ideas what i might be doing wrong?

Top Reply

Response title

Attachments

jQuery Forum

changing page's background color

Replies(8)

Re: changing page's background color

Re: changing page's background color

Re: changing page's background color

Re: changing page's background color

Re: changing page's background color

Re: changing page's background color

Re: Re: changing page's background color

Re: changing page's background color

Statistics

Tags

Actions