कर्सर को प्रतीक्षा करने के लिए सबसे आसान तरीका है, फिर सभी तत्व वापस

वापस लौटें, मेरी वेबसाइट में, मेरे पास कुछ सीएसएस वर्ग हैं जो एक निश्चित प्रकार का कर्सर सेट करते हैं जब आप उन पर माउस डालते हैं। जब मैं पेज पर कहीं भी एजेक्स कॉल करता हूं तो कर्सर को प्रतीक्षा छवि में सेट करना चाहता हूं और उसके बाद AJAX कॉल पूरा होने के बाद यह जो भी कर्सर हो, उसे वापस ले जाना चाहिए।कर्सर को प्रतीक्षा करने के लिए सबसे आसान तरीका है, फिर सभी तत्व वापस

मैंने कोशिश की:

$(document).ajaxStart(function() { 
    document.body.style.cursor = 'wait'; 
}); 

$(document).ajaxStop(function() { 
    document.body.style.cursor = 'auto'; 
});

यह जब मेरे माउस एक CSS वर्ग कि कर्सर बदलता है के साथ एक डोम वस्तु खत्म हो गया है और मैं कैसे इसे ऐसा करने के बनाने के लिए पर स्टम्प्ड रहा हूँ काम नहीं करता।

वर्तमान में मैं एक वर्ग है:

.pills a:hover 
{ 
    background-color: #0069D6; 
    color: #FFFFFF; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); 
    text-decoration:none; 
    cursor:pointer; 
}

आप माउस इस वर्ग में वस्तु, और एक अजाक्स कॉल प्रारंभ होने पर, कर्सर अभी भी एक सूचक के रूप में रहती है।

स्रोत

2012-04-24 Jay Sun

'कर्सर' शैली उस तत्व पर कार्य करती है जो वर्तमान में ('माउसओवर') पर है और यदि विशिष्ट तत्व की एक अलग शैली है तो उस तत्व कर्सर को दिखाया जाएगा क्योंकि यह शरीर तत्व से ऊपर है। एक विकल्प मैं सोच सकता हूं कि पूरे दस्तावेज़ पर ओवरले दिखाया गया है और कर्सर को ओवर के लिए 'प्रतीक्षा' पर सेट करें और 'AJAXStop' पर छिपाएं। –

एफडब्ल्यूआईडब्ल्यू, सीधे यूएक्स परिप्रेक्ष्य से, आपको वास्तव में कर्सर के साथ पहले स्थान पर गड़बड़ नहीं करना चाहिए जब तक यह इंगित न हो कि कुछ क्लिक करने योग्य है। अगर आप AJAX के माध्यम से कुछ वापस लौटने की प्रतीक्षा कर रहे हैं, तो आपको स्पिनर भी शामिल होना चाहिए। http://ajaxload.info – Jason

आप body और !important पर एक वर्ग टॉगल के संयोजन का उपयोग कर सकते हैं।

http://jsfiddle.net/UGwmv/2/

$("button").click(function(){ 
    $("body").toggleClass("wait"); 
    return false; 
});

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

जब शरीर wait वर्ग है, सब कुछ इंतजार कर्सर दिखाई देगा।

स्रोत

2012-04-24 20:30:06

कर्सर टॉगल बटन के नीचे प्रभावित नहीं है। कम से कम मेरे वेब ब्राउज़र (फ़ायरफ़ॉक्स) में नहीं। –

मेरा मानना है कि जेएसएफडीएल की स्थापना के तरीके का सिर्फ एक परिणाम है। –

@RobinCastlin ने पहेली को अपडेट किया। शरीर पर 100% ऊंचाई तय करता है। यकीन नहीं है कि यह jsfiddle के बाहर एक वास्तविक पृष्ठ में एक मुद्दा होगा। –

यदि आप एक आवरण या कंटेनर है:

<script type="text/javascript"> 
$(document).ajaxStart(function() { 
    document.body.style.cursor = 'wait'; 
    $('div#wrapper').addClass('wait'); 
}); 

$(document).ajaxStop(function() { 
    document.body.style.cursor = 'auto'; 
    $('div#wrapper').removeClass('wait'); 
}); 
</script> 

<style type="text/css"> 
    div#wrapper.wait * { 
     cursor: wait !important; 
    } 
</style>

मूल रूप से आवरण को सभी बच्चों !important शर्त के साथ cursor: wait मिल जाएगा।

स्रोत

2012-04-24 20:27:35

यह ध्यान देने योग्य मूल्य! महत्वपूर्ण घोषणाएं आईई संस्करणों – GillesC

@gillesc पर मुद्दों का कारण बन सकती हैं। मैं आईई 6 के लिए एक के बारे में जानता हूं लेकिन ऐसा नहीं लगता कि मौजूदा संस्करणों के साथ कोई समस्या थी। –

