css - tutorial - w3schools javascript

1. উপাদান overlaying লুকান
2. কার্সার সমন্বয় নির্ধারণ করুন
3. যারা সমন্বয় উপাদান পান
4. ট্রিগার উপাদান উপর ক্লিক করুন
5. আবার overlaying উপাদান দেখান

    $('#elementontop).click(function (e) {
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#elementontop').show();
    });

অন্তর্নিহিত উপাদান একটি DIV মাধ্যমে ক্লিক করুন ব্রাউজারে ভিন্ন কাজ করে। অপেরা ম্যানুয়াল ইভেন্ট ফরোয়ার্ড প্রয়োজন, ফায়ারফক্স এবং ক্রোম সিএসএস pointer-events:none; বুঝতে pointer-events:none; এবং IE স্বচ্ছ পটভূমি সঙ্গে কিছু প্রয়োজন হয় না; উদাহরণস্বরূপ background:white; opacity:0; filter:Alpha(opacity=0); background:white; opacity:0; filter:Alpha(opacity=0); IE অপেরা মত ফরওয়ার্ডিং প্রয়োজন।

এবং এ ফরোয়ার্ড পরীক্ষা দেখুন। পয়েন্টার-ইভেন্ট CSS বৈশিষ্ট্যটি CSS3-UI থেকে CSS4-UI এ সরানো হয়েছে।

আমি event.stopPropagation(); পাশাপাশি এখানে উল্লেখ করা উচিত। আপনার বাটন ক্লিক করুন এই ফাংশন যোগ করুন।

অনুষ্ঠানটি অবহিত করা থেকে কোনও পিতা-মাতার হ্যান্ডলারদের প্রতিরোধ করা, DOM ট্রি বুদবুদ থেকে ইভেন্টটিকে আটকায়।

আমি এই উত্তর যোগ করছি কারণ আমি এখানে সম্পূর্ণ দেখতে পাইনি। আমি elementFromPoint ব্যবহার করে এই কাজ করতে সক্ষম ছিল। তাই মূলত:

• আপনি ক্লিক ক্লিক করতে চান div ক্লিক করুন
• এটা লুকানোর
• পয়েন্টার কি উপাদান নির্ধারণ করুন
• সেখানে উপাদান ক্লিক করুন আগুন।

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

আমার ক্ষেত্রে ওভারলেভিং ডিভিটি একেবারে স্থির থাকে- এটি একটি পার্থক্য করে কিনা তা আমি নিশ্চিত নই। এটি IE8 / 9, সাফারি ক্রোম এবং ফায়ারফক্সে কমপক্ষে কাজ করে।

আমি বর্তমানে ক্যানভাস বক্তৃতা বেলুন সঙ্গে কাজ। কিন্তু পয়েন্টারের সাথে বেলুনটি একটি ডিভিতে মোড়ানো হয় কারণ এর নীচে কিছু লিঙ্ক আর ক্লিক করতে পারবেন না। আমি এই ক্ষেত্রে extj ব্যবহার করতে পারবেন না। আমার বক্তৃতা বেলুন টিউটোরিয়ালটির জন্য HTML5 এর জন্য মৌলিক উদাহরণ দেখুন

তাই আমি একটি অ্যারে বেলুন ভিতরে থেকে সব লিঙ্ক সমন্বয় সংগ্রহ করার সিদ্ধান্ত নিয়েছে।

var clickarray=[];
function getcoo(thatdiv){
         thatdiv.find(".link").each(function(){
                 var offset=$(this).offset();           
                 clickarray.unshift([(offset.left),
                                     (offset.top),
                                     (offset.left+$(this).width()),
                                     (offset.top+$(this).height()),
                                     ($(this).attr('name')),
                                     1]);
                                     });
         }

আমি প্রতিটি (নতুন) বেলুন এই ফাংশন কল। এটি একটি link.class এর বাম / শীর্ষ এবং ডান / নীচের কোণগুলির সমন্বয়গুলি ধরে রাখে - যদি কোনও সেই সমন্বয়কারীকে ক্লিক করে তবে কী করতে হবে তার জন্য অতিরিক্ত নামটির বৈশিষ্ট্য এবং আমি 1 সেট করতে পছন্দ করি যার মানে এটি জেট ক্লিক করা হয়নি । এবং clickarray এই অ্যারে unshift। আপনি খুব ধাক্কা ব্যবহার করতে পারে।

যে অ্যারের সাথে কাজ করতে:

$("body").click(function(event){
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray){
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
                }
             }
          if(job.length>0){   
             // --do some thing with the job --
            }
          });

এই ফাংশন একটি শরীরের ক্লিক ইভেন্টের সমন্বয় প্রমাণ করে বা এটি ইতিমধ্যে ক্লিক করা হয়েছে এবং নাম গুণাবলী ফেরত প্রদান কিনা। আমি গভীর যেতে প্রয়োজন বোধ করি না, কিন্তু আপনি এটা জটিল না দেখতে। আশা ছিল উজ্জ্বল ...

আমি মনে করি আপনি আপনার মার্কআপ পরিবর্তন বিবেচনা করতে পারেন। আমি ভুল না হলে, আপনি নথির উপরে একটি অদৃশ্য স্তর স্থাপন করতে চান এবং আপনার অদৃশ্য মার্কআপ আপনার নথির চিত্রের পূর্ববর্তী হতে পারে (এটি কি সঠিক?)।

