একটি ডিভি দৃশ্যমান করা হলে ক্রিয়াকলাপের জন্য jQuery ইভেন্ট


312

আমি আমার সাইটে jQuery ব্যবহার করছি এবং একটি নির্দিষ্ট ডিভ দৃশ্যমান হয়ে গেলে আমি কিছু ক্রিয়া ট্রিগার করতে চাই।

স্বেচ্ছাসেবী ডিভগুলিতে কোনও ধরণের "isvisible" ইভেন্ট হ্যান্ডলার সংযুক্ত করা এবং ডিভটি দৃশ্যমান করা হলে নির্দিষ্ট কোড চালানো সম্ভব?

আমি নীচের সিউডোকোডের মতো কিছু চাই:

$(function() {
  $('#contentDiv').isvisible(function() {
    alert("do something");
  });
});

কনটেন্টডিভি বাস্তবে দৃশ্যমান না হওয়া অবধি সতর্কতা ("কিছু করুন") কোডটি চলবে না।

ধন্যবাদ।


উত্তর:


190

আপনি সর্বদা মূল। শো () পদ্ধতিতে যুক্ত করতে পারেন তাই প্রতিবার যখন কোনও কিছু দেখানোর সময় আপনার ইভেন্টগুলি ট্রিগার করতে হবে না বা যদি প্রয়োজন লেগ্যাসি কোড দিয়ে কাজ করার প্রয়োজন হয়:

জ্যাকুরি এক্সটেনশন:

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

ব্যবহারের উদাহরণ:

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});

এটি কার্যকরভাবে আপনাকে মূল। শো () পদ্ধতির স্বাভাবিক আচরণ সম্পাদন করার সময় প্রদর্শন এবং পরে প্রদর্শন করার আগে কিছু করতে দেয়।

আপনি অন্য একটি পদ্ধতিও তৈরি করতে পারেন যাতে আপনাকে মূল। শো () পদ্ধতিটি ওভাররাইড করতে হবে না।


7
সম্পাদনা: এই পদ্ধতির সাথে কেবলমাত্র একটি খারাপ দিক রয়েছে: উপাদানটি প্রকাশ করে এমন সমস্ত পদ্ধতির জন্য আপনাকে একই "এক্সটেনশন" পুনরাবৃত্তি করতে হবে: শো (), স্লাইডডাউন () ইত্যাদি একবার এবং এই সমস্যার সমাধান করার জন্য আরও কিছু সার্বজনীন প্রয়োজন is সবই, প্রতিনিধি () বা লাইভ () এর জন্য "প্রস্তুত" ইভেন্ট থাকা অসম্ভব।
শাহরিয়ার ইমানভ

1
ভাল, একমাত্র সমস্যা হ'ল fadeToএই ফাংশনটি কার্যকর করার পরে ফাংশনটি সঠিকভাবে কাজ করে না
ওমিড

9
আপনার কোডটি সর্বশেষ jQuery (এই মন্তব্যের তারিখে 1.7.1) এর সাথে কাজ করে না বলে মনে হচ্ছে। : আমি সামান্য সর্বশেষ jQuery সঙ্গে কাজ এই সমাধান reworked আছে stackoverflow.com/a/9422207/135968
mkmurray

1
একটি কোডটি আজকের প্রতিক্রিয়া দ্বারা ট্রিভ করে ডিভ দৃশ্যমানতার সাথে কাজ করতে পারে না।
জ্যাক দ্য কেইনফ

নবাবী এখানে। আপত্তি (এবং নিউক্যালব্যাক) কেন প্রয়োগ () প্রয়োগ হিসাবে দেখা যায় ফাংশন () ঘোষণার বাইরে উল্লেখ করা যেতে পারে তা আমি বুঝতে পারি না। আমাকে শিখানো হয়েছিল যে ভরের সাথে ঘোষণার ফলে ভেরিয়েবলগুলি স্থানীয় হয় তবে "ভার" অপসারণ সেগুলি স্বয়ংক্রিয়ভাবে বৈশ্বিক হয়ে যায়।
Yuta73

