Question

Hi I have been trying to get this script http://jsbin.com/ipajo5/ working but using .live() instead of .each() since the html table is populated on the fly.

$(document).ready(function() {

  $('.bi').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    var hideDelayTimer = null;

    var beingShown = false;
    var shown = false;

    var trigger = $('.tt', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;    
        popup.css({
          top: $(this).position().top-150,
          left: $(this).position().left-100,
          display: 'block' 
        })
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          shown = false;
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });

});​

Note. In some threads it is recomended to use delegate() instead live() for performance, but after many days I only want this popup/tooltip to work.

Thank you.

Answer 1

You actually don’t need to change anything. I have a similar function, but a little more extended. Just remove it from the document.ready function.
Mind you, you are better of using delegate() instead of live(). Due to bubbling. If you want a fully automated page, that is uploaded on the fly take a look at jaltiere.com

But you will need to fully rewrite your script. Besides, both live() and delegate() are difficult to set up with mouseover and mouseout events.

No caching in the document.ready:

$(document).ready(function() {
            $.ajaxSetup({ cache: false });});

On page load, do your ajax-call and call your script as a seperate function:

$(function() {
$.get("ajaxpage.php", function(data) {
    $("#recent").html(data);
    bifunct();
});});

Seperate function for an update:

function ajaxcall(){
$.get("ajaxpage.php?", function(data) {
    $("#recent").html(data);
    bifunct();
});};

And now your script. I’ve changed your mouseover and mouseout to mouseenter and mouseleave. They work slightly better.

bifunct = function(){
$('.bi').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;
    var hideDelayTimer = null;
    var beingShown = false;
    var shown = false;
    var trigger = $('.tt', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseenter(function () {
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        if (beingShown || shown) {
            return;
        } else {
            beingShown = true;    
            popup.css({
                top: $(this).position().top-150,
                left: $(this).position().left-100,
                display: 'block' 
            })
            .animate({
                top: '-=' + distance + 'px',
                opacity: 1
            }, time, 'swing', function() {
                beingShown = false;
                shown = true;
            });
        }
    }).mouseleave(function () {
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        hideDelayTimer = setTimeout(function () {
            hideDelayTimer = null;
            popup.animate({
                top: '-=' + distance + 'px',
                opacity: 0
            }, time, 'swing', function () {
                shown = false;
                popup.css('display', 'none');
            });
        }, hideDelay);
    });
});}

If you want to update, simply put this in your body, or change it to call the ajaxcall-function:

<a onclick="ajaxcall();return false" href="#"> update </a>