पूरे HTML पृष्ठ पर कर्सर प्रतीक्षा करें

Question 1

क्या सरल तरीके से पूरे html पृष्ठ पर कर्सर को 'प्रतीक्षा' में सेट करना संभव है? उपयोगकर्ता को यह दिखाने के लिए विचार है कि कुछ हो रहा है जबकि एक अजाक्स कॉल पूरा हो रहा है। नीचे दिए गए कोड ने मेरे द्वारा किए गए प्रयासों का सरलीकृत संस्करण दिखाया है और उन समस्याओं को भी प्रदर्शित करता है जो मैं चलाता हूं:

यदि किसी तत्व (# id1) में कर्सर शैली सेट है, तो यह शरीर पर एक सेट को अनदेखा करेगा (स्पष्ट रूप से)
कुछ तत्वों में एक डिफ़ॉल्ट कर्सर शैली (ए) है और होवर पर प्रतीक्षा कर्सर नहीं दिखाया जाएगा
सामग्री के आधार पर बॉडी एलिमेंट की एक निश्चित ऊंचाई होती है और यदि पृष्ठ छोटा होता है, तो कर्सर पाद के नीचे नहीं दिखाई देगा

कसौटी:

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

बाद में संपादित करें ...
इसके साथ फ़ायरफ़ॉक्स और IE में काम किया:

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>

इस समाधान के साथ (या सुविधा) समस्या यह है कि यह अतिव्यापी div के कारण क्लिक को रोक देगा (धन्यवाद किबी)

बाद में बाद में संपादित करें ...
डोरवर्ड से एक सरल समाधान:

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

और फिर

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

यह समाधान केवल प्रतीक्षा कर्सर दिखाता है, लेकिन क्लिक की अनुमति देता है।

Question 2

मैं समझता हूं कि आपका इस पर नियंत्रण नहीं हो सकता है, लेकिन आप इसके बजाय एक "मास्किंग" डिव के लिए जा सकते हैं जो पूरे शरीर को एक जेड-इंडेक्स से अधिक 1 से कवर करता है। यदि आप चाहें तो डिव के केंद्र भाग में लोडिंग संदेश हो सकता है।

फिर, आप div पर प्रतीक्षा करने के लिए कर्सर सेट कर सकते हैं और लिंक के बारे में चिंता करने की ज़रूरत नहीं है क्योंकि वे आपके मास्किंग डिव के "अंडर" हैं। यहाँ कुछ उदाहरण CSS "मास्किंग डिव" के लिए दिया गया है:

शरीर {ऊंचाई: 100%; }
div # मास्क {कर्सर: प्रतीक्षा करें; z- इंडेक्स: 999; ऊंचाई: 100%; चौड़ाई: 100%; }

Question 3

यदि आप डोरवर्ड से पोस्ट किए गए सीएसएस के इस थोड़ा संशोधित संस्करण का उपयोग करते हैं,

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

फिर आप सभी अजाक्स कॉल के लिए काम करने के लिए कुछ सरल jQuery जोड़ सकते हैं:

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

या, पुराने jQuery संस्करणों के लिए (1.9 से पहले):

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

Question 4

यह फ़ायरफ़ॉक्स में काम करने लगता है

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

* हिस्सा यह सुनिश्चित करता है कि जब आप किसी लिंक पर होवर करते हैं तो कर्सर नहीं बदलता। हालांकि लिंक अभी भी क्लिक करने योग्य होंगे।

Question 5

मैं आज इस समस्या से जूझ रहा हूं। मूल रूप से सब कुछ फायरफॉक्स में ठीक काम कर रहा था लेकिन (निश्चित रूप से) IE में नहीं। IE में प्रतीक्षा कर्सर दिखा रहा था कि समय लेने वाले फ़ंक्शन को निष्पादित किया गया था।

मुझे अंततः इस साइट पर ट्रिक मिली: http://www.codingforums.com/archive/index.php/t-37185.html

कोड:

//...
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) {...}

मेरा कोड जावास्क्रिप्ट क्लास में चलता है इसलिए यह और MyClass (MyClass एक सिंगलटन है)।

इस पृष्ठ पर वर्णित के रूप में एक डिव को प्रदर्शित करने की कोशिश करते समय मुझे वही समस्याएं थीं। IE में यह कार्य निष्पादित होने के बाद दिखा रहा था। तो मुझे लगता है कि यह ट्रिक उस समस्या को भी हल कर देगी।

पोस्ट के लेखक को ग्लेनगव करने के लिए एक zillion समय का धन्यवाद। आपने सच में मेरा दिन बना दिया !!!

