Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5608
  • Last Modified:

Get Mouse Position for <a> on hover in jquery

This is what I have... but if I add to the page (making the page longer)... the x and y offset values need to be changed... but this is a dynamically created list...  does any one have a better way to do this?...

this is what I'm working with now:
xOffset = 1415;
yOffset = 10;      
.........            
      $("a.tooltip").hover(function(e){            
            $(".cornflex.whitebox")      
                  .css("top",(e.pageY - xOffset) + "px")
                  .css("left",(e.pageX + yOffset) + "px")
                  .fadeIn("fast");
                  
    },

.........
      $("a.tooltip").mousemove(function(e){
            $(".cornflex.whitebox")
                  .css("top",(e.pageY - xOffset) + "px")
                  .css("left",(e.pageX + yOffset) + "px");
      });       



I'm sure there are more reliable ways... I've searched a lot of stuff out there and nothing seems to be that much different...  thanks for the help here...
float.js.txt
0
jeremyBass26
Asked:
jeremyBass26
  • 9
  • 5
  • 3
1 Solution
 
David S.Commented:
How did you come up with the value of 1415?

Perhaps this would help: http://www.quirksmode.org/js/findpos.html

P.S. Ew. Browser sniffing. Are you sure it's necessary?
0
 
jeremyBass26Author Commented:
>>>>How did you come up with the value of 1415?
well this was just what worked out right...


>>>>Perhaps this would help: http://www.quirksmode.org/js/findpos.html
Not fully sure that would work.... more from the fact that I'm not sure on how to put that in...

>>>>P.S. Ew. Browser sniffing. Are you sure it's necessary?
Well no but...

IE7 & FF use
$("#tooltip").cornflex('whitebox', {...});

were IE6 use
$("#tooltips").corner();

go to https://www.sjrmc.org/DoctorDirectory/ and you'll see why... it's a png thing but yea... EW for sure, just never got any png fix to work 100% right...


I'm always open for better ways...
0
 
Lolly-InkCommented:
Make the tooltip a direct child of the body element. You can then get the position of the mouse on the page using the code below and assign it to the tooltip's top and left values. You can then get rid of the xOffset and yOffset constants altogether.

var xMouse = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var yMouse = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
jeremyBass26Author Commented:
Hello, so I gave that a try... and it kept causing an error... Saying an object is required and causing all of the cornflex not to work...  when I put it out side that tooltip function the cornflex functions again but the tooltip doesn't fire off...

I was trying to think why this would be the case... and the only thing I came up with was that $("a.tooltip").hover(function(e){...} was looking for the jquery event (e)  so I switched var xMouse = event.pageX to var xMouse = e.pageX... but no luck there...

got any ideas... what you laid out makes sense on why it'd work... but why it's not  doesn't... thanks for the help here...

jeremyBass
0
 
Lolly-InkCommented:
Did you also change event.clientX to e.clientX and event.clientY to e.clientY?
0
 
jeremyBass26Author Commented:
no I'll try that to... brb
0
 
jeremyBass26Author Commented:
nope... no luck...


here it is as it stands...

 
var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
this.tooltip = function(){
 
var agent= navigator.userAgent.toLowerCase();
var ver = parseInt(navigator.appVersion);
 
var ie = agent.indexOf("msie")>=0;
var ie6=ie && agent.indexOf("msie 6")>=0;
var ie7=ie && agent.indexOf("msie 7")>=0;
 
var ff=!ie && agent.indexOf("mozilla")>=0;
var ff2=ff && ver==4;
var ff3=ff && ver==5;
 
if (ff3){
 
 
} else if (ie7){
	/* CONFIG */	
 
 
		xOffset = 10;
		yOffset = 1415;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<div id='tooltip'></div>");
		$("#tooltip")
			.cornflex('whitebox', {
			omega: 20,
			image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',
			image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
			image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
			image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
			alpha: 12,
			beta: 18,
			gamma: 24,
			delta: 18});
//
//       Get number of doctors
//       ---------------------
//
      var list =
      {
                  "Anesthesia"              : 9,
         "Cardiology"              : 8,
         "Dentistry"               : 4,
         "Dermatology"             : 1,
         "Emergency Medicine"      : 5,
         "Family Practice"         : 19,
         "Gastroenterology"        : 3,
         "General Surgery"         : 0,
         "Gynecology"              : 0,
         "Hematology"              : 0,
         "Hospitalist Medicine"    : 5,
         "Internal Medicine"       : 12,
         "Invasive Cardiology"     : 0,
         "Nephrology"              : 1,
         "Neurology"               : 3,
         "Neurosurgery"            : 2,
         "Obstetrician"            : 0,
         "Oncology"                : 5,
         "Ophthalmology"           : 5,
         "Oral Surgery"            : 1,
         "Orthopedic Surgery"      : 8,
         "Otolaryngology"          : 2,
         "Pain Management"         : 0,
         "Pathology"               : 5,
         "Pediatrics"              : 8,
         "Plastic Surgery"         : 1,
         "Psychiatry"              : 4,
         "Pulmonology"             : 2,
         "Radiation Oncology"      : 0,
         "Radiology"               : 4,
         "Sleep Medicine"          : 0,
		 "Surgery"                 : 6,
         "Surgical Assistant"      : 2,
         "Urology"                 : 4,
         "Wound Care"              : 1
      }
      var numDoctors = list[e.srcElement.innerHTML];
 
		$('.cornflex.whitebox .t .c').append("<div id='testOfCorn'>"+ this.t.replace(" 0 ", " " + numDoctors + " ") +"</div>");	
			
		$(".cornflex.whitebox")	
			.css("top",(yMouse) + "px")
			.css("left",(xMouse) + "px")
			.fadeIn("fast");
			
    },
	function(){
		this.title = this.t;		
		$("#testOfCorn").remove();
		$(".cornflex.whitebox").remove();
 
    });	
	$("a.tooltip").mousemove(function(e){
		$(".cornflex.whitebox")
			.css("top",(yMouse) + "px")
			.css("left",(xMouse) + "px");
	});	
	} else if (ie6){
	
	/* CONFIG */		
		xOffset = 1685;
		yOffset = 3;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<div id='tooltips'></div>");
		$('#tooltips').append();	
		//
//       Get number of doctors
//       ---------------------
//
      var list =
      {
                  "Anesthesia"              : 9,
         "Cardiology"              : 8,
         "Dentistry"               : 4,
         "Dermatology"             : 1,
         "Emergency Medicine"      : 5,
         "Family Practice"         : 19,
         "Gastroenterology"        : 3,
         "General Surgery"         : 0,
         "Gynecology"              : 0,
         "Hematology"              : 0,
         "Hospitalist Medicine"    : 5,
         "Internal Medicine"       : 12,
         "Invasive Cardiology"     : 0,
         "Nephrology"              : 1,
         "Neurology"               : 3,
         "Neurosurgery"            : 2,
         "Obstetrician"            : 0,
         "Oncology"                : 5,
         "Ophthalmology"           : 5,
         "Oral Surgery"            : 1,
         "Orthopedic Surgery"      : 8,
         "Otolaryngology"          : 2,
         "Pain Management"         : 0,
         "Pathology"               : 5,
         "Pediatrics"              : 8,
         "Plastic Surgery"         : 1,
         "Psychiatry"              : 4,
         "Pulmonology"             : 2,
         "Radiation Oncology"      : 0,
         "Radiology"               : 4,
         "Sleep Medicine"          : 0,
		 "Surgery"                 : 6,
         "Surgical Assistant"      : 2,
         "Urology"                 : 4,
         "Wound Care"              : 1
      }
      var numDoctors = list[e.srcElement.innerHTML];
 
		$('#tooltips').append(this.t.replace(" 0 ", " " + numDoctors + " "));	
		$("#tooltips").corner();
			
		$("#tooltips")	
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");
			
    },
	function(){
		this.title = this.t;		
		$("#tooltips").remove();
 
    });	
	$("a.tooltip").mousemove(function(e){
		$("#tooltips")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
 
 
 
 
// starting the script on page load
}else{
}
};
// starting the script on page load
$(document).ready(function(){
	tooltip();
});

