Menu
I am somewhat of a beginner/ amateur JavaScript developer and have created this function by myself which onload should calculate the client screen dimensions and adjust the width of the div(banner) accordingly leaving only 5px marginleft and 5px from the right edge of the screen. As default, I have set the div width as 1177px but this should change dynamically onload.
Markup below:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
<html xmlns=”
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<style type=”text/css”>
#banner{border:1px solid #CCCCCC; margin-left:5px; margin-top:35px; height:150px; width:1177px;}
</style>
<script>
var banr = document.getElementById(“banner”);
function setScreenVariableElemWidths() {
var wind = 0;
var body = document.window.body;
if (document.body.clientWidth) {
wind = document.body.clientWidth;
if (document.getElementById) {
getWidths(0);
var wdban = banr_wd;
var areaoDisp = wind – (parseInt(banr.style.marginLeft, 10) * 2) + “px”;
if (element.setAttribute) {
saBan = wind – (parseInt(banr.style.marginLeft, 10)
banr.setAttribute(“style”, saBan);
}else if(wdban < areaoDisp){
diffBan = areaoDisp – banr.style.width;
banr.style.width = banr.style.width + diffBan;
}else{
diffBan = banr.style.width – areaoDisp;
banr.style.width = banr.style.width – diffBan;
}
}
}else if(document.documentElement.clientWidth){
wind = document.documentElement.clientWidth;
}else{wind = window.innerWidth;}
}
function getWidths(ban_width){
var banr_wd = banr.style.width;
return banr_wd;
}
</script>
</head>
<body onload=”setScreenVariableElemWidths()”>
<div id=”banner”>
</div>
</body>
</html>
Javascript as follows:
var banr = document.getElementById(“banner”);
function setScreenVariableElemWidths() {
var wind = 0;
var body = document.window.body;
if (document.body.clientWidth) {
wind = document.body.clientWidth;
if (document.getElementById) {
getWidths(0);
var wdban = banr_wd;
var areaoDisp = wind – (parseInt(banr.style.marginLeft, 10) * 2) + “px”;
if (element.setAttribute) {
saBan = wind – (parseInt(banr.style.marginLeft, 10)
banr.setAttribute(“style”, saBan);
}else if(wdban < areaoDisp){
diffBan = areaoDisp – banr.style.width;
banr.style.width = banr.style.width + diffBan;
}else{
diffBan = banr.style.width – areaoDisp;
banr.style.width = banr.style.width – diffBan;
}
}
}else if(document.documentElement.clientWidth){
wind = document.documentElement.clientWidth;
}else{}
}
function getWidths(ban_width){
var banr_wd = banr.style.width;
return banr_wd;
}
Running the script using JSFiddle, It runs perfectly with no errors at all. However embedded within the <head> tags of a HTML document, I get the following results:
Internet Explorer 11.0.9600.16476 Div width is set as set via the style.
Mozilla Firefox 26.0 Div width is set as set via the style. (However using the web console and manually calling the function – the console yields the result: TypeError: document.window is undefined)
Does any one understand this and how to resolve this error? Any tips, pointers, or resolutions will be much appreciated. One idea of mine was to place the entire script within a try/ catch block but I became lost upon deciding what exactly I would be catching and how the catch clause would be coded. Any pointers towards errors/ error handling would also be appreciated.