Scrolling Issues
Can someone help me with why the scroll bars and rows get jacked up once the divider bar gets moved up. The vertical scroll bar never seems to show up on the top grid and if you click on the last row of the bottom grid the rows jump around.
Here is the code below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link id="ctl00_ctl00_shAW" href="/runtime/styles/xp/aw.css" type="text/css" rel="stylesheet" />
<script src="/runtime/lib/aw.js" type="text/javascript"></script>
</head>
<body>
<form name="form1" method="post" id="form1">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;height:100%;">
<tr>
<td style="vertical-align:top;">
<div id="gridDiv1"></div>
<hr style="cursor:N-resize;width:100%;height:5px;" onmousedown="resizeStart(event);" />
<div id="gridDiv2"></div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var dragObj = new Object();
function resizeStart(event){
dragObj.cursorStartY = event.clientY;
if (document.attachEvent) {
document.attachEvent("onmousemove", resizeGo);
document.attachEvent("onmouseup", resizeStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
document.addEventListener("mousemove", resizeGo, true);
document.addEventListener("mouseup", resizeStop, true);
event.preventDefault();
}
}
function resizeGo(event){
var y = dragObj.cursorStartY - event.clientY;
dragObj.cursorStartY = event.clientY;
var cHeight = parseFloat(grid1.getStyle("height").split('p')[0]);
var pHeight = parseFloat(grid2.getStyle("height").split('p')[0]);
if ((cHeight - y) > 50 && (pHeight + y) > 50) {
grid1.setStyle("height", (cHeight - y).toString() + "px");
grid2.setStyle("height", (pHeight + y).toString() + "px");
}
if (document.detachEvent) {
window.event.cancelBubble = true;
window.event.returnValue = false;
} else if (event && event.preventDefault)
event.preventDefault();
}
function resizeStop(event){
if (document.detachEvent) {
document.detachEvent("onmousemove", resizeGo);
document.detachEvent("onmouseup", resizeStop);
} else {
document.removeEventListener("mousemove", resizeGo, true);
document.removeEventListener("mouseup", resizeStop, true);
}
}
var grid1 = new AW.Grid.Extended;
grid1.setId("gridDiv1");
grid1.setSelectionMode("single-row");
grid1.setHeaderText("header");
grid1.setColumnCount(9);
grid1.setFixedLeft(0);
grid1.setCellText(function(col, row){return "grid1 " + col + "-" + row});
grid1.setRowCount(9);
grid1.setStyle("width","100%");
grid1.setStyle("height","250px");
grid1.refresh();
var grid2 = new AW.Grid.Extended;
grid2.setId("gridDiv2");
grid2.setSelectionMode("single-row");
grid2.setHeaderText("header");
grid2.setColumnCount(11);
grid2.setFixedLeft(0);
grid2.setCellText(function(col, row){return "grid2 " + col + "-" + row});
grid2.setRowCount(30);
grid2.setStyle("width","100%");
grid2.setStyle("height","350px");
grid2.refresh();
</script>
</body>
</html>
Here is the code below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link id="ctl00_ctl00_shAW" href="/runtime/styles/xp/aw.css" type="text/css" rel="stylesheet" />
<script src="/runtime/lib/aw.js" type="text/javascript"></script>
</head>
<body>
<form name="form1" method="post" id="form1">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;height:100%;">
<tr>
<td style="vertical-align:top;">
<div id="gridDiv1"></div>
<hr style="cursor:N-resize;width:100%;height:5px;" onmousedown="resizeStart(event);" />
<div id="gridDiv2"></div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var dragObj = new Object();
function resizeStart(event){
dragObj.cursorStartY = event.clientY;
if (document.attachEvent) {
document.attachEvent("onmousemove", resizeGo);
document.attachEvent("onmouseup", resizeStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
document.addEventListener("mousemove", resizeGo, true);
document.addEventListener("mouseup", resizeStop, true);
event.preventDefault();
}
}
function resizeGo(event){
var y = dragObj.cursorStartY - event.clientY;
dragObj.cursorStartY = event.clientY;
var cHeight = parseFloat(grid1.getStyle("height").split('p')[0]);
var pHeight = parseFloat(grid2.getStyle("height").split('p')[0]);
if ((cHeight - y) > 50 && (pHeight + y) > 50) {
grid1.setStyle("height", (cHeight - y).toString() + "px");
grid2.setStyle("height", (pHeight + y).toString() + "px");
}
if (document.detachEvent) {
window.event.cancelBubble = true;
window.event.returnValue = false;
} else if (event && event.preventDefault)
event.preventDefault();
}
function resizeStop(event){
if (document.detachEvent) {
document.detachEvent("onmousemove", resizeGo);
document.detachEvent("onmouseup", resizeStop);
} else {
document.removeEventListener("mousemove", resizeGo, true);
document.removeEventListener("mouseup", resizeStop, true);
}
}
var grid1 = new AW.Grid.Extended;
grid1.setId("gridDiv1");
grid1.setSelectionMode("single-row");
grid1.setHeaderText("header");
grid1.setColumnCount(9);
grid1.setFixedLeft(0);
grid1.setCellText(function(col, row){return "grid1 " + col + "-" + row});
grid1.setRowCount(9);
grid1.setStyle("width","100%");
grid1.setStyle("height","250px");
grid1.refresh();
var grid2 = new AW.Grid.Extended;
grid2.setId("gridDiv2");
grid2.setSelectionMode("single-row");
grid2.setHeaderText("header");
grid2.setColumnCount(11);
grid2.setFixedLeft(0);
grid2.setCellText(function(col, row){return "grid2 " + col + "-" + row});
grid2.setRowCount(30);
grid2.setStyle("width","100%");
grid2.setStyle("height","350px");
grid2.refresh();
</script>
</body>
</html>
Josh
September 29,