Window resize script has an unexpected side effect
I wrote a short javascript to resize a popup window when an element is added to the page. For some reason each time a new element is added the width of the window decreases by 4 pixels, even though it should stay the same because the width of added elements is always the same.
Any idea what could be causing this ?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript">
function resizeWin(){
var winHeight=document.getElementById('bodyArea').offsetHeight;
var winWidth=document.g开发者_运维问答etElementById('bodyArea').offsetWidth;
alert(winWidth);
window.resizeTo(winWidth+20,winHeight+80);
}
</script>
</head>
<body onLoad="javascript:resizeWin()">
<div id="bodyArea" style="overflow: hidden;">
<form id="courseDetails" action="/CourseRegistration/Courses" method="POST" width: 300px">
<table>
//blah blah, constant size
</table>
<input type="button" value="Add Session" onclick="addRow('addCourse');resizeWin();" />
<input type="button" value="RemoveSession" onclick="deleteRow('addCourse');resizeWin();" />
<table id="addCourse" border="1">
<tr>
<td><input type="checkbox" name="chk"/></td>
<td>
<select name="day">
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
</td>
<td>
<select name="start">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>
<select name="duration">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Submit" name="addCourse" />
</form>
</div>
</body>
</html>
On the
<form id="courseDetails" action="/CourseRegistration/Courses" method="POST" width: 300px">
You're missing the openning =" of the width; try width="300px" maybe thats making some bug.
Try this to ensure that body fit window:
BODY{
width:100%;
height:100%;
padding:0;
margin:0;
}
加载中,请稍侯......
精彩评论