web-dev-qa-db-fra.com

Attendez le curseur sur la page HTML entière

Est-il possible de régler le curseur sur 'wait' sur l'ensemble de 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 en cours d'achèvement. Le code ci-dessous montre une version simplifiée de ce que j'ai essayé et montre également les problèmes que je rencontre:

  1. si un élément (# id1) a un style de curseur défini, il ignorera celui défini sur le corps (évidemment) 
  2. certains éléments ont un style de curseur par défaut (a) et ne montreront pas le curseur d'attente en survol 
  3. l'élément body a une certaine hauteur en fonction du contenu et si la page est courte, le curseur ne s'affichera pas sous le pied de page

Le test:

<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’elle empêchera les clics en raison du chevauchement de la div (merci Kibbee)

Plus tard, plus tard éditer ...
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 autorise les clics.

javascripthtmlcssdynamic-css
85
Aleris

Je comprends que vous n’ayez peut-être pas le contrôle de cela, mais vous pourriez plutôt opter pour une div "masquante" qui couvre tout le corps avec un z-index supérieur à 1. La partie centrale de la div pourrait contenir un message de chargement si vous le souhaitez.

Ensuite, vous pouvez configurer le curseur de manière à attendre sur la div et ne pas avoir à vous soucier des liens car ils sont "sous" votre div en masquant. Voici quelques exemples de CSS pour le "masking div":

 corps {taille: 100%; } 
 div # mask {cursor: wait; z-index: 999; hauteur: 100%; largeur: 100%; }
32
Eric Wendelin

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

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

vous pouvez ensuite ajouter quelques jQuery vraiment simples 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 de jQuery (antérieures à 1.9):

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

Cela semble fonctionner dans Firefox

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

La partie * garantit que le curseur ne change pas lorsque vous survolez un lien. Bien que les liens seront toujours cliquables.

11
Kibbee

Cela fait des heures que je lutte avec ce problème aujourd'hui . En gros, tout fonctionnait parfaitement dans FireFox mais (bien sûr) pas dans IE . Dans IE, le curseur d'attente était affiché APRÈS la fonction fastidieuse. a été exécuté.

J'ai finalement trouvé le truc 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 fonctionne 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 une div comme décrit sur cette page. Dans IE, il était affiché après l'exécution de la fonction. Donc, je suppose que cette astuce résoudrait également ce problème.

Merci un zillion de temps pour glenngv l'auteur du post. Tu as vraiment fait ma journée !!!

7
pasx

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

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

4
redbmk

Pourquoi n'utilisez-vous pas simplement l'un de ces graphiques de chargement sophistiqués (par exemple: http://ajaxload.info/ )? Le curseur en attente concerne le navigateur lui-même. Ainsi, chaque fois qu’il apparaît, il a quelque chose à voir avec le navigateur et non avec la page.

2
unexist

Le moyen le plus simple que je connaisse est d'utiliser JQuery comme ceci:

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

Voici une solution plus élaborée ne nécessitant 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 faire:

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
1
kofifus

Essayez le css:

html.waiting {
cursor: wait;
}

Il semble que si la propriété body est utilisée en regard de html, le curseur d'attente n'apparaît pas sur toute la page. De plus, si vous utilisez une classe CSS, vous pouvez facilement contrôler quand elle la montre.

1
GameFreak

J'ai utilisé une adaptation de la solution de Eric Wendelin . Il affichera une superposition transparente et animée wait-div sur tout le corps, le clic sera bloqué par l'attente-div tant qu'il sera visible:

css:

div#waitMask {
    z-index: 999;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    cursor: wait;
    background-color: #000;
    opacity: 0;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

js:

// to show it
$("#waitMask").show();
$("#waitMask").css("opacity"); // must read it first
$("#waitMask").css("opacity", "0.8");

...

// to hide it
$("#waitMask").css("opacity", "0");
setTimeout(function() {
    $("#waitMask").hide();
}, 500) // wait for animation to end

html:

<body>
    <div id="waitMask" style="display:none;">&nbsp;</div>
    ... rest of html ...
0
ungalcrys

Mes deux pence: 

Étape 1: Déclarez un tableau. Ceci sera utilisé pour stocker les curseurs d'origine assignés:

var vArrOriginalCursors = new Array(2);

Étape 2: Implémentez la fonction cursorModifyEntirePage

 function CursorModifyEntirePage(CursorType){
    var elements = document.body.getElementsByTagName('*');
    alert("These are the elements found:" + elements.length);
    let lclCntr = 0;
    vArrOriginalCursors.length = elements.length; 
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        vArrOriginalCursors[lclCntr] = elements[lclCntr].style.cursor;
        elements[lclCntr].style.cursor = CursorType;
    }
}

Ce que ça fait: Obtient tous les éléments de la page. Stocke les curseurs d'origine qui leur sont attribués dans le tableau déclaré à l'étape 1. Modifie les curseurs sur le curseur souhaité, comme transmis par le paramètre CursorType

Étape 3: Restaurer les curseurs sur la page

 function CursorRestoreEntirePage(){
    let lclCntr = 0;
    var elements = document.body.getElementsByTagName('*');
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        elements[lclCntr].style.cursor = vArrOriginalCursors[lclCntr];
    }
}

Je l'ai exécuté dans une application et cela fonctionne très bien .. __ Le seul inconvénient est que je ne l'ai pas testé lorsque vous ajoutez dynamiquement des éléments.

0
indiaaditya

BlockUI est la réponse à tout. Essaie.

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

0
kulNinja