Question 6

सीएसएस: .waiting * { cursor: 'wait' }

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

Question 7

आप उन फैंसी लोडिंग ग्राफिक्स में से एक का उपयोग क्यों नहीं करते हैं (जैसे: http://ajaxload.info/ )? वेटिंग कर्सर ब्राउज़र के लिए ही होता है - इसलिए जब भी ऐसा प्रतीत होता है कि यह ब्राउज़र के साथ कुछ करना है और पेज के साथ नहीं है।

Question 8

सबसे आसान तरीका मुझे पता है कि इस तरह से JQuery का उपयोग कर रहा है:

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

Question 9

सीएसएस आज़माएं:

html.waiting {
cursor: wait;
}

ऐसा लगता है कि यदि संपत्ति bodyका उपयोग किया जाता है, तो htmlयह पूरे पृष्ठ पर प्रतीक्षा कर्सर नहीं दिखाता है। इसके अलावा अगर आप एक सीएसएस क्लास का उपयोग करते हैं तो आप आसानी से नियंत्रित कर सकते हैं जब यह वास्तव में इसे दिखाता है।

Question 10

यहां एक अधिक विस्तृत समाधान है जिसे बाहरी सीएसएस की आवश्यकता नहीं है:

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);
}

इसके साथ आप यह कर सकते हैं:

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

Question 11

मैंने एरिक वेंडेलिन के समाधान के एक अनुकूलन का उपयोग किया । यह पूरे शरीर पर एक पारदर्शी, एनिमेटेड ओवरले वेट-डिव दिखाएगा, क्लिक करते समय वेट-डिव द्वारा ब्लॉक किया जाएगा:

सीएसएस:

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

एचटीएमएल:

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

Question 12

मेरी दो पेंस:

चरण 1: एक सरणी घोषित करें। इसका उपयोग उन मूल श्रापियों को संग्रहीत करने के लिए किया जाएगा जिन्हें सौंपा गया था:

var vArrOriginalCursors = new Array(2);

चरण 2: फ़ंक्शन कर्सर लागू करेंमोडाईफायटायरपेज

 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;
    }
}

यह क्या करता है: पेज पर सभी तत्व हो जाते हैं। चरण 1 में घोषित सरणी में उन्हें दिए गए मूल श्रापों को संग्रहीत करता है। पैरामीटर Corororype द्वारा पारित किए गए वांछित कर्सर के लिए कर्सर को संशोधित करता है

चरण 3: पृष्ठ पर कर्सर को पुनर्स्थापित करें

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

मैंने इसे एक एप्लिकेशन में चलाया है और यह ठीक काम करता है। केवल चेतावनी यह है कि मैंने इसका परीक्षण नहीं किया है जब आप तत्वों को गतिशील रूप से जोड़ रहे हैं।

Question 13

संपूर्ण विंडो के लिए जावास्क्रिप्ट से कर्सर सेट करने के लिए, उपयोग करें:

document.documentElement.style.cursor = 'wait';

सीएसएस से:

html { cursor: wait; }

आवश्यकतानुसार और तर्क जोड़ें।

Question 14

ब्लॉकयूआई हर चीज का जवाब है। कोशिश करो।

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

Question 15

यह शुद्ध जावास्क्रिप्ट बहुत अच्छी तरह से काम करने लगता है ... फ़ायर्फ़ॉक्स, क्रोम, और एज ब्राउज़रों पर परीक्षण किया गया।

अगर आप अपने पेज पर तत्वों की अधिकता और धीमी गति से कंप्यूटर ... यह कोशिश करते हैं और देखते हैं तो मुझे इसके प्रदर्शन के बारे में निश्चित नहीं है।

प्रतीक्षा करने के लिए सभी तत्वों के लिए कर्सर सेट करें:

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "wait");

डिफ़ॉल्ट रूप से सभी तत्वों के लिए कर्सर सेट करें:

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "default");

एक वैकल्पिक (और शायद थोड़ा अधिक पठनीय) संस्करण निम्नानुसार एक setCursor फ़ंक्शन बनाने के लिए होगा:

function setCursor(cursor)
{
    var x = document.querySelectorAll("*");

    for (var i = 0; i < x.length; i++)
    {
        x[i].style.cursor = cursor;
    }
}

और फिर कॉल करें

setCursor("wait");

तथा

setCursor("default");

क्रमशः प्रतीक्षा कर्सर और डिफ़ॉल्ट कर्सर सेट करने के लिए।