পরিবর্তে, আমি প্রস্তাব করছি যে আপনি দস্তাবেজ চিত্রের পরে অদৃশ্য অধিকার রাখেন তবে পরম অবস্থানটি পরিবর্তন করুন।

লক্ষ্য করুন যে আপনার পছন্দের অবস্থানের একটি অভিভাবক উপাদান দরকার: আপেক্ষিক এবং তারপরে আপনি এই ধারণাটি ব্যবহার করতে সক্ষম হবেন। অন্যথায় আপনার পরম স্তর শুধু উপরের বাম কোণে স্থাপন করা হবে।

একটি পরম অবস্থান উপাদান স্ট্যাটিক ছাড়া অন্য একটি অবস্থান আছে যা প্রথম পিতামাতার উপাদান আপেক্ষিক অবস্থান করা হয়। যদি কোন উপাদান খুঁজে পাওয়া যায় না, ধারণকারী ব্লক এইচটিএমএল

আশাকরি এটা সাহায্য করবে. সিএসএস পজিশনিং সম্পর্কে আরও তথ্যের জন্য here দেখুন।

এটা যে ভাবে কাজ করে না। চারপাশে কাজ প্রতিটি উপাদান দ্বারা দখল এলাকা বিরুদ্ধে মাউস ক্লিক কোঅর্ডিনেট ম্যানুয়ালি চেক করা হয়।

একটি উপাদান দ্বারা দখল করা এলাকা পাওয়া যায় 1. পৃষ্ঠার উপরের বাম দিকের সাথে উপাদানটির অবস্থান এবং ২। প্রস্থ এবং উচ্চতা। jQuery মত একটি লাইব্রেরি এই প্রশংসনীয় সহজ করে তোলে, যদিও এটি প্লেইন জেসে করা যেতে পারে। document অবজেক্টে mousemove জন্য ইভেন্ট হ্যান্ডলার যুক্ত করলে পৃষ্ঠার উপরের এবং বাম দিক থেকে মাউস অবস্থানের ক্রমাগত আপডেট সরবরাহ করা হবে। কোনো প্রদত্ত বস্তুর উপর মাউস থাকে কিনা তা নির্ধারণ করে একটি উপাদানটির বাম, ডান, শীর্ষ এবং নীচের প্রান্তের মাঝামাঝি মাউস অবস্থানটি পরীক্ষা করে থাকে।

চেষ্টা করার জন্য আরেকটি ধারণা (পরিস্থিতিগতভাবে) হবে:

1. আপনি একটি div চান কন্টেন্ট রাখুন;
2. পুরো পৃষ্ঠার উপরে একটি অ-ক্লিকের ওভারলে রাখুন যা একটি Z- সূচক উচ্চতর,
3. মূল div অন্য cropped কপি করুন
4. ওভারলে এবং এবিসি কপি ডিভিকে একই মূল্যে একই রকমের মূল উপাদান যা আপনি উচ্চতর Z-index দিয়ে ক্লিকযোগ্য হতে চান?

কোন চিন্তা?

না, আপনি একটি উপাদান 'through' ক্লিক করতে পারবেন না। আপনি ক্লিকের সমন্বয়সাধন পেতে পারেন এবং ক্লিককৃত উপাদানটির নীচে কোন উপাদানটি ব্যবহার করতে চেষ্টা করেছিলেন, কিন্তু এটি ব্রাউজারগুলির জন্য সত্যিই ক্লান্তিকর যা তাদের কাছে document.elementFromPoint । তারপরে আপনাকে এখনও ক্লিক করার ডিফল্ট অ্যাকশন অনুকরণ করতে হবে, যা আপনার অধীনে থাকা কোন উপাদানগুলির উপর নির্ভর করে তা অপরিহার্য নয়।

যেহেতু আপনার কাছে সম্পূর্ণরূপে স্বচ্ছ উইন্ডো এলাকা রয়েছে, তাই আপনি এটির বাইরে বাইরের পৃথক সীমানা উপাদানের রূপে প্রয়োগটি আরও ভালভাবে বন্ধ করতে পারবেন, যাতে কেন্দ্রটি বাধা থেকে মুক্ত হয়ে যায় যাতে আপনি কেবলমাত্র সরাসরি মাধ্যমে ক্লিক করতে পারেন।

হ্যাঁ, আপনি এটা করতে পারেন ।

pointer-events: none ব্যবহার করে pointer-events: none IE11- এর জন্য CSS শর্তাধীন বিবৃতি সহ pointer-events: none (IE10 বা তারপরেও কাজ করে না), আপনি এই সমস্যার জন্য ক্রস ব্রাউজারটি উপযুক্ত সমাধান পেতে পারেন।

AlphaImageLoader ব্যবহার করে, আপনি ওভারলে div তে স্বচ্ছ AlphaImageLoader .PNG/.GIF AlphaImageLoader পারেন এবং নীচের উপাদানের মাধ্যমে ক্লিকগুলি প্রবাহিত করতে পারেন।

সিএসএস:

pointer-events: none;
background: url('your_transparent.png');

IE11 শর্তাধীন:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

এখানে সমস্ত কোড সহ একটি মৌলিক উদাহরণ পাতা ।