Firefox problem with grid inside a div

Using Firefox 1.03 I am viewing a grid inside of a div. The div is smaller than the total grid size. The scroll bars show up, but if I use them, the areas that didn't fit in the div before scrolling show up blank. In IE though, you can scroll over and see the additional columns. Any thoughts? Is there a suggested fix for this already out there?

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>


<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>


<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>


<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>

Corbin,
Thanks for joining this two samples,
I found a work-around for Mozilla (better than a full refresh) playing with colum-resizing.

Inside genresize.js (and at the end of the conditional clause block of) :

//Dragging starts here
if(theobject != null) {

there is :
window.event.returnValue = false;
window.event.cancelBubble = true;

just before them paste this :

if (el.firstChild.className == "active-controls-grid gecko"){
obj.getTemplate("layout").action("adjustSize");
}

I am still trying to do it more "generic" (replacing "obj" with something like "this.parentNode" , but no luck).
If got any solution for this, Please Advice
HTH

Carlos,
Great fix! You don't have to check browser type, if you don't want for that. Anyhoot, thanks. Down to one last issue for the app I was thinking of. In IE, Firefox is fine. When using the scroll bars, this often triggers a resize as well. I am looking into this, but I am guessing you have hit against it too. I you already have a solution or just don't see this issue....please share. Thanks!

Yeah, the example you posted works the same way. Grab on fairly right of the horz scoll bar or fairly down on the vert scoll bar and scroll....it will resize as well??? Huh, I will have to look into this...

I found that:
if (theobject.el.firstChild.className == "active-controls-grid gecko")
reduces the fails (and could be faster ??)
Also, have you notice that dragging sometimes resize the "DIV" into a smaller one??

dragging sometimes resize the "DIV" into a smaller one??
Only under Firefox 1.0.1
Thanks

Maybe the statement isn't necessary for me as I have been playing with different ie emu and am trying to just get down to one set of code. I don't ever have "failures" for the adjustSize, but I guess it is probably faster for the user of ie, if I check, so they don't have wait for the adjustSize to complete. I have had dragging resize the grid, but only if I am very close to the edge, where it could be ambiguous. This is even in Firefox 1.0.3.

Yes, I can replicate scroll-bars and resize,
seems to be like a focus() issue,
Did you try forcing focused ??

No, but I will. At work now. Will try tonight. If you already find it works by then please post fix.

Curious, (No fix yet), but FYI the bug stops with a right-mouse-click
I need a (four button mouse !!!) - :-)
I'll try a few more next days, to find better solution (I hope)
Thanks

I have a new genresize that fixes the following bugs (probably should clean up code now).
1) if you scrolled to the right and then grabbed the scroll bar on the right to scroll back, grid would start resizing even though you weren't near the edge. This is b/c window.event.offsetX does not subtract out the amount you have scrolled. Ie if you found the xPos within the div and then scrolled over shifting the inside by 200px, and found xPos again it would be 200px larger. Fix by using:
if (yPos-event.srcElement.scrollTop<offset) dir += "n";
else if (yPos-event.srcElement.scrollTop > el.offsetHeight-offset) dir += "s";
if (xPos-event.srcElement.scrollLeft<offset) dir += "w";
else if (xPos-event.srcElement.scrollLeft > el.offsetWidth-offset) dir += "e";
return dir;
notice the use of scrollLeft/scrollTop

2) if you grab the very top of a cell or the far left of a cell, you could click and drag and resize the grid, even though you were on the edge of the cell not the grid... the reason for this is the function getreal returns a valid value if, the element at the body level, not necessarily the one you are in ie...
if you have
<body>
<div class="resizeMe">
<div>
something
</div>
</div>
and you clicked on the edge of the inner div, it would return a valid direction because the class of the div at the body level (not within another div) was class resizeMe.
I have no idea why they wanted it this way, but it seems planned.
The fix for this, is replace ever instance of:
var el = getReal(event.srcElement, "className", "resizeMe");
with
var el = event.srcElement;
but then you can resize the div within each cell...so, you have to add this if statement around the block of code within doDown shown here..

if (el.className == "resizeMe") { //added if
theobject = new resizeObject();

theobject.el = el;
theobject.dir = dir;

theobject.grabx = window.event.clientX;
theobject.graby = window.event.clientY;
theobject.width = el.offsetWidth;
theobject.height = el.offsetHeight;
theobject.left = el.offsetLeft;
theobject.top = el.offsetTop;

} //add end if