http://reference.sitepoint.com/css/importantdeclarations - आईई 6 के अलावा अन्य मामूली किनारे के मामले हैं "इंटरनेट एक्सप्लोरर 6 और 7 एक घोषणा के लिए महत्व देते हैं जब कीवर्ड के स्थान पर एक अवैध पहचानकर्ता का उपयोग किया जाता है, बजाय घोषणा के रूप में उन्हें अनदेखा करना चाहिए। " और "इंटरनेट एक्सप्लोरर 8 में, चयन घोषणा को अनदेखा किया जाता है यदि चयनकर्ता में पहला: अक्षर या प्रथम-पंक्ति छद्म-तत्व होता है।" – GillesC

समस्या यह है कि कक्षा कर्सर के लिए दस्तावेज़ मान को ओवरराइट कर देगी, इससे बचने के लिए आपको यह सुनिश्चित करना चाहिए कि कवर किए जाने वाले सभी तत्व प्रतीक्षा प्रतीक दिखाएंगे।

आपकी सबसे अच्छी शर्त शरीर तत्व के लिए कक्षा को जोड़ना है जब आप माउस के लिए प्रतीक्षा प्रतीक चाहते हैं, उस वर्ग में जब वह वर्ग मौजूद होता है तो आप सभी अन्य वर्गों को प्रतीक्षा प्रतीक दिखाने के लिए सेट करते हैं।

जब AJAX समाप्त हो जाता है तो शरीर टैग से कक्षा को हटा दें और विभिन्न कर्सर शैली वाले मूल तत्व वर्ग को वापस कर दिया जाएगा।

$(document).ajaxStart(function() { 
    $('body').addClass('wait'); 
}); 

$(document).ajaxStop(function() { 
    $('body').removeClass('wait'); 
}); 



<style type="text/css"> 
    body.wait .move { 
     cursor: wait; 
    } 
</style>

स्रोत

2012-04-24 20:27:46 GillesC

एक अन्य जवाब 2014:

समाधान यदि आप कम से कम एक शैली पत्रक है, इसे बदल!

परिवर्तन सीएसएस शैली पत्रक:

sh = document.styleSheets[0] 
Wait_a_bit="* {cursor: wait !important}" 
sh.insertRule(Wait_a_bit, 0)

अपने ajax से पहले

और यह बाद में हटा दें:

sh.deleteRule(0)

स्रोत

2014-02-19 22:06:02 halfbit

अपने पृष्ठ के लिए एक खाली तत्व div#wait-overlay जोड़ें। मेरा सुझाव है कि आप अपने एचटीएमएल दस्तावेज़ के अंत में इसे <body> तत्व बंद करने से ठीक पहले जोड़ें।

सेट इस तरह इस तत्व की शैली (.active उद्देश्य पर नहीं है):

$(document).ajaxStart(function() { 
    $('#wait-overlay') 
     .addClass('active') 
     .animate({opacity: 0.6}); 
}); 

$(document).ajaxStop(function() { 
    $('#wait-overlay') 
    .animate(
     { 
      opacity: 0 
     }, 
     400, 
     function() { $(this).removeClass('active'); } 
    ); 
});

स्पष्टीकरण::

div#wait-overlay.active 
{ 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    cursor: wait; 
    z-index: 100000; 
    background: black; 
    opacity: 0; 
}

तो निम्नलिखित जावास्क्रिप्ट जोड़ने

div#wait-overlay खाली div है, इसलिए यह दिखाई नहीं दे रहा है और चूंकि यह पृष्ठ के अंत में है, यह किसी भी चीज़ को प्रभावित नहीं करता है।
हालांकि, हम इस div के वर्ग active जोड़ते हैं, तो यह पूरे पृष्ठ और धन्यवाद करने के लिए बहुत ही उच्च z-index पृष्ठ पर सब कुछ शामिल किया गया है से अधिक फैला है। इसका अतिरिक्त लाभ यह है कि पृष्ठ पर सबकुछ अनजान हो जाता है।
जावास्क्रिप्ट .active कक्षा को AJAX पर स्वचालित रूप से प्रारंभ करता है और AJAX समाप्त होने पर इसे हटा देता है। animate पर कॉल करने के लिए भी धन्यवाद, पृष्ठ धीरे-धीरे AJAX प्रारंभ पर अंधेरा हो जाता है और जब AJAX समाप्त होता है, तो यह सामान्य पर वापस आ जाता है।

स्रोत

2017-04-23 22:43:37 GoFree

$(document).ajaxStart(function() { 
     $('*').css('cursor', 'wait'); 
    }); 

    $(document).ajaxStop(function() { 
     $('*').css('cursor', ''); 
    });

काम कर देता है।

स्रोत

2017-07-12 07:55:12

कर्सर को प्रतीक्षा करने के लिए सबसे आसान तरीका है, फिर सभी तत्व वापस

उत्तर

संबंधित मुद्दे