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.

Name:

Font Controller Utility

Id:

font_controller_utility

Description

allows for dynamic adjustment and persistance of font size on the portal

HTML

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();

});

​}