Holding onclick jquery after page reload

Question

so i've been using the site for answers for a while now but i need some help so here it is.

I have created a bunch of onclick events on buttons using jquery and am using them to dynamically change the css on my site. The problem i'm having is i want the users chosen colours and font size setting to be useds when the page is reloaded or a second page is called.

edit: The chosen background colour is now sent to the url and will hold the value on reload but if i click a second option the first option is disabled and the second is enabled but the first attribute is still shows in the url i need to have at least four possible clicks one for background colour one for font colour one for font size and one for line hieght

any help would me appreciated

These are the buttons

<div id="bc">
 Background Colour
  <button id="bcyellow">yellow</button>
  <button id="bcblue">blue</button>
  <button id="bcblack">black</button>
  <button id="bcwhite">white</button>
</div>
<div id="tc">
 Text Colour
  <button id="tcyellow">yellow</button>
  <button id="tcblue">blue</button>
  <button id="tcblack">black</button>
  <button id="tcwhite">white</button>
</div>
<div id="fs">
 Font Size  
  <button id="fsdown">Default</button>
  <button id="fsup">Big</button>
</div>
<div id="lh">
 Line Height
  <button id="lhdown">Default</button>
  <button id="lhup">Wide</button>
</div>

this is the jquery

function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}


 $(document).ready(function(){

    //change background colour to yellow
 $(function(){
 $("#bcyellow").click(function(){ window.location = document.URL+"?background-color=yellow"; });
    switch(getParameterByName("background-color")){
      case "yellow" : 
         $("body").css("background-color","rgba(247, 233, 107, 1)");
         break; 
       default : 
       //your default color
        break; 
   }
 });

    //change background colour to blue

  $(function(){
  $("#bcblue").click(function(){ window.location = document.URL+"?background-color=blue"; });
    switch(getParameterByName("background-color")){
      case "blue" : 
       $("body").css("background-color","rgba(110, 165, 236, 1)");
        break; 
      default : 
        //your default color
        break; 
   }
 });

    //change background colour to green
  $(function(){
  $("#bcgreen").click(function(){ window.location = document.URL+"?background-color=green"; });
    switch(getParameterByName("background-color")){
      case "green" : 
        $("body").css("background-color","rgba(156, 255, 174, 1)");
        break; 
      default : 
        //your default color
        break; 
   }
 });
    //change background colour to pink
  $(function(){
  $("#bcpink").click(function(){ window.location = document.URL+"?background-color=pink"; });
    switch(getParameterByName("background-color")){
      case "pink" : 
        $("body").css("background-color","rgba(245, 175, 247, 1)");
        break; 
      default : 
        //your default color
        break; 
   }
 });
    //change background colour to black
 $(function(){
  $("#bcblack").click(function(){ window.location = document.URL+"?background-color=black"; });
    switch(getParameterByName("background-color")){
      case "black" : 
        $("body").css("background-color","rgba(0, 0, 0, 1)");
        break; 
      default : 
        //your default color
        break; 
   }
 });
    //change background colour to white
 $(function(){
  $("#bcwhite").click(function(){ window.location = document.URL+"?background-color=white"; });
    switch(getParameterByName("background-color")){
      case "white" : 
        $("body").css("background-color","rgba(255, 255, 255, 1)");
        break; 
      default : 
        //your default color
        break; 
   }
 });
    //change text colour to green 
 $(function(){
   $('#tcgreen').click(function(){ window.location = document.URL+"?color=green"; }); 
   switch(getParameterByName("color")){
      case "green" : 
        $('body').css("color", "rgba(0, 150, 0, 1)") ; 
        break; 
      default : 
        //your default color 
        break; 
   }
 }); 
    //change text colour to blue
 $(function(){
   $('#tcblue').click(function(){ window.location = document.URL+"?color=blue"; }); 
   switch(getParameterByName("color")){
      case "blue" : 
        $('body').css("color", "rgba(0, 0, 171, 0.9)"); 
        break; 
       default : 
        //your default color 
        break; 
   }
 }); 
    //change text colour to black
 $(function(){
   $('#tcblack').click(function(){ window.location = document.URL+"?color=black"; }); 
   switch(getParameterByName("color")){
      case "black" : 
        $('body').css('color', 'rgba(0, 0, 0, 1)'); 
        break; 
      default : 
        //your default color 
        break; 
   }
 }); 
    //change text colour to white
 $(function(){
   $('#tcwhite').click(function(){ window.location = document.URL+"?color=white"; }); 
   switch(getParameterByName("color")){
      case "white" : 
        $('body').css('color', 'rgba(255, 255, 255, 1)'); 
        break; 
      default : 
        //your default color 
        break; 
   }
 }); 
    //change text size increment 
 $(function(){
   $('#fsup').click(function(){ window.location = document.URL+"?font-size3em"; }); 
   switch(getParameterByName("font-size")){
      case "3em" : 
        $("body").css("font-size","3em");
        break; 
     default : 
        //your default size
       break; 
   }
 }); 
    //reset text size
 $(function(){
    $('#fsdown').click(function(){ window.location = document.URL+"?font-size=1em"; }); 
   switch(getParameterByName("font-size")){
      case "1em" : 
        $("body").css("font-size","1em");
        break; 
      default : 
        //your default font-size
        break; 
   }
 }); 
    //change line height to wide
  $(function(){
   $('#lhup').click(function(){ window.location = document.URL+"?line-height=wide"; }); 
   switch(getParameterByName("line-height")){
      case "wide" : 
        $("body").css("line-height","1.5");
        break; 
      default : 
        //your default line-height
        break; 
   }
 }); 
    //reset line height
 $(function(){
    $('#lhdown').click(function(){ window.location = document.URL+"?line-height=default"; }); 
   switch(getParameterByName("line-height")){
      case "default" :
        $("body").css("line-height","1");
         break; 
       default : 
         //your default line-height
        break; 
   }
  }); 
  });

