[Dojo-interest] more on Dialog - followScroll

[Stephen Paulsen]

Hi all,

I'm a veteran programmer but know javascript only so-so, have been 
twiddling with html, css, and the dom as a hobby for several years, 
and am new to Dojo. This is my first major project with Dojo for a 
webapp.  Sorry for the length here, but I'm trying to be as clear as 
possible.

I'm working with a Dialog that I now have (mostly) working how I want,
but I have a problem with the dialogUnderlay protecting the rest of
the page.  The page can be scrolled and the dialog and dialogUnderlay
both scroll with it, even though I have followScroll:true defined in
the options.

The same thing happens when I try the unit tests installed locally or
running them directly from dojotoolkit at
   http://archive.dojotoolkit.org/nightly/tests/widget/test_Dialog.html
The dialog comes up, but I can scroll the page and select text that
isn't covered by the dialogUnderlay, and can even "Show Second Dialog"
and get them both showing at the same time.

My development environment is:
   Dojo 4.1 rev 6824
   Firefox 1.5.0.9
   Redhat Fedora Core 6 (uname -r="2.6.18-1.2869.fc6")

Tracing through Dialog.js shows that it *is* hooking the onscroll event...
   line 255: dojo.event.connect(window, "onscroll", this, "_onScroll");
but when I scroll after the dialog appears an onscroll event is never
fired -- that is, a breakpoint in _onScroll() @ line 298 is never hit.


I've been trying some possible workarounds ...

One thing I've done is to expand the dialogUnderlay so instead of 
covering just the viewport it covers the whole page:

    pageBox = dojo.html.getMarginBox(dojo.body());
       /* more setup, show the dialog */
    dojo.html.setMarginBox(underlay, pageBox);
    dojo.html.setStyleAttributes(underlay, "top:0px; left:0px;")

This works great, making the dialogUnderlay the same size and position 
as the body; covering the whole page. The page can still be scrolled 
and the dialog itself can be scrolled out of view, but the page is 
protected by the underlay and I can live with that. The only problem 
is that when the browser is resized the underlay and dialog are 
repositioned, so I'll have to catch that and fix it again - or hack 
the Dialog.js code to leave the underlay alone.


The other thing I've tried is to make the page unscrollable when the 
dialog appears, by adding:

    dojo.html.setStyleAttributes(dojo.body(), "overflow:hidden;");

which works, but makes the page scroll back to the top. I can't have 
that because the selected record that's being edited (in my dialog) is 
highlighted and is supposed to stay in view.  To try and fix that I added:

    dojo.html.scrollIntoView(selectedItem);

which brings it into view, but at the bottom of the viewport. It also 
makes the page "flash" as it jumps to the top then brings the item 
back into view.  I also can't seem to find a way to put the clicked 
item back exactly where it was.

My ideal solution would be to allow scrolling but have the dialog 
remain in position and the dialogUnderlay always protect the page 
content, which seems to be how followScroll is supposed to work.

Any suggestions?

Many thanks,
    Stephen


-- 
Stephen Paulsen
Programmer :: UCD/IET/ADDA
Information and Educational Technology
University of California, Davis
One Shields Avenue
Davis, CA 95616