How to change background color of a button from master page on button click and persist in child pages the same color on click

Question

User-121712575 posted

please i have some buttons as a navigation bar i want to change the color of the button once clicked and change to the initial color when another one is clicked , i have done it in cascading style sheet and in java script but when i click it and redirect to the child page of the master page it is setting the initial button color. i am little bit confused how to do this and i have tried everything to do it.

Thanks in advance.

Answer 1

User283571144 posted

Hi BoutrosDouaihy,

As far as I know, if your page has refreshed the color you have set in the jQuery will also disappear.

So if you want to maintain the css style, you should store the css style in somewhere.

When page loading completely, you should set the css style again.

I suggest you could consider using cookie.

You could store the button background color in cookie.

More details, you could refer to below codes:

    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
    <script>
        $(function () {
            
            $("#Button1").css("background-color", Cookies.get('color'));

            $("#Button1").click(function () {
                $("#Button1").css("background-color", "red");
                Cookies.set('color', 'red');
                Cookies.remove('name');
            });
            $("#Button2").click(function () {
                $("#Button1").css("background-color", "");
                Cookies.remove('color');
            });
        });
    </script>

Notice:Since cookie has the time to expire, you should have another function to delete the cookie.

Best Regards,

Brando

Answer 2

User-121712575 posted

thanks for your reply, Cookies.get('color') , color is a css class? or i will leave it like this , and name also will be like this in my code? and cookies will need a library or something to include? and thanks for your reply.

Answer 3

User283571144 posted

Hi BoutrosDouaihy,

cookies will need a library or something to include?

I used a js library to easily store and get the cookie.

https://github.com/js-cookie/js-cookie 

Cookies are small files which are stored on a user's computer. They are designed to hold a modest amount of data specific to a particular client and website, and can be accessed either by the web server or the client computer. This allows the server to deliver a page tailored to a particular user, or the page itself can contain some script which is aware of the data in the cookie and so is able to carry information from one visit to the website (or related site) to the next.

Cookies.get('color') , color is a css class? or i will leave it like this , and name also will be like this in my code?

Color is the name of the cookie.

Cookie is stored as key-value in the user browser.

Best Regards,

Brando