well first thing is remove all the document ready functions and just have one to put all of your clicks in... its redundant code and eats more time when ran — John Ruddell, Mar 18 '14 at 18:31
You should really think about using class instead and refactorize this code to only one click handler. — A. Wolff, Mar 18 '14 at 18:31

score 0 · Answer 1 · answered Mar 18 '14 at 18:37

what you can do is make the click function(e) get the target of what was clicked. then make a variable equal to the targets id (which contains the name of what you want to pass as the color) then set the css to that name.

$("#lhdown").click(function(e){
    $("body").css("line-height","1");
    var x = e.target.id;
    $('#lhdown').css({'color': x});
});

score 0 · Answer 2 · answered Mar 18 '14 at 18:40

You will need some sort of persistence (memory, database, cookies, etc). The client only knows how to make requests and how to interpret the responses it receives.

One easy way to do this client side is with local storage. This is local to the user and will be stored onto the user's hard drive. Check out this link for more information: http://www.w3schools.com/html/html5_webstorage.asp

The next simplest way (although completely not encouraged) is to store the information in memory on the server. You can do this through caching, but eventually all the information will be lost as soon as the server restarts or the cache ends.

The best way to do this is by using a database handled by the server. This will ensure you keep the information by user.

great thanks this will require some further investigation but may be a good way round — , Mar 18 '14 at 18:51

score 0 · Accepted Answer · edited May 23 '17 at 10:27

here is how i would approache this , it's by putting a query string in your url here is a quick example :

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

the function is found here then in your jquery code you can do something like :

$(function(){
   $('#yellow').click(function(){ window.location = document.URL+"?color=yellow"; }); 
   switch(getParameterByName("color")){
      case "yellow" : 
        $('body').css('color', 'yellow') ; 
        break; 
      default : 
        //your default color 
        break; 
   }
});

ok I can understand this and for the purpose of this project it will be just fine so thanks for that. i will try to implement it tomorrow. thanks again — , Mar 18 '14 at 19:30

Holding onclick jquery after page reload

3 Answers3