Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder1.news.weretis.net!feeder.erje.net!eu.feeder.erje.net!xlned.com!feeder3.xlned.com!npeer.de.kpn-eurorings.net!npeer-ng0.de.kpn-eurorings.net!newsfeed.arcor.de!newsspool4.arcor-online.net!news.arcor.de.POSTED!not-for-mail Content-Type: text/plain; charset="UTF-8" Message-ID: <2695770.PYp8NcyyIf@PointedEars.de> From: Thomas 'PointedEars' Lahn Reply-To: Thomas 'PointedEars' Lahn Organization: PointedEars Software (PES) Date: Tue, 09 Jul 2013 22:18 +0200 User-Agent: KNode/4.10.4 Content-Transfer-Encoding: 8Bit X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&. MIME-Version: 1.0 Lines: 142 NNTP-Posting-Date: 09 Jul 2013 22:18:12 CEST NNTP-Posting-Host: 608709bf.newsspool3.arcor-online.net X-Trace: DXC=>NPg4JHIcO8kUFX=Y?aLP;McF=Q^Z^V384Fo<]lROoR18kF]gf>jRlL[mV7jX4 X-Complaints-To: usenet-abuse@arcor.de Xref: csiph.com comp.lang.javascript:20599 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: > 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 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] [1] [2] [3] [4] -- PointedEars Twitter: @PointedEars2 Please do not Cc: me. / Bitte keine Kopien per E-Mail.