Open in new window

0
 
Lolly-InkCommented:
You need to put the xMouse/yMouse code inside the hover and mousemove events, otherwise the values won't get updated. Since you know the browser is IE, you can change the declaration to this:
var xMouse = event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
var yMouse = event.clientY + (document.documentElement.scrollTop || document.body.scrollTop); 
 
// If that doesn't work try this:
var xMouse = event.clientX + document.body.scrollLeft;
var yMouse = event.clientY + document.body.scrollTop; 

Open in new window

0
 
David S.Commented:
The xMouse and yMouse declarations have to be in the function handler/listener.

The page I linked to shows how to find the approximate position of an element in the page.
0
 
Lolly-InkCommented:
Sorry, use e.clientX and e.clientY, not event.clientX and event.clientY.
0
 
David S.Commented:
By "function" I meant "event".

@Lolly-Ink

Your original code is fine. It just needs the "event" variable to be renamed.
0
 
jeremyBass26Author Commented:
Ok ok .. so I'm lost on it... I've try a lot of combinations of this... and I get the same result...

it appears $("body").append("<div id='tooltip'></div>"); is not firing...

this is the last change... I was experimenting... but every way I have done it stops or so it seems the body append...

lost for sure.... I'm sorry what i read ( and I did try the quriks articel) and what you two are talking about seem right... and why the body append ??? lol



