www.webdeveloper.com
Results 1 to 6 of 6

Thread: Div Width Setting Function Dependant On Client Screen Width JavaScript

  1. #1
    Join Date
    Jul 2010
    Posts
    25

    Angry Div Width Setting Function Dependant On Client Screen Width JavaScript

    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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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) * 2) + "px";
    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) * 2) + "px";
    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.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <style type="text/css">
    body{padding:0px 0px;margin:0px 0px;}
    #banner{border:1px solid #CCCCCC; margin-top:35px; height:150px; width:1177px; text-align:center;}
    #result{margin-top:10px;text-align:center;}
    </style>
    <script type="text/javascript">
    var marg=5;
    function doc(id){return document.getElementById(id);}
    function banrResize(id){
    var wd=document.body.offsetWidth;
    doc('banner').style.width=(wd-2-marg*2)+'px'; // the 2 is twice border width
    doc('banner').style.marginLeft=marg+'px';
    doc('result').innerHTML='<div>document.body.offsetWidth = '+wd+';<br />marg = '+marg+';<br />document.getElementById("banner").offsetWidth = '+doc('banner').offsetWidth+'</div>';
    }
    
    window.onload=window.onresize=banrResize;
    </script>
    </head>
    <body>
    <div id="banner"><img src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif" /><h1>BANNER</h1></div>
    <div id="result"></div>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jul 2010
    Posts
    25
    Thanks padonak, that works perfectly. I was going to ask if there is any way that you know of that would enable me to fix the error on my code. Being that error is TypeError: document.window is undefined. Or if there any sources you could point me to where I could find myself. I have searched document.window with very little luck and still in the process of learning try/ catch and Javascript errors. Any books or websites?

    much appreciated,

    Thanks

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    don't try searching 'document.window' because you'll never find it. it doesn't exist. if you want to refer the body element, use document.body
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Jul 2010
    Posts
    25
    O sweet thanks

  6. #6
    Join Date
    Aug 2006
    Posts
    1,917
    Just in case this is useful - html/css version of it:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Box Sizing</title>
    	<meta charset="utf-8">
    	<style type="text/css">
    	#banner { 
    		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
    		box-sizing: border-box;         /* Opera/IE 8+ */
    		border:1px solid #CCCCCC; margin-top:35px; height:150px;text-align:center;
    		padding:5px;
    		}
    	</style>
    </head>
    
    <body>
    <div id="banner">
    	<img src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif">
    	<h1>BANNER</h1>
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles