CODEWITHSUNDEEP
javascriptcss
SoukaProgrammer
SoukaProgrammer

Reputation: 94

Font size changes after reload

enter image description here

After I click on A+ or A- it works perfectly, but the issue is after loading the page or cliking on some link on the page it goes back to normal.

I need it to maintain the size even after cliking on some link.

thank you for helping.

Here s the code:

function increaseFont() {

  var currentFontSizeH1 = $('h1').css('font-size'); //36

  var currentFontSizeNumH1 = parseFloat(currentFontSizeH1, 5);

  var currentFontSizeNumH1 = currentFontSizeNumH1 + 1.5;

  $('h1').css('font-size', currentFontSizeNumH1);

  var deccurrentFontSize = $('body').css('font-size'); //14
  var deccurrentFontSizeNum = parseFloat(deccurrentFontSize, 10);
  var decnewFontSize = deccurrentFontSizeNum * 1.2;
  $('body').css('font-size', decnewFontSize);
  $('body').css('font-size', decnewFontSize);
  $('p').css('font-size', decnewFontSize);
  $('span').css('font-size', decnewFontSize);
  $('li').css('font-size', decnewFontSize);
  $('h2').css('font-size', decnewFontSize);

  $('a').css('font-size', decnewFontSize);

  return false;
}

function decreaseFont() {

  var currentFontSizeH1 = $('h1').css('font-size');

  var currentFontSizeNumH1 = parseFloat(currentFontSizeH1, 5);

  var currentFontSizeNumH1 = currentFontSizeNumH1 - 1.5;

  $('h1').css('font-size', currentFontSizeNumH1);

  var deccurrentFontSize = $('body').css('font-size');
  var deccurrentFontSizeNum = parseFloat(deccurrentFontSize, 10);
  var decnewFontSize = deccurrentFontSizeNum / 1.2;
  $('body').css('font-size', decnewFontSize);
  $('p').css('font-size', decnewFontSize);
  $('span').css('font-size', decnewFontSize);
  $('li').css('font-size', decnewFontSize);
  $('h2').css('font-size', decnewFontSize);

  $('a').css('font-size', decnewFontSize);

  return false;
}
h1 {
  font-size: 36px;
  line-height: 42px;
  color: #007ea6;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #333333;
  background-color: #ffffff;
}
.....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div title="{" Increase the text size "|i18n( 'design/siteinstitutionnel/page_header_changerCSS' )}" style="width: 6px;" class="span1"><a href="#" style="text-decoration:none;font-size: 17px; box-shadow: 0 3px 0 #aaa,0px 0 0 #888,0px 3px 0 #666;" onClick="increaseFont();" alt="Aggrandir la taille du texte">A+</a>
</div>
<div title="{" Decrease the text size "|i18n( 'design/siteinstitutionnel/page_header_changerCSS' )}" style="width: 21px;" class="span1"><a href="#" style="text-decoration:none;font-size: 17px; box-shadow: 0 3px 0 #aaa,0px 0 0 #888,0px 3px 0 #666;" onClick="decreaseFont();" alt="Reduire la taille du texte">A-</a> 
</div>

Upvotes: 0

Views: 611

Answers (3)

koninos
koninos

Reputation: 5357

You could save the size in a variable in Window.sessionStorage.

// Save data to sessionStorage
sessionStorage.setItem('fontSize', value);

// Get saved data from sessionStorage
var size = sessionStorage.getItem('fontSize');

Data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated.

Upvotes: 3

chrisg86
chrisg86

Reputation: 11907

Localstorage would also be an option, but not supported by older browsers:

if(typeof(Storage) !== "undefined") {
    // Set the value
    localStorage.setItem("fontSize", fontSize);

    // Get the value
    var fontSize = localStorage.getItem("fontSize");
} else {
    // Sorry! No Web Storage support..
}

Alternatively you could use Cookies.

Upvotes: 3

QoP
QoP

Reputation: 28407

If you want it to remain, you have to save it. In order to achieve that, you can use LocalStorage like

localStorage.setItem("fontSize", yourFontSize);

you can load the value in your $( document ).ready() like this

$( document ).ready(function() {
    var fontSize = localStorage.getItem("fontSize");
}

Upvotes: 2

Related Questions