85

সমস্যাটি ডিওএম মিউটেশন পর্যবেক্ষকরা দেখছেন । তারা আপনাকে কোনও পর্যবেক্ষককে (একটি ফাংশন) বাছাইয়ের ইভেন্টগুলিতে সামগ্রী, পাঠ্য বা ডোম উপাদানগুলির বৈশিষ্ট্যগুলিকে আবদ্ধ করার অনুমতি দেয়।

আইই ১১-এর মুক্তির সাথে সমস্ত বড় ব্রাউজার এই বৈশিষ্ট্যটিকে সমর্থন করে, http://caniuse.com/mutesobserver দেখুন

উদাহরণ কোডটি নিম্নলিখিত:

$(function() {
  $('#show').click(function() {
    $('#testdiv').show();
  });

  var observer = new MutationObserver(function(mutations) {
    alert('Attributes changed!');
  });
  var target = document.querySelector('#testdiv');
  observer.observe(target, {
    attributes: true
  });

});
<div id="testdiv" style="display:none;">hidden</div>
<button id="show">Show hidden div</button>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


3
এটি একটি দুঃখের বিষয় যে আইই এখনও এটি সমর্থন করে না। caniuse.com/mutesobserver -> এটি সমর্থন করে এমন ব্রাউজারগুলি দেখতে।
ccsakuweb

2
এটি প্রকৃতপক্ষে কাজ করে, এবং লিগ্যাসি ব্রাউজারগুলিকে সমর্থন করার দরকার নেই তাই নিখুঁত! আমি এখানে উত্তরের জেএসফিডেল প্রমাণ যুক্ত করেছি: jsfiddle.net/DanAtkinson/26URF
ড্যান অ্যাটকিনসন

ক্রোমে ভাল কাজ করে তবে ব্ল্যাকবেরি 10 ক্যাসকেড ওয়েবভিউতে কাজ করে না (যদি অন্য কেউ যত্ন করে;))
গিলিয়াম গেন্ড্রে

1
যদি নজরদারি করা হচ্ছে তার পূর্ব পুরুষের কোনও বৈশিষ্ট্য পরিবর্তনের কারণে দৃশ্যমানতার পরিবর্তন ঘটে তবে এটি কাজ করবে বলে মনে হচ্ছে না।
মাইকেল

4
এটি ক্রোম 51 এ কাজ করছে বলে মনে হচ্ছে না কেন তা নিশ্চিত নয়। উপরের কোডটি চালাচ্ছি এবং বোতাম টিপছে, কোনও সতর্কতা নেই।
ক্রিস

76

কোনও নেটিভ ইভেন্ট নেই যার জন্য আপনি হুক করতে পারেন তবে আপনি স্ক্রিপ্ট থেকে একটি ইভেন্ট ট্রিগার করতে পারেন আপনার ব্যবহার করে ডিভিটি দৃশ্যমান করার পরে। ট্রিগার ফাংশন

যেমন

//declare event to run when div is visible
function isVisible(){
   //do something

}

//hookup the event
$('#someDivId').bind('isVisible', isVisible);

//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
    $(this).trigger('isVisible');
});

45
এখানে আমার সীমাবদ্ধতা হ'ল আমার অগত্যা কোডটি অ্যাক্সেস নেই যা () এর আমার ডিভিটি দেখায়। সুতরাং আমি আসলে ট্রিগার () পদ্ধতিতে কল করতে সক্ষম হব না।
ফ্র্যাঙ্কাডেলিক

11
জেএসটি আমার সংস্থার বাইরে একটি উন্নয়ন দল সরবরাহ করেছিল। এটি একটি "ব্ল্যাক বক্স" এরও কিছু, তাই সম্ভব হলে আমরা সেই কোডটি সংশোধন করতে চাই না। যদিও এটি আমাদের একমাত্র পছন্দ হতে পারে।
ফ্রাঙ্কাডেলিক

আপনি নিজের প্রয়োগ দ্বারা সর্বদা তাদের জেএস ফাংশনগুলির উপর স্ট্যাম্প লাগাতে পারেন। বেহাল মনে হচ্ছে!
redsquare

