get dimensions of browser via javascript
I am trying to get the dimensions of my browser window using java script. The function I am using to do this is:
function getDimensions(){
var myWidth = document.documentElement.clientWidth;
var myHeight = document.documentElement.clientHeight;
var returnstring = myWidth+','+myHeight;
document.applets[0].postDimensions(returnstring);
}
But the width and the height returned are both zero. I don't understand why.
The source is listed below.
<html>
<head>
<title>Emscribe Dx Review Screen</title>
<style type="text/css">
body {
text-align: left; /* for IE */
}
#container {
text-align: left; /* counter the body center */
/*width: 1250px; */
}
</style>
</head>
<BODY id="App1" style=" height:50%;" BGCOLOR="#3D59AB">
<div id="container" style="height:75%">
<div name= "buttonbar" id = "buttonbar" style="cursor:wait;" style="width:100%;
height:5%;">
<SCRIPT LANGUAGUE = "JavaScript" src="scripts/ingenix.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function getDimensions(){
var myWidth = document.documentElement.clientWidth;
var myHeight = document.documentElement.clientHeight;
var returnstring = myWidth+','+myHeight;
document.applets[0].postDimensions(returnstring);
}
</SCRIPT>
<FORM NAME="CODINGFORM">
<TABLE cellpadding=5 cellspacing=3 border=2 width="100%" height="10%" Align="left">
<tr width="100%">
<td width="15%" align="center">
<input type="text" name="AccountNumber" id="AccountNumber" size="12" title="Enter
the account to be downloaded here."
onkeypress="keydownpress(this.form)" style="cursor:wait; font-weight: bold; "
disabled=true />
<font style="display:block;" color="white" size="2" face="arial">Account</font>
<div style="display:inline;">
<div style="display:inline; float:left;">
<button name="download" value="download" type="button" disabled=true
style="background-color:white; color:black; cursor:wait;"
title = "Click here to download an account." onClick="doDownload(this.form)">
<img src="picts/down.gif" alt="" width="20" height="20" name="downimage"/>
</button>
<font style="display:block; font-size: 11px;" color="white" face="arial"
id="downfont"> Download</font>
</div>
<div style="display:inline; float:right; margin-right: 5px;">
<button name="save" value="save" type="button"
style="background-color:white; color:black; cursor:wait;" disabled=false
onClick="doSave()"
title = "Click here to save your work.">
<img src="picts/save.png" alt="" width="20"
height="20" id="saveimage"/>
</button>
<font style="display:block; font-size: 11px;"
color="white" face="arial" id="savefont"> Save</font>
</div>
</div>
<div style="display:inline; float:none; margin-right: 5px;">
<button name="upload" value="upload" type="button" style="background-color:white;
color:black; cursor:wait;" disabled=true
onClick="doUpload()"
title = "Click here to return account to database.">
<img src="picts/gup.gif" alt="" width="20" height="20" id="upimage"/>
</button>
<font style="display:block; font-size: 11px;" color="gray" face="arial"
id="upfont"> Upload</font>
</div>
</div>
</td>
<td width="7%" height="75" align=center>
<button name="encode" value="encode" type="button" style="background-color:white;
color:black; cursor:wait;" disabled=true title = "Click here when ready to send
entries to encoder." onClick="doEncoding()">
<img src="picts/e.gif" alt="" width="20" height="20" />
</button>
<br><font color="white" size="2" face="arial"> Encoder</font></td>
<td width="10%" align="center">
<div style="text-align:center;">
<span style="text-align:center; display:block;"><button name="warning" value="warning"
type="button" disabled = true style="cursor:wait
style="background-color:white; color:black;"
onClick="displayDrgElements()">
<img src="picts/greywarning.gif" alt="" width="20" height="20" name="warningimg"/>
</button>
</span>
<span style="text-align:center; display:block;"><input type="text" align="center"
name="RDRG" id="RDRG" size="10" disabled = true title="Running DRG."
style="height:20px; font-size: 10px; padding-bottom:0px; margin-bottom:0px;"
readonly/></span>
<span style="text-align:center; display:block;"><font id="runningD" color="white"
size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px;
display:block;">Running DRG</font></span>
</div>
<div style="text-align:center;">
<span style="text-align:center; display:block;"><input type="text" align="center"
name="reimburse" id="reimburse" size="10" style="cursor:wait; height:20px; font-size:
10px; padding-bottom:0px; margin-bottom:0px;" disabled = true title="Running DRG."
readonly/></span>
<span style="text-align:center; display:block;"><font id="EstReimburse" color="white"
size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px;
display:block;">Est. Reimburse</font></span>
</div>
</td>
<td align=center>
<div style="float:left; height: 100px;">
<div id="bannerOption1Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption1Source"
id="bannerOption1SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption1TextId" color="white" size="2" face="arial" style="font-size:
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
<div id="bannerOption2Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption2Source"
id="bannerOption2SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption2TextId" color="white" size="2" face="arial" style="font-size:
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
<div id="bannerOption3Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption3Source"
id="bannerOption3SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption3TextId" color="white" size="2" face="arial" style="font-size:
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
</div>
<div style=" margin-left:10px; float:left; height: 100px;">
<div id="bannerOption4Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption4Source"
id="bannerOption4SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption4TextId" color="white" size="2" face="arial" style="font-size:
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
<div id="bannerOption5Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption5Source"
id="bannerOption5SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption5TextId" color="white" size="2" face="arial" style="font-size:
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
<div id="bannerOption6Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption6Source"
id="bannerOption6SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption6TextId" color="white" size="2" face="arial" style="font-size:
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
</div>
<div style=" margin-left:10px; float:left; height: 100px;">
<div id="bannerOption7Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption7Source"
id="bannerOption7SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption7TextId" color="white"开发者_开发百科 size="2" face="arial" style="font-size:
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
<div id="bannerOption8Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption8Source"
id="bannerOption8SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption8TextId" color="white" size="2" face="arial" style="font-size:
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
<div id="bannerOption9Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption9Source"
id="bannerOption9SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption9TextId" color="white" size="2" face="arial" style="font-size:
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
</div>
<div style=" margin-left:10px; float:left; height: 100px;">
<div id="bannerOption10Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption10Source"
id="bannerOption10SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption10TextId" color="white" size="2" face="arial" style="font-
size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
<div id="bannerOption11Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption11Source"
id="bannerOption11SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption11TextId" color="white" size="2" face="arial" style="font-
size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
<div id="bannerOption12Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption12Source"
id="bannerOption12SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption12TextId" color="white" size="2" face="arial" style="font-
size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
</div>
<div style=" margin-left:10px; float:left; height: 100px;">
<div id="bannerOption13Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption13Source"
id="bannerOption13SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption13TextId" color="white" size="2" face="arial" style="font-
size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
<div id="bannerOption14Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption14Source"
id="bannerOption14SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption14TextId" color="white" size="2" face="arial" style="font-
size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
<div id="bannerOption15Div" width="10%" align=center style="display:none">
<input disabled=true type="text" name="bannerOption15Source"
id="bannerOption15SourceId" size="20" style="height:20px; font-size: 12px; padding-
bottom:0px; margin-bottom:0px;"/>
<font id="bannerOption15TextId" color="white" size="2" face="arial" style="font-
size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
</div>
</div>
</td>
<td id="emDropDownContainer" width="9%" align=center style="display:none">
<font color="white" size="2" face="arial">CPT Code</font>
<br>
<div id="cptDiv">
<select id='selCptId' name='selectedCptId'>
<option value="-1">--None--</option>
</select>
</div>
</td>
</tr>
</table>
</FORM>
</div>
<div style="width:100%; height:89%; margin-left:0px;>
<TABLE cellpadding=0 cellspacing=0 border=0 width="100%" height="90%">
<tr style="height:100%;">
<td VALIGN="TOP">
<div style="visibility:visible; background:white; foreground:black; font-
size:200%; width:100%; height:10%; margin-left:100px; margin-top:5px; margin-
right:100px; text-align:center; cursor:wait;" id="msgdiv">
<p> Please wait while Fusion CAC Loads </p>
</div>
<div align="center" style="cursor:wait; height:100%;" id="divapp"
name="divapp" >
<APPLET NAME="RevApp2" CODE="RevApp2.class" id="myapplet" name="myapplet"
style="visibility:hidden;"
ARCHIVE ="CoderDx.jar,xpp3-1.1.3.4.C.jar,xml-apis.jar,jcommon-
1.0.16.jar,jfreechart-1.0.13.jar,MultiSplit.jar,balloontip-1.1.1.jar,artificialmed.jar"
WIDTH=99% HEIGHT=100%>
<PARAM NAME = USERID VALUE = "#DxWebTemplate" />
<PARAM NAME = URL VALUE = "#IPAddress" />
<PARAM NAME = PATHNAME VALUE = "#PathName" />
<PARAM NAME = SessionID VALUE = "#SessionID" />
<PARAM NAME = Role VALUE = "#Role" />
</APPLET>
</div>
</TD>
</TR>
</table>
</div>
</div>
</BODY>
</HTML>
The original code was obtained by doing a Google search. As we know, Google searches do not always provide the correct answer. I am aware that there is antiquated code in this html but that is not a priority right now. To the point, the answer was found on another web page. I post for others benefit:
function getDimensions()
{
var myWidth = document.documentElement.offsetWidth;
var myHeight = document.documentElement.offsetHeight;
var returnstring = myWidth+','+myHeight;
document.applets[0].postDimensions(returnstring);
}
加载中,请稍侯......
精彩评论