or it will still create theobject and because you are now using the scrElement instead of the one at the body level it will resize inside the cell instead of the grid.

3) if you clicked near the edge, even where it wasn't showing the resize arrow pointers and dragged the mouse it would resize.

The fix for this is simple. Make the padding of your div of class resizeMe equal the variable offsets value in getDirection.

Anyhoot... here is the new genresize.js

/////////////////////////////////////////////////////////////////////////
// Generic Resize by Erik Arvidsson //
// //
// You may use this script as long as this disclaimer is remained. //
// See www.dtek.chalmers.se/~d96erik/dhtml/ for mor info //
// //
// How to use this script! //
// Link the script in the HEAD and create a container (DIV, preferable //
// absolute positioned) and add the class="resizeMe" to it. //
/////////////////////////////////////////////////////////////////////////
//last modified, by corbin champion 6/5/05
//details of that fix in active widgets forum

var theobject = null; //This gets a value as soon as a resize start

function resizeObject() {
this.el = null; //pointer to the object
this.dir = ""; //type of current resize (n, s, e, w, ne, nw, se, sw)
this.grabx = null; //Some useful values
this.graby = null;
this.width = null;
this.height = null;
this.left = null;
this.top = null;
}

//Find out what kind of resize! Return a string inlcluding the directions
function getDirection(el) {
var xPos, yPos, offset, dir;
dir = "";

xPos = window.event.offsetX;
yPos = window.event.offsetY;

offset = 4; //The distance from the edge in pixels
if (yPos-event.srcElement.scrollTop<offset) dir += "n";
else if (yPos-event.srcElement.scrollTop > el.offsetHeight-offset) dir += "s";
if (xPos-event.srcElement.scrollLeft<offset) dir += "w";
else if (xPos-event.srcElement.scrollLeft > el.offsetWidth-offset) dir += "e";
return dir;
}

function doDown() {
//var el = getReal(event.srcElement, "className", "resizeMe");
var el = event.srcElement;
if (el == null) {
theobject = null;
return;
}

dir = getDirection(el);

if (dir == "") return;

if (el.className == "resizeMe") {
theobject = new resizeObject();

theobject.el = el;
theobject.dir = dir;

theobject.grabx = window.event.clientX;
theobject.graby = window.event.clientY;
theobject.width = el.offsetWidth;
theobject.height = el.offsetHeight;
theobject.left = el.offsetLeft;
theobject.top = el.offsetTop;

}

window.event.returnValue = false;
window.event.cancelBubble = true;
}

function doUp() {
if (theobject != null) {
theobject = null;
}
}

function doMove() {
var el, xPos, yPos, str, xMin, yMin;
xMin = 8; //The smallest width possible
yMin = 8; // height

el = event.srcElement;

if (el.className == "resizeMe") {
str = getDirection(el);
//Fix the cursor
if (str == "") str = "default";
else str += "-resize";
el.style.cursor = str;
}

//Dragging starts here
if(theobject != null) {
if (dir.indexOf("e") != -1)
theobject.el.style.width = Math.max(xMin, theobject.width + window.event.clientX - theobject.grabx) + "px";

if (dir.indexOf("s") != -1)
theobject.el.style.height = Math.max(yMin, theobject.height + window.event.clientY - theobject.graby) + "px";

if (dir.indexOf("w") != -1) {
theobject.el.style.left = Math.min(theobject.left + window.event.clientX - theobject.grabx, theobject.left + theobject.width - xMin) + "px";
theobject.el.style.width = Math.max(xMin, theobject.width - window.event.clientX + theobject.grabx) + "px";
}
if (dir.indexOf("n") != -1) {
theobject.el.style.top = Math.min(theobject.top + window.event.clientY - theobject.graby, theobject.top + theobject.height - yMin) + "px";
theobject.el.style.height = Math.max(yMin, theobject.height - window.event.clientY + theobject.graby) + "px";
}

obj.getTemplate("layout").action("adjustSize");

window.event.returnValue = false;
window.event.cancelBubble = true;
}
}

function getReal(el, type, value) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if (eval("temp." + type) == value) {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}

document.onmousedown = doDown;
document.onmouseup = doUp;
document.onmousemove = doMove;

Wow! Corbin
Good Job!
Just two minnor issues
If I don't maintain "offset = 8" ,then resize cursor is not shown (over down and left borders)
And by doing so, sometimes the cursor still (in resizable mode) even outside or clicking.
But anyway, You solve the big Bug.
Thanks,

