/* Font selector for use with pages on html, css, javascript April 2016 */ // the user selected sans serif font is used for
, all sans serif font buttons are grayed out, the user selected font's button is made 100% opaque, and then the button is made to lose focus (necessary to remove the transient border that appears) function defaultsans(font,buttid,opval) { $('body').css({'font-family':font}); $('button.sans').css({'opacity':opval}); $(buttid).css({'opacity':'1'}).blur(); }; // the user selected monospace font is used for and , all monospace font buttons are grayed out, the user selected font's button is made 100% opaque, and then the button is made to lose focus (necessary to remove the transient border that appears)
function defaultmono(font,buttid,opval) {
$('code, code-inline').css({'font-family':font});
$('button.mono').css({'opacity':opval});
$(buttid).css({'opacity':'1'}).blur();
};
// populate the element with the font buttons and instructions for their use
$(function() {
$('#fontselect').html('You can choose the typeface (font) you wish to read this page in.
Button for typeface currently in use is the one not grayed out.
You can choose the typeface you wish to view code snippets in.
Button for typeface currently in use is the one not grayed out.
');
});
// change to selected font when corresponding button is clicked
$(function() {
const opval = 0.4; // css opacity value of grayed out buttons
$('body').css({'font-family': 'Open Sans'}); // the default sans serif font when page is loaded
$('code, code-inline').css({'font-family':'inconsolata'}); // the default monospace font when page is loaded
$('button').css({'opacity': opval}); // gray out ALL buttons
$('#butt-opensans').css({'opacity': '1'}); // make button of the default sans serif font 100% opaque
$('#butt-inconsolata').css({'opacity':'1'}); // make button of the default monospace font 100% opaque
$('#butt-opensans').on('click', function() {
defaultsans('Open Sans', '#butt-opensans', opval);
});
$('#butt-lato').on('click', function() {
defaultsans('Lato', '#butt-lato', opval);
});
$('#butt-sourcesanspro').on('click', function() {
defaultsans('Source Sans Pro', '#butt-sourcesanspro', opval);
});
$('#butt-inconsolata').on('click', function() {
defaultmono('Inconsolata', '#butt-inconsolata', opval);
});
$('#butt-consolas').on('click', function() {
defaultmono('Consolas', '#butt-consolas', opval);
});
$('#butt-couriernew').on('click', function() {
defaultmono('Courier New', '#butt-couriernew', opval);
});
});