Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Tooltips Issue (Java mouseover popup)

    I'd seriously appreciate some guidance with the following:-

    The site in question: http://www.professorbet.com/2010/football2010win.php

    The problem: Popups work fine, as they open the mini thumbnails when you mouseover. However, as you scroll down the page, the images move with you. So, if you mouseover'd the top result (having not scrolled down) the graph would appear when it was supposed to. However, if you scrolled down 200px, and then mouseover'd the top result (or any result), the thumbnail would popup 200px lower than it should.

    The guide site I used: http://www.dynamicdrive.com/dynamici...agetooltip.htm - it doesn't happen on their site (potentially because they're not as stupid as me).

    I set up a dummy site of their site: http://www.professorbet.com/1.htm - I just copied the source code for everything and changed literally nothing. It still happens on my version of the site.

    If this is a simple fix that anyone knows, I would love the help. If not, I'll just continue crying myself to sleep.

    Thank you in advance!

    Code:
    <script type="text/javascript" src="ddimgtooltip.js">
    
    /***********************************************
    * Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    Code:
    /* Image w/ description tooltip v2.0
    * Created: April 23rd, 2010. This notice must stay intact for usage 
    * Author: Dynamic Drive at http://www.dynamicdrive.com/
    * Visit http://www.dynamicdrive.com/ for full source code
    */
    
    
    var ddimgtooltip={
    
    	tiparray:function(){
    		var tooltips=[]
    		//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
    		//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
    		//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
    
    		tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
    		tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
    		tooltips[2]=["../dynamicindex14/winter.jpg"]
    		tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
    
    		return tooltips //do not remove/change this line
    	}(),
    
    	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
    
    	//***** NO NEED TO EDIT BEYOND HERE
    
    	tipprefix: 'imgtip', //tooltip ID prefixes
    
    	createtip:function($, tipid, tipinfo){
    		if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
    			return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
    				'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
    				+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
    				)
    			.css(tipinfo[2] || {})
    			.appendTo(document.body)
    		}
    		return null
    	},
    
    	positiontooltip:function($, $tooltip, e){
    		var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
    		var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), 
    		x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
    		y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
    		$tooltip.css({left:x, top:y})
    	},
    	
    	showbox:function($, $tooltip, e){
    		$tooltip.show()
    		this.positiontooltip($, $tooltip, e)
    	},
    
    	hidebox:function($, $tooltip){
    		$tooltip.hide()
    	},
    
    
    	init:function(targetselector){
    		jQuery(document).ready(function($){
    			var tiparray=ddimgtooltip.tiparray
    			var $targets=$(targetselector)
    			if ($targets.length==0)
    				return
    			var tipids=[]
    			$targets.each(function(){
    				var $target=$(this)
    				$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
    				var tipsuffix=parseInt(RegExp.$1) //get d as integer
    				var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
    				var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
    				$target.mouseenter(function(e){
    					var $tooltip=$("#"+this._tipid)
    					ddimgtooltip.showbox($, $tooltip, e)
    				})
    				$target.mouseleave(function(e){
    					var $tooltip=$("#"+this._tipid)
    					ddimgtooltip.hidebox($, $tooltip)
    				})
    				$target.mousemove(function(e){
    					var $tooltip=$("#"+this._tipid)
    					ddimgtooltip.positiontooltip($, $tooltip, e)
    				})
    				if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
    					$tooltip.mouseenter(function(){
    						ddimgtooltip.hidebox($, $(this))
    					})
    				}
    			})
    
    		}) //end dom ready
    	}
    }
    
    //ddimgtooltip.init("targetElementSelector")
    ddimgtooltip.init("*[rel^=imgtip]")
    Last edited by Winks; 08-17-2011 at 01:43 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    What browser are you using???

    I just tested with MSIE 7, FF 3.6, and Chrome 13 and all three worked perfectly. Both your code and the original code.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    What browser are you using???

    I just tested with MSIE 7, FF 3.6, and Chrome 13 and all three worked perfectly. Both your code and the original code.
    I fixed it yesterday, but couldn't remember the URL for this site (I was at my office when I originally posted the query).

    Basically, the issue was in the CSS sheet - it the position was 'fixed' when it should have been 'absolute'. Basic, I know.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    LOL! Thanks for coming back and telling us. Glad it was an easy fix.


  •  

    Posting Permissions

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