this.tooltip = function(){
 
var agent= navigator.userAgent.toLowerCase();
var ver = parseInt(navigator.appVersion);
 
var ie = agent.indexOf("msie")>=0;
var ie6=ie && agent.indexOf("msie 6")>=0;
var ie7=ie && agent.indexOf("msie 7")>=0;
 
var ff=!ie && agent.indexOf("mozilla")>=0;
var ff2=ff && ver==4;
var ff3=ff && ver==5;
 
if (ff3){
 
 
} else if (ie7){
	
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<div id='tooltip'></div>");
		$("#tooltip")
			.cornflex('whitebox', {
			omega: 20,
			image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',
			image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
			image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
			image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
			alpha: 12,
			beta: 18,
			gamma: 24,
			delta: 18});
//
//       Get number of doctors
//       ---------------------
//
      var list =
      {
                  "Anesthesia"              : 9,
         "Cardiology"              : 8,
         "Dentistry"               : 4,
         "Dermatology"             : 1,
         "Emergency Medicine"      : 5,
         "Family Practice"         : 19,
         "Gastroenterology"        : 3,
         "General Surgery"         : 0,
         "Gynecology"              : 0,
         "Hematology"              : 0,
         "Hospitalist Medicine"    : 5,
         "Internal Medicine"       : 12,
         "Invasive Cardiology"     : 0,
         "Nephrology"              : 1,
         "Neurology"               : 3,
         "Neurosurgery"            : 2,
         "Obstetrician"            : 0,
         "Oncology"                : 5,
         "Ophthalmology"           : 5,
         "Oral Surgery"            : 1,
         "Orthopedic Surgery"      : 8,
         "Otolaryngology"          : 2,
         "Pain Management"         : 0,
         "Pathology"               : 5,
         "Pediatrics"              : 8,
         "Plastic Surgery"         : 1,
         "Psychiatry"              : 4,
         "Pulmonology"             : 2,
         "Radiation Oncology"      : 0,
         "Radiology"               : 4,
         "Sleep Medicine"          : 0,
		 "Surgery"                 : 6,
         "Surgical Assistant"      : 2,
         "Urology"                 : 4,
         "Wound Care"              : 1
      }
      var numDoctors = list[e.srcElement.innerHTML];
 
		$('.cornflex.whitebox .t .c').append("<div id='testOfCorn'>"+ this.t.replace(" 0 ", " " + numDoctors + " ") +"</div>");	
var e.xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var e.yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
			
		$(".cornflex.whitebox")	
			.css("top",(e.yMouse) + "px")
			.css("left",(e.xMouse) + "px")
			.fadeIn("fast");
			
			
    },
	function(){
		this.title = this.t;		
		$("#testOfCorn").remove();
		$(".cornflex.whitebox").remove();
 
    });	
	$("a.tooltip").mousemove(function(e){
		$(".cornflex.whitebox")
			.css("top",(e.yMouse) + "px")
			.css("left",(e.xMouse) + "px");
	});	
	} else if (ie6){
....}

