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?

Corbin

June 1,

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.

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();

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

June 3,

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!

Corbin

June 3,

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

Corbin

June 3,

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

Carlos

June 3,

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

Carlos

June 3,

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.

Corbin

June 3,

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

Carlos

June 3,

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

Corbin

June 3,

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

Carlos

June 3,

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

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

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,

Carlos

June 6,

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.

Corbin

June 7,

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

Carlos

June 7,

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.

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

Carlos

June 8,

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

Carlos

June 8,

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.

Jim Hunter

June 10,

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.

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

Carlos

June 17,

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

Carlos

June 17,

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:

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

June 23,

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

Shyam

September 6,

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,

Rony.

September 8,

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

Search

Version 2

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.