Hi @Alexey Leonovich ,
Howto dynamically change a font family for whole site when user selects any value from that dropdown?
You can use the DropDownList's change event, after the select value changes, you could change all elements's font-family
property. Code like this:
<select id="CurrentFontFamily" >
<option value="0">Choose a Font</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Arial">Arial</option>
</select>
<script>
$(function(){
$("#CurrentFontFamily").change(function(){
if($(this).val()!=0){
//find all elements and set the font-family
$('*').css("font-family", $(this).val());
}
});
});
</script>
You can add the above code in the Layout page. The result as below:
And in the above code, I directly populate the DropDownList, if you want to dynamically populate the DropDownList, after the document is ready, you can use JQuery Ajax to call the API method or Razor page handler to get the data and populate the DropDownList.
After select the font-family
, as Bruce said, you can store it using cookie, or using the Web Storage API (such as localStorage or sessionStorage). Then, after navigation to another page or reload page, you can use JQuery to check whether the cookie or webstorage stored the selected font family, if the font family exist, you can set the DropDownList selected index and change the elements font family.
For example, we are using the session storage:
<script>
$(function(){
//check is current font family exist
if (sessionStorage.currentFontFamily) {
var family = sessionStorage.currentFontFamily;
$('*').css("font-family", family); //change elements font family
$("#CurrentFontFamily").val(family); //change the dropdownlist select option
}
else{
$("#CurrentFontFamily").val("0");
}
$("#CurrentFontFamily").change(function(){
if($(this).val()!=0){
//find all elements and set the font-family
$('*').css("font-family", $(this).val());
sessionStorage.currentFontFamily = $(this).val(); //store the selected font family to the sessionstorage
}
});
});
</script>
The result is like this:
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Dillion