11
@ রেডস্কোয়ার: show()উপরে বর্ণিত কোড ব্লক ব্যতীত অন্য একাধিক স্থান থেকে কল করা হলে কী হবে ?
রবিন মাবেন

1
এই উদাহরণস্বরূপ, আপনার ফাংশনটির নামটি পরিবর্তন করা উচিত onIsVisibleকারণ এই মুহুর্তে "ইসভিজিবল" এর ব্যবহারটি কিছুটা অস্পষ্ট।
ব্র্যাড জনসন

27

আপনি jQuery এর লাইভ ক্যোয়ারী প্লাগইন ব্যবহার করতে পারেন । এবং নিম্নলিখিত কোড লিখুন:

$('#contentDiv:visible').livequery(function() {
    alert("do something");
});

তারপরে প্রতিবার কন্টেন্টডিভি দৃশ্যমান হয়, "কিছু করুন" সতর্ক করা হবে!


ভাল ডাং, যে কাজ করে। আমি এটি সম্পর্কে চিন্তা করেছিলাম এবং এটি চেষ্টা না করে কাজ করার সম্ভাবনা হিসাবে প্রত্যাখ্যান করেছি। এটি চেষ্টা করা উচিত ছিল। :)
নিমিনেম

1
আমার পক্ষে কাজ করেনি। আমি ত্রুটি পেয়েছি "লাইভকুরি একটি ফাংশন নয়"। "Jquery-1.12.4.min.js" এবং "jquery-3.1.1.min.js" উভয়ই দিয়ে চেষ্টা করেছেন
পল গর্বাস

2
@ পল: এটি একটি প্লাগইন
খ্রিস্টান

এটি আপনার ওয়েবসাইটকে যথেষ্ট গতিতে পারে! লাইভকিউরি প্লাগইনটি ডিওএম মিউটেশন পর্যবেক্ষকের মতো আধুনিক দক্ষ পদ্ধতি ব্যবহার না করে বৈশিষ্ট্যগুলিতে দ্রুত ভোটদান করে। : তাই আমি @hegemon সমাধান পেশ করবো stackoverflow.com/a/16462443/19163 1 ঘন্টা আগে vog - (শুধুমাত্র পুরনো ইন্টারনেট সংস্করণের জন্য একটি ফলব্যাক হিসাবে এবং ব্যবহার পোলিং)
vog

20

redsquare এর সমাধান সঠিক উত্তর।

তবে ইন-থিয়োরি সমাধান হিসাবে আপনি এমন একটি ফাংশন লিখতে পারেন যা শ্রেণিবদ্ধ উপাদানগুলি .visibilityCheck( সমস্ত দৃশ্যমান উপাদান নয় ) নির্বাচন করছে এবং তাদের visibilityসম্পত্তির মূল্য চেক করতে পারে; যদিtrue কিছু কর

এরপরে, ফাংশনটি পর্যায়ক্রমে setInterval()ফাংশনটি ব্যবহার করে সম্পাদন করা উচিত । আপনি টাইমারটি ব্যবহার করে থামাতে পারেনclearInterval()সফল কল-আউট ।

এখানে একটি উদাহরণ:

function foo() {
    $('.visibilityCheck').each(function() {
        if ($(this).is(':visible')){
            // do something
        }
    });
}

window.setInterval(foo, 100);

আপনি এটিতে কিছু কার্যকারিতা উন্নতি করতে পারেন, তবে সমাধানটি কার্যত ব্যবহারের জন্য অযৌক্তিক। তাই ...


5
সেটটাইমআউট / সেটইন্টারভাল এর ভিতরে অন্তর্নির্মিত ফানক ব্যবহার করা ভাল ফর্ম নয়। সেটটাইমআউট (foo, 100) ব্যবহার করুন
০১:

1
আমার কাছে এটি আপনার হাতে দিতে হবে, এটি সৃজনশীল, যদিও বাজে। আইই 8-অনুগতভাবে আমার জন্য কৌতুকটি করার জন্য এটি কেবল দ্রুত এবং নোংরা ছিল। ধন্যবাদ!
জেডি স্মিথ

