onload.jsReturn to the Documentation page
  

‘The onload.js file is a javascript file which gets called automatically when certain pages are loaded onto the user’s machine. It is responsible for formatting the datagrid web control [gridMP] depending on the user's screen resolution - notably the width of the control and the font sizes for the items displayed within it.’

‘The init function runs first and extracts the name of the file being loaded using 'location.pathname' and puts the result into a variable [MyURL]. A switch...case... block then determines what function to run depending on what file has been loaded onto the user's machine.’

‘If the file is either partygains.aspx or swingstats.aspx, etc then run the doAddStyles function which can be seen below. Otherwise if the file loaded is either partymps.aspx or countrymps.aspx or... then run the doAddStyles1 function, which can also be seen further down the page.’

function init() {
MyURL = location.pathname;
switch (MyURL) {
case "/election2005/partygains.aspx" : case "/election2005/swingstats.aspx" : case "/election2005/mostvulnerable.aspx" : case "/election2005/displayMPs.aspx" : case "/election2005/displayByelections.aspx" :
doAddStyles();
break;
case "/election2005/partymps.aspx" : case "/election2005/countrymps.aspx" : case "/election2005/regionalmps.aspx" :
doAddStyles1();
break;
}
}

‘The doAddStyles function formats the datagrid web control [gridMP] depending on the screen resolution. If the screen width is higher than 1250 pixels then the appropriate styles are added to the page's stylesheet - insertRule is used for non-Internet Explorer browsers like Firefox and Opera whilst addRule is used for the IE versions. 'If (self.innerHeight)' is used to quickly determine the browser, as all the main browsers except Internet Explorer recognize this syntax.’

‘Similarly for screen widths lower than 1250... - the font size for the grid is reduced as is the width of the control on the page. The class 'lowerfont' is applied to those items in the grid which otherwise would wrap within the cell - usually where the number of characters is over 30. Typically this means the constituency and winning party columns.’

function doAddStyles() {
if (window.screen.width > 1250 ) {
if (self.innerHeight) {
document.styleSheets[0].insertRule(".gridMP {font-size:16px; width:980}",0);
document.styleSheets[0].insertRule(".lowerfont {font-size: 16px}",0);
}
else {
document.styleSheets(0).addRule(".gridMP", "font-size: 16px; width:980");
document.styleSheets(0).addRule(".lowerfont", "font-size: 16px");
}
}
else if (window.screen.width > 1000 ) {
if (self.innerHeight) {
document.styleSheets[0].insertRule(".gridMP {font-size:16px; width:900}",0);
document.styleSheets[0].insertRule(".lowerfont {font-size: 14px}",0);
}
else {
document.styleSheets(0).addRule(".gridMP", "font-size: 16px; width:900");
document.styleSheets(0).addRule(".lowerfont", "font-size: 14px");
}
}
else { if (self.innerHeight) {
document.styleSheets[0].insertRule(".gridMP {font-size:12px; width:720}",0);
document.styleSheets[0].insertRule(".lowerfont {font-size: 10px}",0);
}
else {
document.styleSheets(0).addRule(".gridMP", "font-size: 12px; width:720");
document.styleSheets(0).addRule(".lowerfont", "font-size: 10px");
}
}
}

‘Similarly for the doAddStyles1 function....’

function doAddStyles1() {
if (window.screen.width > 1250 ) {
if (self.innerHeight) {
document.styleSheets[0].insertRule(".gridMP {font-size:16px; width:1080}",0);
document.styleSheets[0].insertRule(".lowerfont {font-size: 16px}",0);
}
else {
document.styleSheets(0).addRule(".gridMP", "font-size: 16px; width:1080");
document.styleSheets(0).addRule(".lowerfont", "font-size: 16px");
}
}
else if (window.screen.width > 1000 ) {
if (self.innerHeight) {
document.styleSheets[0].insertRule(".gridMP {font-size:16px; width:900}",0);
document.styleSheets[0].insertRule(".lowerfont {font-size: 12px}",0);
}
else {
document.styleSheets(0).addRule(".gridMP", "font-size: 16px; width:900");
document.styleSheets(0).addRule(".lowerfont", "font-size: 12px");
}
}
else {
if (self.innerHeight) {
document.styleSheets[0].insertRule(".gridMP {font-size:12px; width:800}",0);
document.styleSheets[0].insertRule(".lowerfont {font-size: 10px}",0);
}
else {
document.styleSheets(0).addRule(".gridMP", "font-size: 12px; width:800");
document.styleSheets(0).addRule(".lowerfont", "font-size: 10px");
}
}
}

***********************************************