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

• • Reply
  BoutrosDouai...

  None

  0 Points

  5 Posts

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

  Mar 14, 2018 08:59 PM|BoutrosDouaihy|LINK

  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.

• • Reply
  Brando ZWZ

  Star

  9821 Points

  3120 Posts

  Re: How to change background color of a button from master page on button click and persist in ch...

  Mar 15, 2018 05:59 AM|Brando ZWZ|LINK

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  BoutrosDouai...

  None

  0 Points

  5 Posts

  Re: How to change background color of a button from master page on button click and persist in ch...

  Mar 15, 2018 09:11 AM|BoutrosDouaihy|LINK

  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.

• • Reply
  Brando ZWZ

  Star

  9821 Points

  3120 Posts

  Re: How to change background color of a button from master page on button click and persist in ch...

  Mar 16, 2018 09:55 AM|Brando ZWZ|LINK

  Hi BoutrosDouaihy,

  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.

  BoutrosDouaihy

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.