Widget Font Controller Utility
Thursday, 6 June 2019
10:06 AM
Change the size of text dynamically on the serviceNow portal. Saves size persistently as a cookie
Create a custom widget with the following code. Drop the widget onto a page to test.
The widget can also be inserted with the following line.
<widget id="font_controller_utility"></widget>
Name:
Font Controller Utility
Id:
font_controller_utility
Description
allows for dynamic adjustment and persistance of font size on the portal
HTML
<div class="utility-controls">
<button type="button" class="btn-decrease"><span class="sr-only">Decrease font</span><span class="fa">1</span></button>
<button type="button" class="btn-increase"><span class="sr-only">Increase font</span><span class="fa">1</span></button>
<span class="separator">
<button type="button" class="btn-print"><span class="sr-only">Print page</span><span class="fa">/</span></button>
</span>
</div>
CSS
.utility-controls {
line-height: 1.125;
margin: 0 auto;
position: relative;
text-align: right;
vertical-align: top;
width: 1200px;
z-index: 20;
}
.btn-increase {
background: 0;
border: none;
font-size: 1em;
margin: 0 3px;
padding: 0;
color: #002664;
cursor: pointer;
}
.btn-decrease {
background: 0;
border: none;
font-size: 0.7em;
margin: 0 3px;
padding: 0;
color: #002664;
cursor: pointer;
}
.btn-print {
background: 0;
border: none;
font-size: 1em;
margin: 0 3px;
padding: 0;
color: #002664;
cursor: pointer;
}
.separator {
border-left: 2px solid #002664;
display: inline-block;
padding-left: 0.25em;
}
.fa {
font-family: FontAwesome;
}
Client controller
function () { //$scope
'use strict';
var fontController;
fontController = (function (start) {
var size, maxSize, minSize, savedSize, delta, changeSize;
if ($.cookie) {
savedSize = $.cookie('size');
}
minSize = start; //alter Max and Min sizes
maxSize = start * 2;
size = savedSize ? parseInt(savedSize, 10) : minSize;
delta = 2; // alter change rate
changeSize = function (sz) {
size = sz;
$(document.body).css('fontSize', sz + 'px');
if ($.cookie) {
$.cookie('size', sz);
}
};
changeSize(size);
return {
increase: function () {
var newSize = Math.min(size + delta, maxSize);
changeSize(newSize);
},
decrease: function () {
var newSize = Math.max(size - delta, minSize);
changeSize(newSize);
}
};
}(14)); //is the default size of the font to start with
$('.btn-decrease').on('click', function () {
fontController.decrease();
});
$('.btn-increase').on('click', function () {
fontController.increase();
});
$('.btn-print').on('click', function () {
window.print();
});
}