Do you have the code for this? Could you create an example? Because for me, this issue doesn't show up. I changed several things from my first example, so it is possible I left something out.

Again Sorry, cause only happens on Firefox or Mozilla and not on IE
I too chage things since that ( but I'll try to replicate it)
Now testing a different drag-resize product (include more features).
Interested in join our efforts?
I'll keep you informed
Thanks

Sure, about joining efforts. I am pretty happy with what I have now. May move the drag to be a whole bar across top as opposed to corner, but mostly happy now. I really want to know if you find bugs, such as the one you described, whether I see it or not so I can verify that my code is robust in that nature and I can help if I have already been there and solved the given issue. This is part of a larger project I am working on. I will have a example of the whole thing up soon. (hopefully a week or so) In the mean time would be willing to share code, discuss etc.

I can replicate it in IE (with your code) see:
with offset=4
http://www.telefonica.net/web2/webtress/awsamp/examples/corbin_orig.html
with offset=8
http://www.telefonica.net/web2/webtress/awsamp/examples/corbin_offset8.html

For me in the first one it's not possible to resize (on bottom or right borders)
Could you please confirm ?

I am wondering that (if you could not) maybe it is because you are using a different ieemu ??

It does not resize for me either and I have no IE addon tools installed at all. ORIG does not resize and OFFSET8 does resize. In FireFox 1.04 neither grid works at all. I get an outline and the drag box (which does work by the way) but no grid content.

Hey Jim, Thanks for your Input and testing,
And yes, none of the samples "grids-content" (at this Hosting) is shown under Firefox (maybe a DOCTYPE restriction ??) I'll do some try over this. But if you run (almost all of them) "locally", I am sure it does.

sorry been gone for a while. let me look at this during the weekend.

I found a small trick to work-around the resize, (making it generic):

eval(theobject.el.firstChild.getAttribute("objname") + ".getTemplate('layout').action('adjustSize')") ;

needs to define a new Attribute in the page (same name as object):
obj.setAttribute("objname", "obj");

Nope.
Shoul be two nested childs instead of just one.....
But sorry not working at all (it does on other samples), but in current case loose the object pointer ( mousedown & moseup events ).
You can see it by:
var aaid = theobject.el.firstChild.firstChild.id ;
alert(aaid);
Only OK for theobject.el.id
So... back again

My last post have an answer, if I can only ask for "theobject.el.id"
then, the new Attribute (name) should be applied to te outer DIV by:

document.getElementById("DivCont1").name = "obj"; /// (same name as object again)
So you can replace genresize.js line:

obj.getTemplate("layout").action("adjustSize");
with:
eval(theobject.el.name).getTemplate('layout').action('adjustSize');

It is also a dirty work-around , but at least you can "play" (if need to display a different grid into same Div) without modifying .js file.

Carlos,

>>And yes, none of the samples "grids-content" (at this Hosting) is
>>shown under Firefox (maybe a DOCTYPE restriction ??) I'll do some
>>try over this. But if you run (almost all of them) "locally", I am sure it
>>does.

Could you find any resolution for the grid issue in firefox ?
As you said, it works fine locally but not over a server.

The grid on the activewidgets home page seems to show up well on the same version of firefox.

Alex, are you doing some magic for firefox :-)

Carlos,

When I delete the local file, gecko.xml, then I got the same FireFox grid-content problem.
I think that this means that the link (-moz-bindings) between grid.css and gecko.xml is not working?
Maybe by reviewing these connections you can get it workingâ¦ ?
Or is it possible that there is a sort of redirection/reload in your site ?
Just trying to help.

The only thing I can not get working on your site or locally is the Drop-Down Form
On IE I dblclick on a grid-item and a detail window pops-up as it should.
On FireFox I dblclick on an item and nothing happens.

Thanks for your help,

Thanks a lot for your help Rony,
I will do some test around what you found.
The only thing I discover from now is:
By replacing [inside a header of a page (locally)] the llinks to grid.css and grid.js with it's full code I get same bug result, so could be same
broken-link with gecko.xml as you say.
Thanks again
Carlos

Regarding the Drop-Down Form
The confict with mozilla are the lines:

OBJNAME = this.element().parentNode.parentNode.parentNode.objname ;
OBJID = this.element().parentNode.parentNode.parentNode.objid ;

I found a better way to solve it (something like what I am doing inside the query expression builder template)

Forum search