I'm currently learning to develop with SharePoint 2013. I have created a custom master page and added a script element, as seen below.
function jsUpdateSize() {
// Get the dimensions of the viewport
var width = window.outerWidth;
if (width >= 1280) {
document.getElementById('span_title').innerHTML = 'Full Title';
document.getElementById('span_author').innerHTML = 'Full Author';
} else {
document.getElementById('span_title').innerHTML = 'Short Title';
document.getElementById('span_author').innerHTML = 'Short Author';
}
};
This is called in the body tag, both onload and onresize.
<body onload="jsUpdateSize()" onresize="jsUpdateSize()">
The onload call works correctly. If I change my browser width and refresh the page I get the appropriate text. Unfortunately it does not do this whilst re-sizing the browser.
I have also tried adding
window.onload = jsUpdateSize; // When the page first loads
window.onresize = jsUpdateSize; // When the browser changes size
Unfortunately the same result occurred.
I have tested this script in Firefox, Chrome and IE. All produce the same results.
Any advice would be appreciated.