Open in new window

0
 
jeremyBass26Author Commented:
because I'm not understanding what going on with the last trys... here is a thought... could I not set yOffset = e.pageY - obj.offsetTop; or something of that nature?
0
 
jeremyBass26Author Commented:
so I've been trying anything... combinations of the suggests... my though... anything...

this here has the x right on the money, but the y is moving opposite of the mouse... move up the page as the mouse moves down... ??? lol I don't know... I know if off course but its cause either I was misunderstanding what was going on... or it's not compatible with what is there...

don't know... any ideas? thanks
jeremyBass

the current version...

the current version...
} else if (ie7){
		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";	
///set offset
		var yOffset = this.offsetTop*3 - e.pageY;
		var xOffset = e.pageX - this.offsetLeft*.25;
		$("body").append("<div id='tooltip'></div>");
		$("#tooltip")
			.cornflex('whitebox', {
			omega: 20,
			image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',
			image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
			image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
			image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
			alpha: 12,
			beta: 18,
			gamma: 24,
			delta: 18});
//
//       Get number of doctors
//       ---------------------
//
      var list =
      {
                  "Anesthesia"              : 9,
                "Wound Care"              : 1
      }
      var numDoctors = list[e.srcElement.innerHTML];
 
		$('.cornflex.whitebox .t .c').append("<div id='testOfCorn'>"+ this.t.replace(" 0 ", " " + numDoctors + " ") +"</div>");	
			
		$(".cornflex.whitebox")	
			.css("top",(yOffset) + "px")
			.css("left",(xOffset) + "px")
			.fadeIn("fast");
			
			
    },
	function(){
		this.title = this.t;		
		$("#testOfCorn").remove();
		$(".cornflex.whitebox").remove();
 
    });	
	$("a.tooltip").mousemove(function(e){
									  		var yOffset = e.pageY - this.offsetTop*3;
		var xOffset = e.pageX - this.offsetLeft*.25;
		$(".cornflex.whitebox")
			.css("top",(yOffset) + "px")
			.css("left",(xOffset) + "px");
	});	
	} else if (ie6){

Open in new window

0
 
Lolly-InkCommented:
I looked at your web site and copied the generated code. The div tooltip is being created below everything else in the page. You need to use position:absolute; in the style of the div.
0
 
jeremyBass26Author Commented:
Here it is... it still needed an offset but that is because of the image and the point... totaly a case by case thing... may-be a jquery way, use what i have lol.. anyways

Thanks I'm glad for the help,  now I only have two last tasks and this project is done... I knew there was a better way.. this is just something you can't Google that easy... lol..

jeremyBass
} else if (ie7){
	$("a.tooltip").hover(function(e){			
		this.t = this.title;
		this.title = "";	
		$("body").append("<div id='tooltip'></div>");
		$("#tooltip")
			.cornflex('whitebox', {
			omega: 20,
			image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',
			image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
			image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
			image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
			alpha: 12,
			beta: 18,
			gamma: 24,
			delta: 18});
//
//       Get number of doctors
//       ---------------------
//
      var list =
      {
         "Anesthesia"              : 9,
         "Wound Care"              : 1
      }
      var numDoctors = list[e.srcElement.innerHTML];
 
		$('.cornflex.whitebox .t .c').append("<div id='testOfCorn'>"+ this.t.replace(" 0 ", " " + numDoctors + " ") +"</div>");	
var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
			
		$(".cornflex.whitebox")	
			.css("top",(yMouse-25) + "px")
			.css("left",(xMouse+12) + "px")
			.fadeIn("fast");
			
			
    },
	function(){
		this.title = this.t;		
		$("#testOfCorn").remove();
		$(".cornflex.whitebox").remove();
 
    });	
	$("a.tooltip").mousemove(function(e){
var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
		$(".cornflex.whitebox")
			.css("top",(yMouse-25) + "px")
			.css("left",(xMouse+12) + "px");
	});	

Open in new window

0
 
jeremyBass26Author Commented:
You are right on again my friend... I'm going to try to use your first round of sugestions for FF and IE6 ... and as always I'm open to better ideas... lord knows a smart code is a short code lol... laters...
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 9
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now