Results 1 to 3 of 3

Thread: Sticky Tooltip script

  1. #1
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Sticky Tooltip script

    I used the "Sticky Tooltip script" ( http://www.dynamicdrive.com/dynamici...ckytooltip.htm )
    with <area> tag inside an image-map.

    It works good with Chrome and Firefox. It works too with IE 7 except the right click. Sticky box doesn't work when I click right.
    What can I do. I need help. Thank you.

    Joana

    Here is the html code :
    Code:
    <div><img src="docs/essai3.jpg" border="0" usemap="#Map"> 
      <map name="Map">
        <area shape="rect" coords="41,87,74,131" href="http://www.wmaker.net/starcityisland/index.php?action=article&id_article=413992" data-tooltip="sticky1">
      </map>
    </div>
     
    
    <!--HTML for the tooltips-->
    <div id="mystickytooltip" class="stickytooltip">
    <div style="padding:5px">
    
    <div id="sticky1" class="atip"  style="width:262px">
    <img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
    </div>
    
    </div>
    
    <div class="stickystatus"></div>
    </div>
    Last edited by jscheuer1; 11-07-2010 at 08:15 PM. Reason: format code

  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

    Use this updated version:

    Attachment 3618

    Notes: In IE 6 and 7 the right click, (on)contextmenu as used by the script, doesn't register on the trigger in an image map, rather upon the image. To remedy this I changed the code to instead of testing if the right click is enabled and if the (highlighted) element right clicked upon is registered as a trigger (original code, excerpted from the init function):

    Code:
    $(this).bind("contextmenu", function(e){
    	if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
    		stickytooltip.docktooltip($, $tooltip, e)
    		return false
    	}
    })
    Instead of that perhaps more convoluted than it needs to be test, the new code registers a runtime variable in the scope of the init function to track whether or not a tip is open. This is a different test, but amounts to the same result (new code, additions highlighted):

    Code:
    	init:function(targetselector, tipid){
    		jQuery(document).ready(function($){
    			var $targets=$(targetselector)
    			var $tooltip=$('#'+tipid).appendTo(document.body)
    			var curtip = null;
    			if ($targets.length==0)
    				return
    			var $alltips=$tooltip.find('div.atip')
    			if (!stickytooltip.rightclickstick)
    				stickytooltip.stickynotice1[1]=''
    			stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
    			stickytooltip.hidebox($, $tooltip)
    			$targets.bind('mouseenter', function(e){
    				$alltips.hide().filter('#'+$(this).attr('data-tooltip')).show();
    				curtip = this;
    				stickytooltip.showbox($, $tooltip, e);
    			})
    			$targets.bind('mouseleave', function(e){
    				curtip = null;
    				stickytooltip.hidebox($, $tooltip)
    			})
    			$targets.bind('mousem . . .
    And use its "thruthiness" later here in the same section of the init function as quoted above as from the original (new code):

    Code:
    $(this).bind("contextmenu", function(e){
    	if (stickytooltip.rightclickstick && curtip){
    		stickytooltip.docktooltip($, $tooltip, e)
    		return false
    	}
    })
    Further Notes: Although not used, Its value when true is set to the trigger so that it could conceivably be used elsewhere in the init function and/or passed to other functions. This is much like (in the orignal and new code) the event (e) being passed along to the docktooltip function. It's not required or used there, yet.
    Last edited by jscheuer1; 11-08-2010 at 04:44 PM. Reason: update the update, later add notes, later English usage
    - John
    ________________________

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

  3. #3
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Very good. It works. Thank you very 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
  •