পুরো HTML পৃষ্ঠাতে কার্সার অপেক্ষা করুন

Question 1

সহজ এইচটিএমএল পৃষ্ঠাতে কার্সারটি 'অপেক্ষা' করতে সেট করা সম্ভব? আইজ্যাকটি ব্যবহারকারীকে দেখানোর জন্য যে অজ্যাক্স কলটি সম্পন্ন হওয়ার সময় কিছু চলছে। নীচের কোডটি আমি যা চেষ্টা করেছি তার একটি সরল সংস্করণ দেখায় এবং আমার যে সমস্যাগুলির মধ্যে চলে সেগুলি প্রদর্শন করে:

যদি কোনও উপাদানের (# 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>

পরে সম্পাদনা করুন ...
এটি ফায়ারফক্স এবং আইই এর সাথে কাজ করেছে:

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>

এই সমাধানটির (বা এর বৈশিষ্ট্য) সমস্যাটি হ'ল এটি ওভারল্যাপিং ডিভের কারণে ক্লিকগুলি প্রতিরোধ করবে (ধন্যবাদ কিব্বি)

পরে সম্পাদনা করুন ...
ডোরওয়ার্ডের একটি সহজ সমাধান:

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

এবং তারপর

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

এই সমাধানটি কেবল অপেক্ষা কর্সার দেখায় তবে ক্লিকগুলিকে অনুমতি দেয়।

Question 2

আমি বুঝতে পেরেছি এটিতে আপনার নিয়ন্ত্রণ নাও থাকতে পারে তবে আপনি এর পরিবর্তে একটি "মাস্কিং" ডিভের জন্য যেতে পারেন যা পুরো শরীরকে 1 এর চেয়ে বেশি জেড-ইনডেক্স যুক্ত করে the

তারপরে, আপনি ডিআইভিটির জন্য অপেক্ষা করতে কার্সার সেট করতে পারেন এবং লিঙ্কগুলি নিয়ে আপনার চিন্তা করার দরকার নেই যেগুলি আপনার মাস্কিং ডিভের "নীচে" রয়েছে। "মাস্কিং ডিভ" এর জন্য কয়েকটি উদাহরণ সিএসএস:

শরীরের উচ্চতা: 100%; }
div # মুখোশ {কার্সার: অপেক্ষা করুন; জেড-ইনডেক্স: 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

আমি আজ কয়েক ঘন্টা ধরে এই সমস্যাটির সাথে লড়াই করছি। মূলত ফায়ারফক্সে সবকিছু ঠিকঠাক কাজ করছিল তবে (অবশ্যই) আইই তে নয়। আইইতে অপেক্ষা কর্সারটি সময় গ্রহণকারী ফাংশনটি কার্যকর হওয়ার পরে দেখানো হয়েছিল।

আমি অবশেষে এই সাইটে কৌশলটি পেয়েছি: 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) {...}

আমার কোড একটি জাভাস্ক্রিপ্ট ক্লাসে চলে তাই এটি এবং মাই ক্লাস (মাইক্লাস একটি সিঙ্গলটন)।

এই পৃষ্ঠায় বর্ণিত একটি ডিভ প্রদর্শন করার চেষ্টা করার সময় আমারও একই সমস্যা ছিল। আই-তে এটি ফাংশনটি কার্যকর হওয়ার পরে প্রদর্শিত হয়েছিল। সুতরাং আমার ধারণা এই কৌশলটিও সেই সমস্যাটি সমাধান করবে।

পোস্টের লেখককে glenngv করার জন্য একটি 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;
}

জেএস:

// 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: কার্সারটি কার্যকর করুনআমার্টিপেজ od

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

এটি কী করে: পৃষ্ঠায় সমস্ত উপাদান পাওয়া যায়। ধাপ ১ এ ঘোষিত অ্যারেতে তাদেরকে দেওয়া আসল কার্সারগুলি সংরক্ষণ করুন

পদক্ষেপ 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");

একটি বিকল্প (এবং সম্ভবত কিছুটা বেশি পঠনযোগ্য) সংস্করণটি হ'ল একটি সেটকার্সার ফাংশন তৈরি করা হবে:

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

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

এবং তারপর কল

setCursor("wait");

এবং

setCursor("default");

যথাক্রমে অপেক্ষা কার্সার এবং ডিফল্ট কার্সার সেট করতে।