Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #20599

Re: client side hour glass icon?

Show all headers | View raw

Denis McMahon wrote:

> On Mon, 08 Jul 2013 18:10:00 -0700, SpreadTooThin wrote:
>> I have a server side function that can take a while to complete.
>> During that time the user should see an hour glass icon on that their
>> client web page.
>> I thought there must be a some java script to do this.
>> Help?
> 
> In javascript the following:

There is no javascript: <http://PointedEars.de/es-matrix>
 
> document.body.style.cursor = "wait";

This is client-side DOM scripting (with an ECMAScript implementation, but 
DOM APIs are *language-independent* or, in W3C terminology, “language-
neutral”).

See also <http://en.wikipedia.org/wiki/Document_Object_Model> pp.
 
> might, under some conditions, at certain phases of the moon[1], when the
> wind is in the appropriate direction[2], have something approaching the
> desired effect.

To be precise, while the “cursor” property is inherited by default [0], you 
may have declared the “cursor” property on certain descendant elements or 
the UA may have declared it in its basic stylesheet for you (for example, it 
makes sense that a text “input” element would use “cursor: text” by default, 
and an “a” link element would use “cursor: pointer”).  As result, setting 
the “wait” cursor on the “body” element may not affect the cursor on all 
descendant nodes.

There are several ways to work around this.  You can define a rule

  body.wait,
  body.wait *
  {
    cursor: wait !important;
  }

Then you set the “class” attribute of the body element dynamically:

  var body = document.body;
  var _classes = body.className;
  body.className = (_classes ? _classes + " wait" : "wait");

and set it back

  var body = document.body;
  body.className = body.className.replace(/(^|\s+)wait$/, "");

(Or, tested: 

  jsx.dom.css.addClassName(document.body, "wait", true);

and

  jsx.dom.css.removeClassName(document.body, "wait");

See [1].

Recent DOM implementations also implement the “classList” property of DOM 
Level 4 (WD) [2]:

  document.body.classList.add("wait");

and

  document.body.classList.remove("wait");

respectively.  JSX:dom/css.js does not make use of it yet, but will.)

However, you may have to set the “className” property or “cursor” style 
property on elements – jsx.dom.css.setStyleProperty() [1] can help you 
there; I moved it to the jsx.dom.css namespace just yesterday –, or add 
appropriate “!important” declarations for the “.wait” context, for which 
there are selectors with greater specificity.  But at least the UI keeps 
responsive.

If instead you *want* the UI to be *not* responsive while processing, you 
can create a new (semi-)transparent element on top of all other related 
elements, and give it the appropriate cursor style.  For example:

  var div = document.createElement("div");
  div.style.zIndex = 1701;
  div.style.position = "fixed";
  div.style.top = "0";
  div.style.left = "0";
  div.style.bottom = "0";
  div.style.right = "0";
  div.style.cursor = "wait";

(Or

  var div = jsx.dom.createElementFromObj({
    type: "div",
    properties: {
      style: {
        position: "fixed",
        top: "0",
        right: "0",
        bottom: "0",
        left: "0",
        zIndex: 1701,
        "background-color": "rgba(0, 0, 0, 0.5)",
        cursor: "wait"
      }
    }
  });

See [3].)

  document.body.appendChild(div);

You can remove it when not needed anymore:

  document.body.removeChild(div);
 
> I think:
> 
> document.body.style.cursor = "";
> 
> sets it back to the default.[3]

It does (as with all style shorthand properties; CSSOM (WD/ED) attempts to 
standardize this proprietary, but interoperable behavior [4]), but see 
above.

________
[0] <http://www.w3.org/TR/CSS2/ui.html#propdef-cursor>
[1] 
<http://PointedEars.de/websvn/filedetails.php?repname=JSX&path=%2Ftrunk%2Fdom%2Fcss.js>
[2] <http://www.w3.org/TR/dom/#dom-element-classlist>
[3] 
<http://PointedEars.de/websvn/filedetails.php?repname=JSX&path=%2Ftrunk%2Fdom.js>
[4] <http://www.w3.org/TR/cssom/#the-cssstyledeclaration-interface>
-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

client side hour glass icon? SpreadTooThin <bjobrien62@gmail.com> - 2013-07-08 18:10 -0700
  Re: client side hour glass icon? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-07-09 09:51 +0200
  Re: client side hour glass icon? Denis McMahon <denismfmcmahon@gmail.com> - 2013-07-09 08:53 +0000
    Re: client side hour glass icon? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-09 22:18 +0200
      Re: client side hour glass icon? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2013-07-10 08:20 +0200
        Re: client side hour glass icon? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-10 21:27 +0200
      Re: client side hour glass icon? John Harris <niam@jghnorth.org.uk.invalid> - 2013-07-10 14:46 +0100
        Re: client side hour glass icon? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-10 15:57 +0200
          Pointless rants (Was: Re: client side hour glass icon?) "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2013-07-10 19:18 +0300
            Re: Pointless rants Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-10 19:45 +0200
          Re: client side hour glass icon? danca <ynnadrebyc@tiscalinet.it> - 2013-07-10 18:31 +0200
          Re: client side hour glass icon? John Harris <niam@jghnorth.org.uk.invalid> - 2013-07-11 10:06 +0100
            Re: client side hour glass icon? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-11 18:32 +0200
              Re: client side hour glass icon? John Harris <niam@jghnorth.org.uk.invalid> - 2013-07-12 16:28 +0100
                ECMAScript (was: client side hour glass icon?) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-12 21:12 +0200
                Re: ECMAScript (was: client side hour glass icon?) John Harris <niam@jghnorth.org.uk.invalid> - 2013-07-13 17:01 +0100
  Re: client side hour glass icon? Danny <dann90038@gmail.com> - 2013-07-09 10:53 -0700

csiph-web