Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>So, the problem with this -- if I am understanding correctly -- is that you want to change the font application-wide. The problem is that the css will define what the font is across the the browser session. Just changing it in the document one time will not refresh it across the browser session, meaning when a user refreshes the page or clicks a link to go to another page, the original css will be used, not their change.</p> <p>There are many ways you could do this:</p> <p>1) cookies 2) session variables server side 3) queryline variables 4) plus any many others ...</p> <p>Sample code of something that would work. I am using th carhart jquery cookie plug-in for simplicity's sake. (See that here <a href="https://github.com/carhartl/jquery-cookie" rel="nofollow">https://github.com/carhartl/jquery-cookie</a>):</p> <pre><code>$(document).on('change', '#select-choice-2', function() { alert("dd") var style; var font = $(this).val(); if ($('head').find('style.font').length === 0) { style = $('&lt;style class="font"&gt;.font { font-size: ' + font + 'px !important; }&lt;/style&gt;'); $('head').append(style); $('body *').addClass('font'); } else { $('body *').removeClass('font'); $('style.font').empty(); style = '.font { font-size: ' + font + 'px !important; }'; $('style.font').append(style); } //additional code $.cookie("font", font); }); $(document).ready(function(){ if($.cookie("font")) { var font = $.cookie("font"); style = $('&lt;style class="font"&gt;.font { font-size: ' + font + 'px !important; }&lt;/style&gt;'); $('head').append(style); } }); </code></pre> <p>Not sure if that is exactly how you would want it to work, but something along that line. Basically, every time the DOM loads it needs to see if the font cookie is set. If so, then it sets the font stored in the cookie.</p> <p>There are many other ways (and prob better ways) to do this, but this is just a simple example to get you started. Hope that helps.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload