How to change the overall mousepointer?

Discussion in 'Javascript' started by Stefan Mueller, Dec 15, 2009.

  1. I've a webpage with several tables and a button. If you click the
    button the javascript function calc() gets called. This function does
    several calculations and now I'm looking for a way to change the
    mousepointer to an hourglass while the calculations are running.

    My styles look like:
    <style type="text/css">
    th {cursor: pointer}
    th.header1 {cursor: default}
    th.header2 {cursor: default}
    td {cursor: default}
    ...
    </style>

    I tried:
    function calc() {
    document.body.style.cursor = "wait";
    ...
    }

    Because the mousepointer e.g. doesn't change on the tables I tried
    th.style.cursor = "wait";
    th.header1.style.cursor = "wait";
    th.header2.style.cursor = "wait";
    td.style.cursor = "wait";
    but it doesn't work.

    Is there a way to change the mousepointer everywhere with one command
    and to change it back afterwards?
    Or do I have to change it on each object separately? If yes, how can I
    change it e.g. on <th> or <th.header1>?
     
    Stefan Mueller, Dec 15, 2009
    #1
    1. Advertising

  2. Stefan Mueller

    David Mark Guest

    On Dec 14, 9:09 pm, Stefan Mueller <> wrote:
    > I've a webpage with several tables and a button. If you click the
    > button the javascript function calc() gets called. This function does
    > several calculations and now I'm looking for a way to change the
    > mousepointer to an hourglass while the calculations are running.
    >


    This is a common UI mistake. The option shouldn't even be available
    to scripts IMO. You should not change _my_ cursor to an hourglass as
    (unlike real software), you have no ability to enforce what it means
    (mouse actions are _discarded_). Clicks - for example - during your
    monopolization of the browser UI will only be _delayed_.

    The proper solution is to break up your calculations into multiple
    steps and use timeouts to call each step in turn. Then the user isn't
    bothered. Of course, they can still interact with your interface
    during the calculations (without delays), which you will have to take
    into consideration (perhaps hiding part of _your_ UI until the final
    calculation is complete).
     
    David Mark, Dec 15, 2009
    #2
    1. Advertising

  3. Stefan Mueller wrote:

    > I've a webpage with several tables and a button. If you click the
    > button the javascript function calc() gets called. This function does
    > several calculations and now I'm looking for a way to change the
    > mousepointer to an hourglass while the calculations are running.
    >
    > My styles look like:
    > <style type="text/css">
    > th {cursor: pointer}
    > th.header1 {cursor: default}
    > th.header2 {cursor: default}
    > td {cursor: default}
    > ...
    > </style>
    >
    > I tried:
    > function calc() {
    > document.body.style.cursor = "wait";
    > ...
    > }
    >
    > Because the mousepointer e.g. doesn't change on the tables I tried
    > th.style.cursor = "wait";
    > th.header1.style.cursor = "wait";
    > th.header2.style.cursor = "wait";
    > td.style.cursor = "wait";
    > but it doesn't work.


    Unfortunately, you have told nothing further about your code, your
    environment, or your observations, which leaves the following possibilities
    for failure (in order of decreasing probability):

    A) `th' and `td' are not references to the corresponding element objects,
    so a ReferenceError exception is thrown (check the error console!).

    B) The used ECMAScript implementation, like all I know, is single-threaded.
    Additionally, changes to the user interface do not become apparent before
    the current execution context is left. As a result, the property value
    does change but the change does not have effect. You can work around
    this by planning the property change for later execution (as if it was)
    in its own DOM thread:

    window.setTimeout("document.body.style.cursor = 'wait';", 0);

    This should not break in any DOM implementation I know. Especially
    Gecko 1.9.2-based browsers are known to increase the 0 value to 10
    (We have discussed this before.) If unsure, use values greater than
    or equal to 10.

    C) `wait' is not supported by that layout engine (which is presumably
    MSHTML-compatible); first assign "hourglass", then "wait". (It is
    expected that for an unsupported "wait" value the setter of the
    property reverts it back to the original value in MSHTML without
    throwing an exception.)

    D) `th' and `td' are references to the corresponding element objects,
    but that DOM implementation does not support W3C DOM Level 2 CSS.

    > Is there a way to change the mousepointer everywhere with one command
    > and to change it back afterwards?


    Probably yes, but I would recommend using at least two statements.

    > Or do I have to change it on each object separately?


    Probably not. You could insert/remove or enable/disable a stylesheet that
    has the following rule:

    * {
    cursor: hourglass !important;
    cursor: wait !important;
    }

    > If yes, how can I change it e.g. on <th> or <th.header1>?


    Hopefully there is no such tag as `<th.header1>' in your document as that
    would be invalid markup. As for `<th>...</th>', you need to retrieve a
    reference to the element object that represents that element.

    These are really DOM basics, so RTFM first:

    <http://jibbering.com/faq/#posting>


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Dec 15, 2009
    #3
  4. David Mark wrote:

    > On Dec 14, 9:09 pm, Stefan Mueller <> wrote:
    >> I've a webpage with several tables and a button. If you click the
    >> button the javascript function calc() gets called. This function does
    >> several calculations and now I'm looking for a way to change the
    >> mousepointer to an hourglass while the calculations are running.

    >
    > This is a common UI mistake. The option shouldn't even be available
    > to scripts IMO. You should not change _my_ cursor to an hourglass as
    > (unlike real software), you have no ability to enforce what it means


    Quite obviously it means that something is happening for which completion
    the user needs to wait.

    > (mouse actions are _discarded_).


    What do you consider to be "mouse actions" and what do they have to do with
    the pointer cursor?

    > Clicks - for example - during your monopolization of the browser UI will
    > only be _delayed_.


    Depends, but why would that preclude the pointer cursor from being changed
    into an appropriate shape, given that the implementation cannot recognize
    it in time by itself due to the single-threadedness of script execution?

    > The proper solution is to break up your calculations into multiple
    > steps and use timeouts to call each step in turn. Then the user isn't
    > bothered. Of course, they can still interact with your interface
    > during the calculations (without delays), which you will have to take
    > into consideration (perhaps hiding part of _your_ UI until the final
    > calculation is complete).


    One calculation step executed via window.setTimeout() should suffice.


    PointedEars
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
     
    Thomas 'PointedEars' Lahn, Dec 15, 2009
    #4
  5. Stefan Mueller

    David Mark Guest

    On Dec 14, 10:44 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > David Mark wrote:
    > > On Dec 14, 9:09 pm, Stefan Mueller <> wrote:
    > >> I've a webpage with several tables and a button. If you click the
    > >> button the javascript function calc() gets called. This function does
    > >> several calculations and now I'm looking for a way to change the
    > >> mousepointer to an hourglass while the calculations are running.

    >
    > > This is a common UI mistake.  The option shouldn't even be available
    > > to scripts IMO.  You should not change _my_ cursor to an hourglass as
    > > (unlike real software), you have no ability to enforce what it means

    >
    > Quite obviously it means that something is happening for which completion
    > the user needs to wait.


    That is not exactly what it means. It means that nothing will happen
    when - for example - you click whatever UI element is presenting that
    cursor (e.g. a window). It's as if you didn't click at all.

    >
    > > (mouse actions are _discarded_).

    >
    > What do you consider to be "mouse actions" and what do they have to do with
    > the pointer cursor?


    Click and what don't they have to do with the pointer cursor?

    >
    > > Clicks - for example - during your monopolization of the browser UI will
    > > only be _delayed_.

    >
    > Depends, but why would that preclude the pointer cursor from being changed
    > into an appropriate shape, given that the implementation cannot recognize
    > it in time by itself due to the single-threadedness of script execution?


    But the hourglass (or whatever shape the OS is set to use) is not
    appropriate to indicate that clicks will be queued up during the
    delay. You might use the hourglass/pointer hybrid for this in a
    desktop app. In a script, you let the browser/OS handle that.

    >
    > > The proper solution is to break up your calculations into multiple
    > > steps and use timeouts to call each step in turn.  Then the user isn't
    > > bothered.  Of course, they can still interact with your interface
    > > during the calculations (without delays), which you will have to take
    > > into consideration (perhaps hiding part of _your_ UI until the final
    > > calculation is complete).

    >
    > One calculation step executed via window.setTimeout() should suffice.


    That's as maybe.
     
    David Mark, Dec 15, 2009
    #5
  6. David Mark wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> David Mark wrote:
    >> > On Dec 14, 9:09 pm, Stefan Mueller <> wrote:
    >> >> I've a webpage with several tables and a button. If you click the
    >> >> button the javascript function calc() gets called. This function does
    >> >> several calculations and now I'm looking for a way to change the
    >> >> mousepointer to an hourglass while the calculations are running.
    >> > This is a common UI mistake. The option shouldn't even be available
    >> > to scripts IMO. You should not change _my_ cursor to an hourglass as
    >> > (unlike real software), you have no ability to enforce what it means

    >> Quite obviously it means that something is happening for which completion
    >> the user needs to wait.

    >
    > That is not exactly what it means. It means that nothing will happen
    > when - for example - you click whatever UI element is presenting that
    > cursor (e.g. a window). It's as if you didn't click at all.


    ISTM you are confusing the issue. From previous UI experience, when *I* see
    an hourglass pointer, I assume that I need to wait, i.e. better not do
    anything else, including clicking (YMMV). Therefore, I presume to signal
    just that is what was intended here. Nothing more, nothing less.

    >> > (mouse actions are _discarded_).

    >> What do you consider to be "mouse actions" and what do they have to do
    >> with the pointer cursor?

    >
    > Click and what don't they have to do with the pointer cursor?


    OK, so clicks are (perhaps) discarded. Isn't that what the hourglass (or
    whatever)-shaped wait cursor is supposed to mean, to signal to the user?

    And clicks have nothing to do with shape of the pointer cursor, of course.

    >> > Clicks - for example - during your monopolization of the browser UI
    >> > will only be _delayed_.

    >> Depends, but why would that preclude the pointer cursor from being
    >> changed into an appropriate shape, given that the implementation cannot
    >> recognize it in time by itself due to the single-threadedness of script
    >> execution?

    >
    > But the hourglass (or whatever shape the OS is set to use) is not
    > appropriate to indicate that clicks will be queued up during the
    > delay. You might use the hourglass/pointer hybrid for this in a
    > desktop app.


    Usually yes, but it would depend on the use-case.

    > In a script, you let the browser/OS handle that.


    AISB, the runtime environment cannot recognize that a single-threaded script
    is going to take longer than expected until it is too late (and a warning
    should be and is issued in some environments, e.g. Gecko); the halting
    problem is still undecidable.

    However, the script itself can cause the cursor change -- to whatever shape
    appears be to appropriate for the task, including the hourglass/pointer
    hybrid shape you are talking about, with the "progress" property value -- to
    be performed in another DOM thread than the time-consuming part.[1]

    BTW, the value for the property reset should be either "" or "auto", not
    "default".

    >> > The proper solution is to break up your calculations into multiple
    >> > steps and use timeouts to call each step in turn. Then the user isn't
    >> > bothered. Of course, they can still interact with your interface
    >> > during the calculations (without delays), which you will have to take
    >> > into consideration (perhaps hiding part of _your_ UI until the final
    >> > calculation is complete).

    >>
    >> One calculation step executed via window.setTimeout() should suffice.

    >
    > That's as maybe.


    I beg your pardon?


    PointedEars
    ___________
    [1] As for the DOM thread notion, I think I found the that confirmed for
    at least Gecko 1.9.2-based browsers (CMIIW), where in
    <http://mxr.mozilla.org/mozilla1.9.2/source/dom/src/threads/nsDOMWorker.cpp>
    I found (line numbers included from copypaste):

    68 class nsDOMWorkerFunctions
    69 {
    ....
    75 // Same as window.setTimeout().
    76 static JSBool SetTimeout(JSContext* aCx, JSObject* aObj, uintN aArgc,
    77 jsval* aArgv, jsval* aRval) {
    78 return MakeTimeout(aCx, aObj, aArgc, aArgv, aRval, PR_FALSE);
    79 }
    80
    81 // Same as window.setInterval().
    82 static JSBool SetInterval(JSContext* aCx, JSObject* aObj, uintN aArgc,
    83 jsval* aArgv, jsval* aRval) {
    84 return MakeTimeout(aCx, aObj, aArgc, aArgv, aRval, PR_TRUE);
    85 }
    ....
    100 private:
    101 // Internal helper for SetTimeout and SetInterval.
    102 static JSBool MakeTimeout(JSContext* aCx, JSObject* aObj, uintN aArgc,
    103 jsval* aArgv, jsval* aRval,
    PRBool aIsInterval);
    ....
    126 JSBool
    127 nsDOMWorkerFunctions::MakeTimeout(JSContext* aCx,
    128 JSObject* /* aObj */,
    129 uintN aArgc,
    130 jsval* aArgv,
    131 jsval* aRval,
    132 PRBool aIsInterval)
    133 {
    134 nsDOMWorker* worker =
    static_cast<nsDOMWorker*>(JS_GetContextPrivate(aCx));
    135 NS_ASSERTION(worker, "This should be set by the DOM thread service!");
    136
    137 if (worker->IsCanceled()) {
    138 return JS_FALSE;
    139 }
    140
    141 PRUint32 id = worker->NextTimeoutId();
    142
    143 if (worker->IsClosing()) {
    144 // Timeouts won't run in the close handler, fake success and bail.
    145 *aRval = INT_TO_JSVAL(id);
    146 return JS_TRUE;
    147 }
    148
    149 nsRefPtr<nsDOMWorkerTimeout> timeout =
    new nsDOMWorkerTimeout(worker, id);
    150 if (!timeout) {
    151 JS_ReportOutOfMemory(aCx);
    152 return JS_FALSE;
    153 }
    154
    155 nsresult rv = timeout->Init(aCx, aArgc, aArgv, aIsInterval);
    156 if (NS_FAILED(rv)) {
    157 JS_ReportError(aCx, "Failed to initialize timeout!");
    158 return JS_FALSE;
    159 }
    160
    161 rv = worker->AddFeature(timeout, aCx);
    162 if (NS_FAILED(rv)) {
    163 JS_ReportOutOfMemory(aCx);
    164 return JS_FALSE;
    165 }
    166
    167 rv = timeout->Start();
    168 if (NS_FAILED(rv)) {
    169 JS_ReportError(aCx, "Failed to start timeout!");
    170 return JS_FALSE;
    171 }
    172
    173 *aRval = INT_TO_JSVAL(id);
    174 return JS_TRUE;
    175 }
    ....
    401 JSFunctionSpec gDOMWorkerFunctions[] = {
    402 { "dump", nsDOMWorkerFunctions::Dump, 1,
    0, 0 },
    403 { "setTimeout", nsDOMWorkerFunctions::SetTimeout, 1,
    0, 0 },
    404 { "clearTimeout", nsDOMWorkerFunctions::KillTimeout, 1,
    0, 0 },
    405 { "setInterval", nsDOMWorkerFunctions::SetInterval, 1,
    0, 0 },
    406 { "clearInterval", nsDOMWorkerFunctions::KillTimeout, 1,
    0, 0 },
    407 { "importScripts", nsDOMWorkerFunctions::LoadScripts, 1,
    0, 0 },
    408 { "XMLHttpRequest", nsDOMWorkerFunctions::NewXMLHttpRequest, 0,
    0, 0 },
    409 { "Worker", nsDOMWorkerFunctions::NewWorker, 1,
    0, 0 },
    410 #ifdef MOZ_SHARK
    411 { "startShark", js_StartShark, 0,
    0, 0 },
    412 { "stopShark", js_StopShark, 0,
    0, 0 },
    413 { "connectShark", js_ConnectShark, 0,
    0, 0 },
    414 { "disconnectShark", js_DisconnectShark, 0,
    0, 0 },
    415 #endif
    416 { nsnull, nsnull, 0,
    0, 0 }
    417 };
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
     
    Thomas 'PointedEars' Lahn, Dec 15, 2009
    #6
  7. Stefan Mueller

    David Mark Guest

    On Dec 15, 12:45 am, Thomas 'PointedEars' Lahn <>
    wrote:
    > David Mark wrote:
    > > Thomas 'PointedEars' Lahn wrote:
    > >> David Mark wrote:
    > >> > On Dec 14, 9:09 pm, Stefan Mueller <> wrote:
    > >> >> I've a webpage with several tables and a button. If you click the
    > >> >> button the javascript function calc() gets called. This function does
    > >> >> several calculations and now I'm looking for a way to change the
    > >> >> mousepointer to an hourglass while the calculations are running.
    > >> > This is a common UI mistake.  The option shouldn't even be available
    > >> > to scripts IMO.  You should not change _my_ cursor to an hourglassas
    > >> > (unlike real software), you have no ability to enforce what it means
    > >> Quite obviously it means that something is happening for which completion
    > >> the user needs to wait.

    >
    > > That is not exactly what it means.  It means that nothing will happen
    > > when - for example - you click whatever UI element is presenting that
    > > cursor (e.g. a window).  It's as if you didn't click at all.

    >
    > ISTM you are confusing the issue.


    I may be confusing, but I don't think I'm confused.

    > From previous UI experience, when *I* see
    > an hourglass pointer, I assume that I need to wait, i.e. better not do
    > anything else, including clicking (YMMV).


    Well, clicking (or any actions with the mouse) are certainly right
    out. The UI programmer makes a conscious decision to display this
    cursor and it doesn't always indicate that the app is going to be so
    overwhelmed that it can't deal with user input. It just may not make
    sense for the app to juggle UI requests with whatever other processing
    it is doing. Regardless, mouse actions are discarded while this
    cursor is displayed and it does mean wait to the user.

    > Therefore, I presume to signal
    > just that is what was intended here.  Nothing more, nothing less.


    Okay.

    >
    > >> > (mouse actions are _discarded_).
    > >> What do you consider to be "mouse actions" and what do they have to do
    > >> with the pointer cursor?

    >
    > > Click and what don't they have to do with the pointer cursor?

    >
    > OK, so clicks are (perhaps) discarded.  Isn't that what the hourglass (or
    > whatever)-shaped wait cursor is supposed to mean, to signal to the user?


    Yes. That is exactly the point. You could change the cursor, but
    then you would need to somehow prevent all mouse actions while the
    wait cursor is present. If you click repeatedly during this long
    calculation step, those clicks will be processed after the calculation
    is done. They are queued up and there's nothing your script can do
    about it as it is doing calculations at the time. Once finished with
    the calculations, you change the cursor back and all of those clicks
    are processed in turn. How would you stop them is the question. And
    it's a minor question, especially when you consider the alternative
    timeout-based solution that won't lockup the UI at all. ;)

    >
    > And clicks have nothing to do with shape of the pointer cursor, of course..


    Right. It's trivial to change the cursor to wait, non-trivial to
    disallow all mouse actions for the document while that cursor is
    displayed.

    >
    > >> > Clicks - for example - during your monopolization of the browser UI
    > >> > will only be _delayed_.
    > >> Depends, but why would that preclude the pointer cursor from being
    > >> changed into an appropriate shape, given that the implementation cannot
    > >> recognize it in time by itself due to the single-threadedness of script
    > >> execution?

    >
    > > But the hourglass (or whatever shape the OS is set to use) is not
    > > appropriate to indicate that clicks will be queued up during the
    > > delay.  You might use the hourglass/pointer hybrid for this in a
    > > desktop app.

    >
    > Usually yes, but it would depend on the use-case.


    Right.

    >
    > > In a script, you let the browser/OS handle that.

    >
    > AISB, the runtime environment cannot recognize that a single-threaded script
    > is going to take longer than expected until it is too late (and a warning
    > should be and is issued in some environments, e.g. Gecko); the halting
    > problem is still undecidable.


    I see what you are saying, but if a script goes South for more than a
    second or two on this XP Pro box, clicking - for example - FF3.5 may
    cause the cursor to change to an hourglass. Repeated clicking may
    change the icon in the title bar to the default app icon and resource
    usage sometimes goes through the roof. I'm sure these symptoms are
    familiar to Windows users.

    >
    > However, the script itself can cause the cursor change -- to whatever shape
    > appears be to appropriate for the task, including the hourglass/pointer
    > hybrid shape you are talking about, with the "progress" property value


    Right. Not ashamed to admit I forgot the name of that one (or if it
    was even offered). I don't care as I would never use it in a browser
    script. :)

    But I'm not saying it can't be done "right" if you really want to
    present that interface.

    > -- to
    > be performed in another DOM thread than the time-consuming part.[1]
    >
    > BTW, the value for the property reset should be either "" or "auto", not
    > "default".


    Huh?

    >
    > >> > The proper solution is to break up your calculations into multiple
    > >> > steps and use timeouts to call each step in turn.  Then the user isn't
    > >> > bothered.  Of course, they can still interact with your interface
    > >> > during the calculations (without delays), which you will have to take
    > >> > into consideration (perhaps hiding part of _your_ UI until the final
    > >> > calculation is complete).

    >
    > >> One calculation step executed via window.setTimeout() should suffice.

    >
    > > That's as maybe.

    >
    > I beg your pardon?


    Ah, don't apologize.
     
    David Mark, Dec 15, 2009
    #7
  8. David Mark wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> David Mark wrote:
    >> > Thomas 'PointedEars' Lahn wrote:
    >> >> David Mark wrote:
    >> >> > On Dec 14, 9:09 pm, Stefan Mueller <> wrote:

    > [...] It's trivial to change the cursor to wait, non-trivial to
    > disallow all mouse actions for the document while that cursor is
    > displayed.


    I would consider adding an absolutely positioned ([semi-]transparent) block
    element at the size of the viewport fairly trivial :)

    >> > In a script, you let the browser/OS handle that.

    >>
    >> AISB, the runtime environment cannot recognize that a single-threaded
    >> script is going to take longer than expected until it is too late (and a
    >> warning should be and is issued in some environments, e.g. Gecko); the
    >> halting problem is still undecidable.

    >
    > I see what you are saying, but if a script goes South for more than a
    > second or two on this XP Pro box, clicking - for example - FF3.5 may
    > cause the cursor to change to an hourglass.


    OK, but you cannot make that assumption for all graphical browsers.

    > Repeated clicking may change the icon in the title bar to the default app
    > icon and resource usage sometimes goes through the roof. I'm sure these
    > symptoms are familiar to Windows users.


    This is bad, indeed. (Fortunately, Windows is no longer my primary OS :))

    >> -- to
    >> be performed in another DOM thread than the time-consuming part.[1]
    >>
    >> BTW, the value for the property reset should be either "" or "auto", not
    >> "default".

    >
    > Huh?


    Are you referring to the first or the second paragraph? If the second one:

    The initial value of the `cursor' property is "auto", indicating that the
    user agent should display a context-sensitive shape. If you set the
    `cursor' property to a value different than "auto" to indicate an operation
    in progress, you would need to reset it afterwards. However, using
    "default" for the reset causes the pointer to stay fixed (usually the common
    arrow shape) instead of becoming context-sensitive again.

    See also <http://www.w3.org/TR/CSS21/ui.html#cursor-props>.

    >> >> > The proper solution is to break up your calculations into multiple
    >> >> > steps and use timeouts to call each step in turn. Then the user
    >> >> > isn't bothered. Of course, they can still interact with your
    >> >> > interface during the calculations (without delays), which you will
    >> >> > have to take into consideration (perhaps hiding part of _your_ UI
    >> >> > until the final calculation is complete).
    >> >>
    >> >> One calculation step executed via window.setTimeout() should suffice.
    >> >
    >> > That's as maybe.

    >>
    >> I beg your pardon?

    >
    > Ah, don't apologize.


    AFAIK, in formal English that question is a polite way for one to indicate
    that something that has been said before was not understood, including a
    request for an explanation (in my native language, it would correspond with
    "Wie bitte?"). It was meant *that* way. Therefore, please explain what you
    meant by this.


    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Dec 15, 2009
    #8
  9. Stefan Mueller

    David Mark Guest

    On Dec 15, 2:15 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > David Mark wrote:
    > > Thomas 'PointedEars' Lahn wrote:
    > >> David Mark wrote:
    > >> > Thomas 'PointedEars' Lahn wrote:
    > >> >> David Mark wrote:
    > >> >> > On Dec 14, 9:09 pm, Stefan Mueller <> wrote:

    > > [...]  It's trivial to change the cursor to wait, non-trivial to
    > > disallow all mouse actions for the document while that cursor is
    > > displayed.

    >
    > I would consider adding an absolutely positioned ([semi-]transparent) block
    > element at the size of the viewport fairly trivial :)
    >
    > >> > In a script, you let the browser/OS handle that.

    >
    > >> AISB, the runtime environment cannot recognize that a single-threaded
    > >> script is going to take longer than expected until it is too late (anda
    > >> warning should be and is issued in some environments, e.g. Gecko); the
    > >> halting problem is still undecidable.

    >
    > > I see what you are saying, but if a script goes South for more than a
    > > second or two on this XP Pro box, clicking - for example - FF3.5 may
    > > cause the cursor to change to an hourglass.

    >
    > OK, but you cannot make that assumption for all graphical browsers.


    Fair enough. The other aspects of my argument still apply.

    >
    > > Repeated clicking may change the icon in the title bar to the default app
    > > icon and resource usage sometimes goes through the roof.  I'm sure these
    > > symptoms are familiar to Windows users.

    >
    > This is bad, indeed.  (Fortunately, Windows is no longer my primary OS :))


    Yes, it sucks. :( So does FF3.5 (at least the revision I am
    currently using) and FireBug for that matter. Maybe they are
    concentrating on Macs.

    >
    > >> -- to
    > >> be performed in another DOM thread than the time-consuming part.[1]

    >
    > >> BTW, the value for the property reset should be either "" or "auto", not
    > >> "default".

    >
    > > Huh?

    >
    > Are you referring to the first or the second paragraph?  If the second one:


    The part just above where I indicated confusion.

    >
    > The initial value of the `cursor' property is "auto", indicating that the
    > user agent should display a context-sensitive shape.


    Yes.

    > If you set the
    > `cursor' property to a value different than "auto" to indicate an operation
    > in progress, you would need to reset it afterwards.


    Correct.

    > However, using
    > "default" for the reset causes the pointer to stay fixed (usually the common
    > arrow shape)
    > instead of becoming context-sensitive again.


    Yes, that's a mistake if the OP did that. Set it to ''.

    >
    > See also <http://www.w3.org/TR/CSS21/ui.html#cursor-props>.


    Thanks for that. :)

    >
    > >> >> > The proper solution is to break up your calculations into multiple
    > >> >> > steps and use timeouts to call each step in turn.  Then the user
    > >> >> > isn't bothered.  Of course, they can still interact with your
    > >> >> > interface during the calculations (without delays), which you will
    > >> >> > have to take into consideration (perhaps hiding part of _your_ UI
    > >> >> > until the final calculation is complete).

    >
    > >> >> One calculation step executed via window.setTimeout() should suffice.

    >
    > >> > That's as maybe.

    >
    > >> I beg your pardon?

    >
    > > Ah, don't apologize.

    >
    > AFAIK, in formal English that question is a polite way for one to indicate
    > that something that has been said before was not understood, including a
    > request for an explanation (in my native language, it would correspond with
    > "Wie bitte?").


    "Something please" is all I get out of that.


    > It was meant *that* way.  Therefore, please explain what you
    > meant by this.


    I sometimes throw in quaint, outdated English expressions. I think it
    makes my posts more cosmopolitan. :)

    Oh, you mean the single calculation step sufficing? Well, it may be
    true (in some contexts), but it doesn't really matter.
     
    David Mark, Dec 15, 2009
    #9
  10. Stefan Mueller wrote:
    > I've a webpage with several tables and a button. If you click the
    > button the javascript function calc() gets called. This function does
    > several calculations and now I'm looking for a way to change the
    > mousepointer to an hourglass while the calculations are running.
    >


    Why is calc() so slow?
    --
    Garrett
    comp.lang.javascript FAQ: http://jibbering.com/faq/
     
    Garrett Smith, Dec 15, 2009
    #10
  11. Actually, I just liked to know if there's a way to change the
    mousepointer on the whole webpage with only one command and to change
    it back afterwards?
    However, I got explained that I shouldn't change the mousepointer to
    an hourglass rather I have to see that the function calc() doesn't
    need so much time to process. Of course that's right, but the function
    calc() sorts a huge table on the webpage and that lasts 5 or 10
    seconds. The user has to wait until the table is sorted.

    Therefore I see it exactly the way like Thomas 'PointedEars' Lahn
    wrote in his post "From previous UI experience, when *I* see an
    hourglass pointer, I assume that I need to wait, i.e. better not do
    anything else, including clicking (YMMV). Therefore, I presume to
    signal just that is what was intended here. Nothing more, nothing
    less."
    That's the only reason why I'd like to show on the whole webpage the
    hourglass while the function calc() is doing its job.

    Reading your posts I'm realizing that it's most probably not possible
    to change the cursor to an hourglass on the whole page. The only ray
    of hope I found is in the post from David Mark "It's trivial to change
    the cursor to wait, non-trivial to disallow all mouse actions for the
    document while that cursor is displayed.".
    Is it really so trivial to change the cursor to an hourglass on the
    whole webpage? And is it also trivial to change the cursor back to the
    shape it was before (crosshair, pointer, ...)? If yes, please give me
    a hint.
     
    Stefan Mueller, Dec 16, 2009
    #11
  12. Stefan Mueller

    David Mark Guest

    On Dec 15, 9:50 pm, Stefan Mueller <> wrote:

    [...]

    > of hope I found is in the post from David Mark "It's trivial to change
    > the cursor to wait, non-trivial to disallow all mouse actions for the
    > document while that cursor is displayed.".
    > Is it really so trivial to change the cursor to an hourglass on the
    > whole webpage? And is it also trivial to change the cursor back to the
    > shape it was before (crosshair, pointer, ...)?


    Well, perception is reality here. Cover the whole document with a
    transparent DIV with a wait cursor. Remove it when done. You could
    even use it to rebuff mouse actions by stopping their propagation.
    Still, keyboard input will be queued until after the calculation is
    done, which doesn't gibe with the wait signal.
     
    David Mark, Dec 16, 2009
    #12
  13. Stefan Mueller wrote:

    > Actually, I just liked to know if there's a way to change the
    > mousepointer on the whole webpage with only one command and to change
    > it back afterwards?

    ^
    Yes, that is what you liked to know. (Avoid *asking* *non*-questions, they
    are a waste of our time.)

    > However, I got explained that I shouldn't change the mousepointer to
    > an hourglass rather I have to see that the function calc() doesn't
    > need so much time to process.


    I fail to see where. Are you sure you are not misinterpreting statements?

    > Of course that's right, but the function calc() sorts a huge table on the
    > webpage and that lasts 5 or 10 seconds. The user has to wait until the
    > table is sorted.


    OK. But how can you possibly know how long it takes? Do you know the
    runtime environment so exactly? That is unlikely for a "Web page".

    > Therefore I see it exactly the way like Thomas 'PointedEars' Lahn
    > wrote in his post "From previous UI experience, when *I* see an
    > hourglass pointer, I assume that I need to wait, i.e. better not do
    > anything else, including clicking (YMMV). Therefore, I presume to
    > signal just that is what was intended here. Nothing more, nothing
    > less."
    > That's the only reason why I'd like to show on the whole webpage the
    > hourglass while the function calc() is doing its job.


    However, David was/is correct in pointing out essentially that users are
    unpredictable (I did not think it necessary to point out explicitly
    everywhere we were in agreement): If a user clicks while the script is
    running anyway and the runtime environment cannot cope with it because it is
    running a single-threaded script, this can have rather disastrous side
    effects (extensive CPU load has been mentioned; browser crashs are possible,
    too).

    Still, if you set up DOM threads, like

    Event listener
    |
    +- Change cursor
    |
    +- calc()
    Change cursor back

    that is, for example

    /* or 'wait', but consider tabbed browsing */
    window.setTimeout("....cursor = 'progress';", 10);

    window.setTimeout("calc(); ....cursor = '';" 10),

    there should not be any problem with that, and by contrast to the possible
    alternative we discussed (not putting calc() in its own thread, but
    preventing input actions to have effect) it should keep the browser and your
    Web application responsive.

    > Reading your posts I'm realizing that it's most probably not possible
    > to change the cursor to an hourglass on the whole page.


    I do not know which posting you have intended to post a follow-up to (you
    have not quoted anything == bad), but you posted a follow-up to Garrett's
    posting and I do not see anything in his simple question --

    >> Why is calc() so slow?


    -- that implies what you ask for cannot be done.

    > The only ray of hope I found is in the post from David Mark "It's trivial
    > to change the cursor to wait, non-trivial to disallow all mouse actions
    > for the document while that cursor is displayed.".


    Perhaps you should read more carefully and interpret less. It has been
    discussed at great length and in great detail how it can be done. What you
    appear to miss is that we also discussed if it should be done (David/me); if
    yes, how it can be done best (David/me); and ultimately if it needs to be
    done at all (Garrett).

    Evidently again, this is not a support forum. We are striving to find the
    best solutions to a problem here, not necessarily the quickest answer and
    most certainly not the answer that you want to hear.

    > Is it really so trivial to change the cursor to an hourglass on the
    > whole webpage?


    Yes.

    > And is it also trivial to change the cursor back to the
    > shape it was before (crosshair, pointer, ...)?


    Yes.

    > If yes, please give me a hint.


    It has been given already.

    Learn to post properly. <http://jibbering.com/faq/#posting>


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, Dec 16, 2009
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?SW1yYW4=?=

    mousepointer in webform

    =?Utf-8?B?SW1yYW4=?=, Mar 6, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    412
    =?Utf-8?B?SW1yYW4=?=
    Mar 6, 2004
  2. Steve C. Orr [MVP, MCSD]

    Re: Changing MousePointer

    Steve C. Orr [MVP, MCSD], Jul 21, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    504
    Steve C. Orr [MVP, MCSD]
    Jul 21, 2004
  3. Ellie

    mousepointer in javascript

    Ellie, Oct 22, 2008, in forum: ASP .Net
    Replies:
    0
    Views:
    284
    Ellie
    Oct 22, 2008
  4. jef
    Replies:
    1
    Views:
    122
    Eliyahu Goldin
    Apr 12, 2005
  5. Stefan Mueller
    Replies:
    6
    Views:
    165
    Randy Webb
    Jan 25, 2006
Loading...

Share This Page