বা display:none?
মাইকেল

12

নিম্নলিখিত কোড ( http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/ থেকে টানা ) আপনাকে ব্যবহার করতে সক্ষম করবে $('#someDiv').on('show', someFunc);

(function ($) {
  $.each(['show', 'hide'], function (i, ev) {
    var el = $.fn[ev];
    $.fn[ev] = function () {
      this.trigger(ev);
      return el.apply(this, arguments);
    };
  });
})(jQuery);

8
এটি আমার পক্ষে নিখুঁতভাবে কাজ করেছে, তবে এটি লক্ষ্য করা গুরুত্বপূর্ণ যে অনুষ্ঠানটিতে শৃঙ্খলাবদ্ধতা ভাঙা এবং ফাংশনগুলি আড়াল করে, যা অনেকগুলি প্লাগইনকে ভেঙে দেয়। el.apply(this, arguments)এটি ঠিক করতে সামনে একটি রিটার্ন যুক্ত করুন ।
jaimerump

এটাই আমি খুঁজছিলাম! রিটার্ন চাহিদা @jaimerump থেকে মন্তব্যে হিসেবে যোগ করার জন্য
Brainfeeder

9

আপনি যদি ইভেন্টটি সমস্ত উপাদানগুলিতে (এবং শিশু উপাদানগুলি) যা ট্রিগার করতে চান যা আসলে visible। প্রদর্শন, টগল, টগলক্লাস, অ্যাডক্লাস বা সরানো ক্লাস দ্বারা দৃশ্যমান হয়েছে:

$.each(["show", "toggle", "toggleClass", "addClass", "removeClass"], function(){
    var _oldFn = $.fn[this];
    $.fn[this] = function(){
        var hidden = this.find(":hidden").add(this.filter(":hidden"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function(){
            $(this).triggerHandler("show"); //No bubbling
        });
        return result;
    }
});

এবং এখন আপনার উপাদান:

$("#myLazyUl").bind("show", function(){
    alert(this);
});

উপরে অতিরিক্ত অ্যারেতে যোগ করে আপনি অতিরিক্ত jQuery ফাংশনগুলিতে ওভাররাইডগুলি যুক্ত করতে পারেন ("অ্যাটর" এর মতো)


9

গ্লেনস আইডিয়ার উপর ভিত্তি করে একটি লুকান / শো ইভেন্ট ট্রিগার: টগল সরানো হয়েছে কারণ এটি শো / লুকানোর জন্য আগুন লেগেছে এবং আমরা একটি ইভেন্টের জন্য 2 ফায়ার চাই না

$(function(){
    $.each(["show","hide", "toggleClass", "addClass", "removeClass"], function(){
        var _oldFn = $.fn[this];
        $.fn[this] = function(){
            var hidden = this.find(":hidden").add(this.filter(":hidden"));
            var visible = this.find(":visible").add(this.filter(":visible"));
            var result = _oldFn.apply(this, arguments);
            hidden.filter(":visible").each(function(){
                $(this).triggerHandler("show");
            });
            visible.filter(":hidden").each(function(){
                $(this).triggerHandler("hide");
            });
            return result;
        }
    });
});

2
আপনারও কি অ্যাটর চেক করা উচিত এবং এটিও সরানো উচিত?
Andrija

5

আমার একই সমস্যা ছিল এবং এটি আমাদের সাইটের জন্য সমাধানের জন্য একটি jQuery প্লাগইন তৈরি করেছি।

https://github.com/shaunbowe/jquery.visibilityChanged

আপনার উদাহরণের ভিত্তিতে আপনি এটি কীভাবে ব্যবহার করবেন তা এখানে:

$('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

1
পোলিং খুব দক্ষ নয়, এবং যদি ব্রাউজারটি অনেক উপাদানের জন্য ব্যবহৃত হয় তবে তা উল্লেখযোগ্যভাবে কমিয়ে দেয়।
সেরিন

4

JQuery ওয়েপয়েন্টস ব্যবহার করুন:

$('#contentDiv').waypoint(function() {
   alert('do something');
});

JQuery ওয়েপয়েন্টস এর সাইটের অন্যান্য উদাহরণ ।


1
এটি কেবল তখন কাজ করে যখন আইটেমটি স্ক্রোলিংয়ের কারণে দৃশ্যমান হয়ে ওঠে এবং অন্যান্য অগ্রগতিমূলক পরিবর্তনের কারণে নয়।
অ্যাডমজোনস

@ অ্যাডম জোনস যখন আমি কীবোর্ড ব্যবহার করি তখন এটি আশানুরূপভাবে কাজ করে। উদাহরণস্বরূপ
ফেদির আরওয়াইকিটিক

4

আমাকে এখানে কী সাহায্য করেছে তা হল সাম্প্রতিক রেসাইজঅবার্সার স্পেস পলিফিল :

const divEl = $('#section60');

const ro = new ResizeObserver(() => {
    if (divEl.is(':visible')) {
        console.log("it's visible now!");
    }
});
ro.observe(divEl[0]);

মনে রাখবেন এটি ক্রসব্রোজার এবং পারফরম্যান্ট (কোনও ভোটদান নেই)।


প্রতিবার একটি সারণী সারি দেখানো / অন্যের মতো লুকানো থাকলে তা সনাক্ত করার জন্য ভাল কাজ করে, এছাড়াও একটি প্লাস কোনও প্রয়োজনীয় প্লাগইন ছিল না!
ব্রেটসি

3

এটি অর্জনের জন্য আমি একটি সাধারণ সেটিনটারওয়াল ফাংশন করেছি। শ্রেণি দ্বি 1 সহ উপাদানটি দৃশ্যমান হলে, এটি div2 কে দৃশ্যমান হতে সেট করে। আমি একটি ভাল পদ্ধতি জানি না, তবে একটি সহজ ফিক্স।

setInterval(function(){
  if($('.div1').is(':visible')){
    $('.div2').show();
  }
  else {
    $('.div2').hide();
  }      
}, 100);


2

অ্যানিমেশন সম্পন্ন হওয়ার পরে এই সমর্থনটি সহজ এবং ট্রিগার ইভেন্ট! [jQuery 2.2.4 এ পরীক্ষিত]

(function ($) {
    $.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
            var result = el.apply(this, arguments);
            var _self=this;
            result.promise().done(function () {
                _self.triggerHandler(ev, [result]);
                //console.log(_self);
            });
            return result;
        };
    });
})(jQuery);

Http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/ দ্বারা অনুপ্রাণিত


2

কেবল নির্বাচকের সাথে ট্রিগার বেঁধে কোডটি ট্রিগার ইভেন্টে রেখে দিন:

jQuery(function() {
  jQuery("#contentDiv:hidden").show().trigger('show');

  jQuery('#contentDiv').on('show', function() {
    console.log('#contentDiv is now visible');
    // your code here
  });
});

আমি মনে করি এটি বেশ মার্জিত সমাধান। এটা আমার জন্য কাজ করেছে।
KIKO সফটওয়্যার

1

DOM বৈশিষ্ট্যগুলির পরিবর্তন দেখার জন্য একটি jQuery প্লাগইন উপলব্ধ রয়েছে,

https://github.com/darcyclarke/jQuery-Watch-Plugin

প্লাগইন মোড়ক আপনার যা করতে হবে তা হ'ল মিউটেশনঅবার্সারকে আবদ্ধ করুন

তারপরে আপনি ডিভটি দেখতে এটি ব্যবহার করে ব্যবহার করতে পারেন:

$("#selector").watch('css', function() {
    console.log("Visibility: " + this.style.display == 'none'?'hidden':'shown'));
    //or any random events
});


0

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

$.each(["show", "hide", "toggleClass", "addClass", "removeClass"], function () {
    var _oldFn = $.fn[this];
    $.fn[this] = function () {
        var hidden = this.find(".displayObserver:hidden").add(this.filter(":hidden"));
        var visible = this.find(".displayObserver:visible").add(this.filter(":visible"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function () {
            $(this).triggerHandler("show");
        }); 
        visible.filter(":hidden").each(function () {
            $(this).triggerHandler("hide");
        });
        return result;
    }
});

তারপরে যখন কোনও শিশু "শো" বা "লুকান" ইভেন্টের জন্য শুনতে চায় তখন আমি তাকে "ডিসপ্লেওবার্সার" ক্লাসটি যুক্ত করতে হবে এবং যখন এটি শুনতে অবিরত করতে চায় না, তখন আমি তাকে ক্লাসটি সরিয়ে দেব

bindDisplayEvent: function () {
   $("#child1").addClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
   $("#child1").on("show", this.onParentShow);
},

bindDisplayEvent: function () {
   $("#child1").removeClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
},

আমি সাহায্য চান


0

এটি করার একটি উপায়।
সিএসএস বর্গ পরিবর্তন দ্বারা তৈরি হওয়া কেবল দৃশ্যমানতার পরিবর্তনের উপরই কাজ করে তবে গুণাবলীর পরিবর্তনের জন্যও এটি প্রসারিত হতে পারে।

var observer = new MutationObserver(function(mutations) {
        var clone = $(mutations[0].target).clone();
        clone.removeClass();
                for(var i = 0; i < mutations.length; i++){
                    clone.addClass(mutations[i].oldValue);
        }
        $(document.body).append(clone);
        var cloneVisibility = $(clone).is(":visible");
        $(clone).remove();
        if (cloneVisibility != $(mutations[0].target).is(":visible")){
            var visibilityChangedEvent = document.createEvent('Event');
            visibilityChangedEvent.initEvent('visibilityChanged', true, true);
            mutations[0].target.dispatchEvent(visibilityChangedEvent);
        }
});

var targets = $('.ui-collapsible-content');
$.each(targets, function(i,target){
        target.addEventListener('visibilityChanged',VisbilityChanedEventHandler});
        target.addEventListener('DOMNodeRemovedFromDocument',VisbilityChanedEventHandler });
        observer.observe(target, { attributes: true, attributeFilter : ['class'], childList: false, attributeOldValue: true });
    });

function VisbilityChanedEventHandler(e){console.log('Kaboom babe'); console.log(e.target); }

0

আমার সমাধান:

; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = $.fn[ name ];
    $.fn[ name ] = function( speed, easing, callback ) {
        if(speed == null || typeof speed === "boolean"){
            var ret=cssFn.apply( this, arguments )
            $.fn.triggerVisibleEvent.apply(this,arguments)
            return ret
        }else{
            var that=this
            var new_callback=function(){
                callback.call(this)
                $.fn.triggerVisibleEvent.apply(that,arguments)
            }
            var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
            return ret
        }
    };
});

$.fn.triggerVisibleEvent=function(){
    this.each(function(){
        if($(this).is(':visible')){
            $(this).trigger('visible')
            $(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
        }
    })
}
})(jQuery);

উদাহরণস্বরূপ ব্যবহার:

if(!$info_center.is(':visible')){
    $info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
    processMoreLessButton()
}

function processMoreLessButton(){
//some logic
}

0
$( window ).scroll(function(e,i) {
    win_top = $( window ).scrollTop();
    win_bottom = $( window ).height() + win_top;
    //console.log( win_top,win_bottom );
    $('.onvisible').each(function()
    {
        t = $(this).offset().top;
        b = t + $(this).height();
        if( t > win_top && b < win_bottom )
            alert("do something");
    });
});

-2
<div id="welcometo"zhan</div>
<input type="button" name="ooo" 
       onclick="JavaScript:
                    if(document.all.welcometo.style.display=='none') {
                        document.all.welcometo.style.display='';
                    } else {
                        document.all.welcometo.style.display='none';
                    }">

এই কোড স্বয়ংক্রিয় নিয়ন্ত্রণের জন্য কোয়েরিকে দৃশ্যমান বা অদৃশ্য নিয়ন্ত্রণের প্রয়োজন নেই

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.