JQUERY error : null or not an object. Any Jquery Ninjas that can help? -
any jquery ninja's out there?
getting error in ie ?
'tip' null or not object
here small script:
$(document).ready(function() { //tooltips var tip; $(".tip_trigger").hover(function(){ //caching tooltip , removing container; appending body tip = $(this).find('.tip').remove(); $('body').append(tip); tip.show(); //show tooltip }, function() { tip.hide().remove(); //hide , remove tooltip appended body $(this).append(tip); //return tooltip 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 right edge of viewport var tipvisx = $(window).width() - (mousex + tipwidth); var tipvisy = $(window).height() - (mousey + tipheight); if ( tipvisx < 20 ) { //if tooltip exceeds x coordinate of viewport mousex = e.pagex - tipwidth - 20; $(this).find('.tip').css({ top: mousey, left: mousex }); } if ( tipvisy < 20 ) { //if tooltip exceeds 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 integrate updated code this)
$(document).ready(function() { //tooltips var tip = null; $(".tip_trigger").hover(function(){ //caching tooltip , removing container; appending body tip = $(this).find('.tip').remove(); $('body').append(tip); tip.show(); //show tooltip }, function() { tip.hide().remove(); //hide , remove tooltip appended body $(this).append(tip); //return tooltip 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 right edge of viewport var tipvisx = $(window).width() - (mousex + tipwidth); var tipvisy = $(window).height() - (mousey + tipheight); if ( tipvisx < 20 ) { //if tooltip exceeds x coordinate of viewport mousex = e.pagex - tipwidth - 20; $(this).find('.tip').css({ top: mousey, left: mousex }); } if ( tipvisy < 20 ) { //if tooltip exceeds 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 can see, above code works. in live demo, notice css rule:
.tip_trigger .tip { display:none; }
the above rule hide .tip
elements, if inside .tip_trigger
element. means append .tip
element body, displayed because "hide-rule" applies .tip
elements inside .tip_trigger
.
Comments
Post a Comment