Results 1 to 3 of 3

Thread: JS/Ajax div tooltip. kinda...

  1. #1
    Join Date
    Jan 2007
    Location
    Charlotte, NC
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question JS/Ajax div tooltip. kinda...

    After searching the internet for almost all day today I am finally going to ask for some help.

    I have a text link that once the user clicks on it a div will appear via CSS visibility just above the link. This is what I have now. I just need a better function for determining the mouse position:

    Code:
    function labPop(divid) {
        var epos = window.event; 
        document.getElementById(divid).style.visibility = 'visible';
        document.getElementById(divid).style.left = epos.clientX;
        document.getElementById(divid).style.top = epos.clientY;
    }
    Thanks for any and all help!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The code (for finding the mouse position) that you have looks good for IE as long as the page hasn't been scrolled. Here is a link to some code that works in most browsers, incliding IE:

    http://www.quirksmode.org/js/events_....html#position

    You could use it like so:

    Code:
    function labPop(divid, e) {
    
    	var posx = 0;
    	var posy = 0;
    	if (!e) var e = window.event;
    	if (e.pageX || e.pageY) 	{
    		posx = e.pageX;
    		posy = e.pageY;
    	}
    	else if (e.clientX || e.clientY) 	{
    		posx = e.clientX + document.body.scrollLeft
    			+ document.documentElement.scrollLeft;
    		posy = e.clientY + document.body.scrollTop
    			+ document.documentElement.scrollTop;
    	}
        document.getElementById(divid).style.visibility = 'visible';
        document.getElementById(divid).style.left = posx+'px';
        document.getElementById(divid).style.top = posy+'px';
    }
    I've added the literal 'px' units as, many browsers require them. Your onclick attribute for your text could look like something so:

    HTML Code:
    <span onclick="labPop('lab_div1', event);">Click Me</span>
    The event keyword should appear just as I have written it. It shouldn't be quoted or replaced by anything else. The 'lab_div1' represents the unique id you want to pass to the function and should be quoted as shown.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2007
    Location
    Charlotte, NC
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    You. My man. ****ing rock!! Thanks so much!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •