jQuery event to trigger action when a div is made visible

后端 未结 22 2210
你的背包
你的背包 2020-11-22 12:03

I\'m using jQuery in my site and I would like to trigger certain actions when a certain div is made visible.

Is it possible to attach some sort of \"isvisible\" even

相关标签:
22条回答
  • 2020-11-22 12:38

    The problem is being addressed by DOM mutation observers. They allow you to bind an observer (a function) to events of changing content, text or attributes of dom elements.

    With the release of IE11, all major browsers support this feature, check http://caniuse.com/mutationobserver

    The example code is a follows:

    $(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="https://code.jquery.com/jquery-1.9.1.min.js"></script>

    0 讨论(0)
  • 2020-11-22 12:39

    There is a jQuery plugin available for watching change in DOM attributes,

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

    The plugin wraps All you need do is bind MutationObserver

    You can then use it to watch the div using:

    $("#selector").watch('css', function() {
        console.log("Visibility: " + this.style.display == 'none'?'hidden':'shown'));
        //or any random events
    });
    
    0 讨论(0)
  • 2020-11-22 12:39

    One way to do this.
    Works only on visibility changes that are made by css class change, but can be extended to watch for attribute changes too.

    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 讨论(0)
  • 2020-11-22 12:41
    $( 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");
        });
    });
    
    0 讨论(0)
提交回复
热议问题