I have a long running process (5 seconds or more), and I want to show the wait / hourglass cursor, while the process runs. The code below works in IE, but not other browsers. I couldn't find anything in previous posts. Can anyone tell me what is wrong with the code?
=====================
public void showWait() { Element element = focusPanel.getElement(); DOM.setStyleAttribute(element,"cursor","wait"); focusPanel.setFocus(true); DOM.setCapture(element);
}
public void showUnwait() { Element element = focusPanel.getElement(); DOM.releaseCapture(element); DOM.setStyleAttribute(element,"cursor","default");
}
(calling code)
public void zoomin() { showWait(); DeferredCommand.addCommand(new Command() { public void execute() { longRunningProcess(); showUnwait(); } }); }
> I have a long running process (5 seconds or more), and I want to show the > wait / hourglass > cursor, while the process runs. The code below works in IE, but not other > browsers. I couldn't find > anything in previous posts. Can anyone tell me what is wrong with the code?
> =====================
> public void showWait() { > Element element = focusPanel.getElement(); > DOM.setStyleAttribute(element,"cursor","wait"); > focusPanel.setFocus(true); > DOM.setCapture(element);
> }
> public void showUnwait() { > Element element = focusPanel.getElement(); > DOM.releaseCapture(element); > DOM.setStyleAttribute(element,"cursor","default");
> You should probably do this by adding/removing CSS classes to the > elements and styling them as needed.
> That being said, i think using "pointer" and "normal" instead of > "wait" and "default" will work as well.
> On Jul 30, 1:02 pm, "L Frohman" <lfroh...@gmail.com> wrote:
> > I have a long running process (5 seconds or more), and I want to show the > > wait / hourglass > > cursor, while the process runs. The code below works in IE, but not other > > browsers. I couldn't find > > anything in previous posts. Can anyone tell me what is wrong with the code?
> > =====================
> > public void showWait() { > > Element element = focusPanel.getElement(); > > DOM.setStyleAttribute(element,"cursor","wait"); > > focusPanel.setFocus(true); > > DOM.setCapture(element);
> > }
> > public void showUnwait() { > > Element element = focusPanel.getElement(); > > DOM.releaseCapture(element); > > DOM.setStyleAttribute(element,"cursor","default");
----- Original Message ----- From: "Reinier Zwitserloot" <reini...@gmail.com> To: "Google Web Toolkit" <Google-Web-Toolkit@googlegroups.com> Sent: Monday, July 30, 2007 3:52 PM Subject: Re: show wait cursor for long running process
> Do NOT use CSS in case of doubt - direct setting of the DOM is far > less likely to have unwanted side effects, such as not working > properly.
> 'pointer' is something very very different from wait.
> Try setting the cursor directly on the body tag:
> If that also doesn't work, could be this just can't be done.
> On Jul 30, 11:03 pm, abickford <adam.bickf...@gmail.com> wrote: >> You should probably do this by adding/removing CSS classes to the >> elements and styling them as needed.
>> That being said, i think using "pointer" and "normal" instead of >> "wait" and "default" will work as well.
>> On Jul 30, 1:02 pm, "L Frohman" <lfroh...@gmail.com> wrote:
>> > I have a long running process (5 seconds or more), and I want to show >> > the >> > wait / hourglass >> > cursor, while the process runs. The code below works in IE, but not >> > other >> > browsers. I couldn't find >> > anything in previous posts. Can anyone tell me what is wrong with the >> > code?
>> > =====================
>> > public void showWait() { >> > Element element = focusPanel.getElement(); >> > DOM.setStyleAttribute(element,"cursor","wait"); >> > focusPanel.setFocus(true); >> > DOM.setCapture(element);
>> > }
>> > public void showUnwait() { >> > Element element = focusPanel.getElement(); >> > DOM.releaseCapture(element); >> > DOM.setStyleAttribute(element,"cursor","default");
I think it's a pretty well known "browser quirk" that changing the cursor while in some JavaScript action/event will not take effect until you MOVE the cursor after setting it...
Using the following code, the behavior seems correct for IE 6 and Firefox 2.0.0.3, using gwt 1.4.10, Safari you have to MOVE the cursor, as I posted above, Opera 9.22 is even more bizarre, you have to move the cursor over another element that has a cursor defined, and back out into the body again. Note that if you don't move the cursor FROM over an element that may have a cursor defined ( like the button that triggered it ) you will not see the cursor change in IE or Firefox.
final Button b = new Button("Test");
b.addClickListener(new ClickListener() { public void onClick(Widget sender) { Timer t = new Timer() { public void run() { DOM.setStyleAttribute(RootPanel.get().getElement(), "cursor", "wait"); } }; t.schedule(5000);
t = new Timer() { public void run() { DOM.setStyleAttribute(RootPanel.get().getElement(), "cursor", "pointer"); } }; t.schedule(10000);
t = new Timer() { public void run() { DOM.setStyleAttribute(RootPanel.get().getElement(), "cursor", "wait"); } }; t.schedule(15000);
t = new Timer() { public void run() { DOM.setStyleAttribute(RootPanel.get().getElement(), "cursor", "pointer"); } }; t.schedule(20000); } }); this.add(b);
Hi, as Dean noted I think we should follow ajax patterns: http://ajaxpatterns.org/Progress_Indicator also (from linked page): <quote> Note that one form of indicator to avoid is changing the cursor. Many traditional GUIs switch over to a "rotating hourglass" or related icon during delays. That's probably inappropriate for Ajax, because it's something the browser software will often do, e.g. while loading a new page, so it's likely to create confusion. </quote>
hth, regards, Piotr
On Jul 31, 5:49 am, "Dean S. Jones" <deansjo...@gmail.com> wrote:
> I think it's a pretty well known "browser quirk" that changing the > cursor > while in some JavaScript action/event will not take effect until you > MOVE the cursor after setting it...
