JQUERY error : null or not an object. Any Jquery Ninjas that can help?
Any JQUERY NINJA's out there?
Getting an error in IE ?
'tip' is null or not an object
Here is the small script:
$(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 });
}
});
});
Updated Code:(Can't seem to integrate your updated code into this)
$(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();
$开发者_如何学Go('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 });
}
});
});
$(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 });
});
});
});
Live demo: http://jsfiddle.net/vNBNz/4/
As you can see, the above code works. In the live demo, notice this CSS rule:
.tip_trigger .tip { display:none; }
The above rule will hide all .tip
elements, but only if they are inside a .tip_trigger
element. This means that as soon as you append a .tip
element to the BODY, it will be displayed because the "hide-rule" only applies to .tip
elements inside .tip_trigger
.
This is because in IE move
can happen before hover
. Try out this example. I did not reproduce this functionality in Chrome. And my IE test was IE9 beta.
So my guess is that it is failing on this line:
var tipWidth = tip.width();
Of the mousemove callback because var tip;
is still undefined
.
精彩评论