Ошибка JQUERY: ноль или нет объекта.Любые Jquery Ninjas, которые могут помочь? - PullRequest
Новая
       1

Ошибка JQUERY: ноль или нет объекта.Любые Jquery Ninjas, которые могут помочь?

0 голосов
/ 12 февраля 2011

Есть ли JQUERY NINJA?

Получаете ошибку в IE?

'tip' is null or not an object

Вот небольшой скрипт: 

  $(document).ready(function() {
       //Tooltips
        var tip;
        $(".tip_trigger").hover(function(){

            //Caching the tooltip and removing it from container; then appending it to the body
            tip = $(this).find('.tip').remove();
            $('body').append(tip);

            tip.show(); //Show tooltip


        }, function() {

            tip.hide().remove(); //Hide and remove tooltip appended to the body
            $(this).append(tip); //Return the tooltip to its original position

        }).mousemove(function(e) {
        //console.log(e.pageX)
              var mousex = e.pageX + 20; //Get X coodrinates
              var mousey = e.pageY + 20; //Get Y coordinates
              var tipWidth = tip.width(); //Find width of tooltip
              var tipHeight = tip.height(); //Find height of tooltip

             //Distance of element from the right edge of viewport
              var tipVisX = $(window).width() - (mousex + tipWidth);
              var tipVisY = $(window).height() - (mousey + tipHeight);

            if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                mousex = e.pageX - tipWidth - 20;
                $(this).find('.tip').css({  top: mousey, left: mousex });
            } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                mousey = e.pageY - tipHeight - 20;
                tip.css({  top: mousey, left: mousex });
            } else {
                tip.css({  top: mousey, left: mousex });
            }
        });

    });

Обновленный код: (кажется, не могу интегрировать ваш обновленный код в это) 

$(document).ready(function() {
   //Tooltips
    var tip = null;

    $(".tip_trigger").hover(function(){

        //Caching the tooltip and removing it from container; then appending it to the body
        tip = $(this).find('.tip').remove();
        $('body').append(tip);

        tip.show(); //Show tooltip


    }, function() {

        tip.hide().remove(); //Hide and remove tooltip appended to the body
        $(this).append(tip); //Return the tooltip to its original position

    }).mousemove(function(e) {
    //console.log(e.pageX)
          if ( tip == null ) return;


          var mousex = e.pageX + 20; //Get X coodrinates
          var mousey = e.pageY + 20; //Get Y coordinates
          var tipWidth = tip.width(); //Find width of tooltip
          var tipHeight = tip.height(); //Find height of tooltip

         //Distance of element from the right edge of viewport
          var tipVisX = $(window).width() - (mousex + tipWidth);
          var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
            $(this).find('.tip').css({  top: mousey, left: mousex });
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
            tip.css({  top: mousey, left: mousex });
        } else {
            tip.css({  top: mousey, left: mousex });
        }
    });

});

Ответы [ 2 ]

6 голосов
/ 12 февраля 2011 
$(function() {

    $('.tip_trigger').each(function() {        
        var tip = $(this).find('.tip');

        $(this).hover(
            function() { tip.appendTo('body'); },
            function() { tip.appendTo(this); }
        ).mousemove(function(e) {
            var x = e.pageX + 20,
                y = e.pageY + 20,
                w = tip.width(),
                h = tip.height(),
                dx = $(window).width() - (x + w),
                dy = $(window).height() - (y + h);

            if ( dx < 20 ) x = e.pageX - w - 20;
            if ( dy < 20 ) y = e.pageY - h - 20;

            tip.css({ left: x, top: y });
        });         
    });

});

Демонстрационная версия: http://jsfiddle.net/vNBNz/4/

Как видите, приведенный выше код работает.В демонстрационной версии обратите внимание на это правило CSS: 

.tip_trigger .tip { display:none; }

Приведенное выше правило будет скрывать все элементы .tip, но только если они находятся внутри элемента .tip_trigger.Это означает, что как только вы добавите элемент .tip в ТЕЛО, он будет отображаться, потому что «правило скрытия» применяется только к .tip элементам внутри .tip_trigger.

2 голосов
/ 12 февраля 2011

Это потому, что в IE move может произойти раньше hover. Попробуйте из этого примера . Я не воспроизводил эту функциональность в Chrome. И мой тест IE был бета-версией IE9.

Так что я предполагаю, что в этой строке произойдет сбой: 

var tipWidth = tip.width();

Обратного вызова MouseMove, потому что var tip; по-прежнему undefined.

...