jquery उपयोगकर्ता को माउस को घुमाने के बिना "प्रतीक्षा" से "ऑटो" तक ब्राउज़र कर्सर प्राप्त करना




cursor busy-cursor (12)

मैं इस jQuery कोड का उपयोग माउस पॉइंटर को अपने व्यस्त राज्य (घंटा ग्लास) पर अजाक्स कॉल के दौरान सेट करने के लिए करता हूं ...

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

और यह संबंधित कोड इसे सामान्य पर सेट करने के लिए ...

$('body').css('cursor', 'auto');

यह कुछ ब्राउज़रों पर ठीक काम करता है।

फ़ायरफ़ॉक्स और आईई पर, जैसे ही मैं कमांड निष्पादित करता हूं, माउस कर्सर बदल जाता है। यह वह व्यवहार है जो मैं चाहता हूं।

क्रोम और सफारी पर, माउस कर्सर स्पष्ट रूप से "व्यस्त" से "ऑटो" में परिवर्तित नहीं होता है जब तक उपयोगकर्ता पॉइंटर को स्थानांतरित नहीं करता है।

अनिच्छुक ब्राउज़र को माउस पॉइंटर स्विच करने का सबसे अच्छा तरीका क्या है?


सबसे पहले, आपको अवगत होना चाहिए कि अगर आपके पास आपके शरीर के भीतर किसी भी टैग को सौंपा गया कर्सर है, तो $('body').css('cursor', 'wait'); उस टैग के कर्सर को नहीं बदलेगा (जैसे मेरे, मैं cursor: pointer; उपयोग करता हूं cursor: pointer; मेरे सभी एंकर टैग पर)। आप पहले इस विशेष समस्या के समाधान को देखना चाहेंगे: कर्सर AJAX कॉल के लिए प्रतीक्षा करें

समस्या के लिए कि कर्सर केवल तभी अपडेट किया जाता है जब उपयोगकर्ता माउसकिट ब्राउज़र पर माउस ले जाता है, जैसा कि अन्य लोगों ने कहा था, कोई वास्तविक समाधान नहीं है।

ऐसा कहा जा रहा है कि यदि आप वर्तमान कर्सर को गतिशील रूप से एक सीएसएस स्पिनर जोड़ते हैं तो अभी भी एक कामकाज है। यह एक आदर्श समाधान नहीं है क्योंकि आप निश्चित रूप से कर्सर के आकार के बारे में नहीं जानते हैं और यदि स्पिनर सही ढंग से स्थित होगा।

कर्सर के बाद सीएसएस स्पिनर: DEMO

$.fn.extend(
{
    reset_on : function(event_name, callback)
    { return this.off(event_name).on(event_name, callback); }
});

var g_loader = $('.loader');

function add_cursor_progress(evt)
{
    function refresh_pos(e_)
    {
        g_loader.css({
            display : "inline",
            left : e_.pageX + 8,
            top : e_.pageY - 8
        });
    }
    refresh_pos(evt);
    var id = ".addcursorprog"; // to avoid duplicate events

    $('html').reset_on('mousemove' + id, refresh_pos);

    $(window).
    reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
    reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}

function remove_cursor_progress(evt)
{
    var id = ".addcursorprog";
    g_loader.css('display', 'none');

    $('html').off('mousemove' + id);
    $(window).off('mouseenter' + id).off('mouseleave' + id);
}

$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);

आपको यह जांचने की आवश्यकता होगी कि यह एक टच डिवाइस है या नहीं, var isTouchDevice = typeof window.ontouchstart !== 'undefined';

अंत में, आप अपने पृष्ठ में एक स्थिर स्पिनर या कुछ और जोड़ने की कोशिश करते हैं जो कर्सर के साथ ऐसा करने की बजाय लोडिंग प्रक्रिया को दिखाता है।


कोरायम का समाधान आधुनिक क्रोम, सफारी में 100% मामलों में फ़ायरफ़ॉक्स में 95% मामलों में मेरे लिए काम करता है, लेकिन ओपेरा और आईई में काम नहीं करता है।

मैंने इसे थोड़ा सा सुधार लिया:

$('html').bind('ajaxStart', function() {
    $(this).removeClass('notbusy').addClass('busy');
}).bind('ajaxStop', function() {
    $(this).removeClass('busy').addClass('notbusy');
});

सीएसएस:

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

html.notbusy, html.notbusy * {
    cursor: default !important;
}

अब यह क्रोम, सफारी, फ़ायरफ़ॉक्स और ओपेरा में 100% मामलों में काम करता है। मुझे नहीं पता कि आईई के साथ क्या करना है :(


मैं कोरयम समाधान से प्रेरित हो गया।

जावास्क्रिप्ट:

jQuery.ajaxSetup({
    beforeSend: function() {
       $('body').addClass('busy');
    },
    complete: function() {
       $('body').removeClass('busy');
    }
});

सीएसएस:

.busy * {
    cursor: wait !important;
}

क्रोम, फ़ायरफ़ॉक्स और आईई 10 पर परीक्षण किया गया। माउस को घुमाने के बिना कर्सर परिवर्तन। IE10 के लिए "महत्वपूर्ण" की आवश्यकता है।

संपादित करें: AJAX अनुरोध पूरा होने के बाद भी आपको आईई 10 पर कर्सर को स्थानांतरित करना होगा (इसलिए सामान्य कर्सर दिखाई देता है)। माउस को घुमाने के बिना कर्सर दिखाई देता है ..


मुझे नहीं लगता कि आप इसे करने में सक्षम होंगे।

हालांकि, स्क्रॉल स्थिति बदलने की कोशिश करें; यह मदद कर सकता है।


हे दोस्तों, मेरे पास एक छोटा किरकिरा समाधान है जो सभी ब्राउज़रों पर काम करता है। अनुमान है कि प्रोटोटाइप लाइब्रेरी का उपयोग किया जाता है। कोई भी इसे सादा जावास्क्रिप्ट के रूप में भी लिख सकता है। समाधान कर्सर को रीसेट करने के बाद बस शीर्ष पर एक div है और कर्सर को स्थानांतरित करने के लिए इसे थोड़ा सा हिलाएं। यह मेरे ब्लॉग http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html में प्रकाशित है।


कर्सर संपत्ति के लिए सही सीएसएस मान का उपयोग करने का प्रयास करें:

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

http://www.w3schools.com/CSS/pr_class_cursor.asp


यहां मेरा समाधान है:

function yourFunc(){

$('body').removeClass('wait'); // this is my wait class on body you can $('body').css('cursor','auto');
$('body').blur();
$('body').focus(function(e){
$('body')
 .mouseXPos(e.pageX + 1)
 .mouseYPos(e.pageX - 1);
});

}

$ ( '*') सीएसएस ( 'कर्सर', 'इंतजार')। लिंक सहित पेज पर हर जगह काम करेगा


Jquery 1.9 के रूप में आपको AJAXStart और AJAXS दस्तावेज़ को रोकना चाहिए । वे फ़ायरफ़ॉक्स में मेरे लिए ठीक काम करते हैं। अन्य ब्राउज़रों में परीक्षण नहीं किया है।

सीएसएस में:

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

जावास्क्रिप्ट में:

// Makes the mousecursor show busy during ajax 
// 
$( document )

   .ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )     
   .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )



मुझे विश्वास है कि इस मुद्दे (mousedown समस्या सहित) अब क्रोम 50 में तय किया गया है।

लेकिन केवल अगर आप डेवलपर टूल का उपयोग नहीं कर रहे हैं !!

उपकरण बंद करें और कर्सर तुरंत बेहतर प्रतिक्रिया देनी चाहिए।