I take that back, it is only after I resize the div that the scroll bars and what is visible is messed up. You can try the following with the code from the resizable grid example also included. In IE after a drag or resize all is fine. Use upper left to drag and any edge to resize.
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style>
body, html {margin:0px; padding: 0px; overflow: hidden;border:none}
.line, .line2 {
color: #009;
font-family: Tahoma, MS Sans Serif, helvetica;
font-weight: bold;
font-size: 11px;
margin-bottom: 5px;
}
.line2 {
font-weight: normal;
}
.loading {
width:400px;
height:20px;
background:url('runtime/styles/xp/loading.gif') no-repeat;
}
</style>
<!-- grid data -->
<script>
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];
var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
window.focus;
</script>
<script type="text/javascript">//<![CDATA[
//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// See
http://www.brainjar.com for terms of use.
//*****************************************************************************
// Determine browser and version.
function Browser() {
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
var browser = new Browser();
// Global object to hold drag information.
var dragObj = new Object();
dragObj.zIndex = 0;
function dragStart(event, id) {
var el;
var x, y;
// If an element id was given, find it. Otherwise use the element being
// clicked on.
if (id)
dragObj.elNode = document.getElementById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.srcElement;
if (browser.isNS)
dragObj.elNode = event.target;
// If this is a text node, use its parent element.
if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
}
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Save starting positions of cursor and element.
dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);
if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;
// Update element's z-index.
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
// Capture mousemove and mouseup events on the page.
if (browser.isIE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
event.preventDefault();
}
}
function dragGo(event) {
var x, y;
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Move drag element by the same amount the cursor has moved.
dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";
if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}
function dragStop(event) {
// Stop capturing mousemove and mouseup events.
if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}
//]]></script>
</head>
<body>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="runtime/lib/grid.js"></script>
<script language="javascript" src="lib/genresize.js"></script>
<script language="javascript" src="lib/ieemu.js"></script>
<script language="javascript">
if (moz) {
extendElementModel();
extendEventObject();
emulateEventHandlers(["mousemove", "mousedown", "mouseup"]);
}
</script>
<!-- grid format -->
<style>
.active-controls-grid {width: 100%; height: 100%; font: menu;}
.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-templates-row.gecko {
display: -moz-box;
width: auto;
min-width: 100%;
}
.active-row-highlight {background-color: #ddeeff!important}
.active-row-highlight .active-row-cell {background-color: #ddeeff;}
.active-mark-true .active-column-2 {color: #f00}
</style>
<DIV class="resizeMe" id="DivCont1">
<script>
try {
document.getElementById('DivCont1').style.position = "absolute";
document.getElementById("DivCont1").style.height = "252px";
document.getElementById("DivCont1").style.width = "525px";
document.getElementById("DivCont1").style.left = "0px";
document.getElementById("DivCont1").style.top = "0px";
document.getElementById("DivCont1").style.overflow = "hidden";
document.getElementById("DivCont1").style.cursor = "s-resize";
var stylesheetX = document.styleSheets[document.styleSheets.length-1];
stylesheetX.addRule('#DivCont1', 'left: 50px');
stylesheetX.addRule('#DivCont1', 'border: black 4px solid');
var table = new Active.Text.Table;
//The data model should know the URL of the file.
table.setProperty("URL", "companies.txt");
//And you should ask the model to start loading the file.
table.request();
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// set number of rows/columns
//obj.setRowProperty("count", 20); let be determined by file
obj.setColumnProperty("count", 5);
// provide cells and headers text
//obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
//it is assigned our new external data model.
obj.setModel("data", table);
// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
obj.setSelectionMultiple(true);
var alternate = function(){
return this.getProperty("row/order") % 2 ? "#fcfaf6" : "#ffffff";
}
var mark = function(){
var i = this.getProperty("row/index");
return (i==2 || i==4 || i==5) ? true : false;
}
var row = new Active.Templates.Row;
row.setStyle("background", alternate);
row.setClass("mark", mark);
row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");
obj.setTemplate("row", row);
// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
//text of top left corner
obj.getLayoutTemplate().setContent("corner/box/item", "Drag");
//EVENT of top left corner
var corner = obj.getLayoutTemplate().getContent("corner");
//corner.setEvent("onmousedown", "DragtheGrid");
corner.setEvent("onmousedown", "dragStart(event, 'DivCont1')");
// disable scroll if desired
obj.getTemplate("top/item").setEvent("onmousedown", null);
// write grid html to the page
window.setTimeout(function(){
try {
document.getElementById("DivCont1").innerHTML = obj;
}
catch(e){
}
}, 100);
}
catch(e){
}
</script>
</div>
</body>
</html>