CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Mjeed
Mjeed

Reputation: 13

change the style of all pages in a website

I have created a personal website. The default color of the website is black. I want to allow the user to change the color to "red,green.blue,..."

I have done this using jQuery. by changing the stylesheet (the css file)

This is my code:

                $(document).ready(function(){


            $("img.black").click(function(){
                $('link').attr('href','style_black.css');
            });
            $("img.red").click(function(){
                $('link').attr('href','style_red.css');

            });
            $("img.blue").click(function(){
                $('link').attr('href','style_blue.css');

            });
            });

but the problem is when I go to another page in the same website the color returns to the default (black)

for example: I'm in (profile) page and I change the color then I go to (contact) page, the color returns to the default !

Is there a way to change the color for the whole website? (for all pages in the website)

Thanks

Upvotes: 0

Views: 168

Answers (1)

Ketola
Ketola

Reputation: 2767

You need to store the selection in a cookie or on the backend server somewhere. You could, for example, use a jQuery-cookie plugin to store the cookie, and then do something like the following:

$(document).ready(function(){
    // Read style selection from cookie
    var style = $.cookie("style");
    // Options to store cookie for 365 days for all pages
    var options = { expires: 365, path: "/" };
    // If style was stored in cookie, apply it
    if(typeof style !== "undefined") {
        $("link").attr("href","style_"+style+".css");
    }
    $("img.black").click(function(){
        $("link").attr("href","style_black.css");
        $.cookie("style","black", options);
    });
    $("img.red").click(function(){
        $("link").attr("href","style_red.css");
        $.cookie("style","red", options);
    });
    $("img.blue").click(function(){
        $("link").attr("href","style_blue.css");
        $.cookie("style","blue", options);
    });
});

Upvotes: 2

Related Questions