Attendez le curseur sur toute la page html

Est-il possible de placer le curseur sur «attendre» sur toute la page html de manière simple? L'idée est de montrer à l'utilisateur que quelque chose se passe pendant qu'un appel ajax est terminé. Le code ci-dessous montre une version simplifiée de ce que j'ai essayé et montre aussi les problèmes auxquels j'ai rencontré:

  1. Si un élément (# id1) a un style de curseur réglé, il ignorera celui du corps (évidemment)
  2. Certains éléments ont un style de curseur par défaut (a) et ne montrent pas le curseur d'attente sur le vol stationnaire
  3. L'élément du corps a une certaine hauteur en fonction du contenu et si la page est courte, le curseur ne s'affichera pas ci-dessous le pied de page

Le test:

  • HTML / CSS - ajustez la taille de la police pour remplir la hauteur et l'largeur du parent
  • Modifier la largeur de la barre de progression de démarrage à partir de angularjs
  • Comment redimensionner Twitter Bootstrap modal dynamiquement en fonction du contenu
  • JQuery ajouter une classe en fonction de l'URL de la page
  • Javascript - indicateur de chargement / occupé ou div transparent sur la page en cliquant sur l'événement
  • Empêchez le rebond de défilement pour l'élément du corps, mais gardez-le pour les éléments enfants dans iOS
  • <html> <head> <style type="text/css"> #id1 { background-color: #06f; cursor: pointer; } #id2 { background-color: #f60; } </style> </head> <body> <div id="id1">cursor: pointer</div> <div id="id2">no cursor</div> <a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a> </body> </html> 

    Éditer plus tard …
    Cela a fonctionné dans Firefox et IE avec:

     div#mask { display: none; cursor: wait; z-index: 9999; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);} <a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false"> Do something</a> 

    Le problème avec (ou la fonctionnalité) de cette solution est qu'il empêchera les clics en raison de la division superposée (merci Kibbee)

    Plus tard, éditez …
    Une solution plus simple de Dorward:

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

    et alors

     <a href="#" onclick="document.body.className = 'wait'; return false">Do something</a> 

    Cette solution affiche uniquement le curseur d'attente mais permet des clics.

  • Élément de liaison en liaison
  • Je ne peux pas injecter un style avec une règle "! Important"
  • Alternance GUI à <select> lorsque vous avez beaucoup d'options
  • Comment fonctionnent les sprites CSS?
  • Insérez le smiley en position de curseur
  • Personnaliser le bouton de fichier pour télécharger l'image
  • 10 Solutions collect form web for “Attendez le curseur sur toute la page html”

    Je comprends que vous ne disposez peut-être d'aucun contrôle, mais vous pouvez plutôt utiliser un diviseur «masquant» qui couvre tout le corps avec un index z supérieur à 1. La partie centrale du div peut contenir un message de chargement si vous le souhaitez.

    Ensuite, vous pouvez définir le curseur pour attendre la division et ne pas avoir à vous soucier des liens, car ils sont "sous" votre division de masquage. Voici un exemple de CSS pour le "masking div":

     Corps {hauteur: 100%;  }
     Div # mask {curseur: wait;  Z-index: 999;  Hauteur: 100%;  Largeur: 100%;  }
    

    Si vous utilisez cette version légèrement modifiée du CSS que vous avez posté de Dorward,

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

    Vous pouvez ensuite ajouter un jQuery vraiment simple pour tous les appels ajax:

     $(document).ready(function () { $(document).ajaxStart(function () { $("html").addClass("wait"); }); $(document).ajaxStop(function () { $("html").removeClass("wait"); }); }); 

    Ou, pour les anciennes versions jQuery (avant 1.9):

     $(document).ready(function () { $("html").ajaxStart(function () { $(this).addClass("wait"); }); $("html").ajaxStop(function () { $(this).removeClass("wait"); }); }); 

    Cela semble fonctionner dans firefox

     <style> *{ cursor: inherit;} body{ cursor: wait;} </style> 

    La partie * garantit que le curseur ne change pas lorsque vous passez sur un lien. Bien que les liens soient encore cliquables.

    Je me suis heurté à ce problème depuis des heures. Fondamentalement, tout fonctionnait très bien dans FireFox mais (bien sur) pas dans IE. Dans IE, le curseur d'attente s'affichait APRÈS que la fonction consommant du temps était exécutée.

    J'ai finalement trouvé l'astuce sur ce site: http://www.codingforums.com/archive/index.php/t-37185.html

    Code:

     //... document.body.style.cursor = 'wait'; setTimeout(this.SomeLongFunction, 1); //setTimeout syntax when calling a function with parameters //setTimeout(function() {MyClass.SomeLongFunction(someParam);}, 1); //no () after function name this is a function ref not a function call setTimeout(this.SetDefaultCursor, 1); ... function SetDefaultCursor() {document.body.style.cursor = 'default';} function SomeLongFunction(someParam) {...} 

    Mon code s'exécute dans une classe JavaScript d'où le this et MyClass (MyClass est un singleton).

    J'ai eu les mêmes problèmes en essayant d'afficher un div comme décrit sur cette page. Dans IE, il a été affiché après que la fonction a été exécutée. Donc, je pense que cette astuce pourrait résoudre ce problème aussi.

    Merci un moment de glenngv l'auteur de l'article. Vous avez vraiment fait ma journée!

    .waiting * { cursor: 'wait' } : .waiting * { cursor: 'wait' }

    JQuery: $('body').toggleClass('waiting');

    Pourquoi n'utilisez-vous que l'un de ces graphiques de chargement de fantaisie (p. Ex.: http://ajaxload.info/ )? Le curseur d'attente est pour le navigateur lui-même – donc chaque fois qu'il apparaît, il a quelque chose à voir avec le navigateur et non avec la page.

    La manière la plus simple dont je sais utilise JQuery comme ceci:

     $('*').css('cursor','wait'); 

    Essayez le css:

     html.waiting { cursor: wait; } 

    Il semble que si le body la propriété est utilisé comme appuyé sur html il ne montre pas le curseur d'attente sur toute la page. En outre, si vous utilisez une classe css, vous pouvez facilement contrôler quand elle le montre réellement.

    Voici une solution plus élaborée qui ne nécessite pas de CSS externe:

     function changeCursor(elem, cursor, decendents) { if (!elem) elem=$('body'); // remove all classes starting with changeCursor- elem.removeClass (function (index, css) { return (css.match (/(^|\s)changeCursor-\S+/g) || []).join(' '); }); if (!cursor) return; if (typeof decendents==='undefined' || decendents===null) decendents=true; let cname; if (decendents) { cname='changeCursor-Dec-'+cursor; if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' , .'+cname+' * { cursor: '+cursor+' !important; }').appendTo('head'); } else { cname='changeCursor-'+cursor; if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' { cursor: '+cursor+' !important; }').appendTo('head'); } elem.addClass(cname); } 

    Avec cela, vous pouvez:

     changeCursor(, 'wait'); // wait cursor on all decendents of body changeCursor($('#id'), 'wait', false); // wait cursor on elem with id only changeCursor(); // remove changed cursor from body 

    BlockUI est la réponse pour tout. Essaie.

    http://www.malsup.com/jquery/block/

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.