Advanced Search

Results 1 to 3 of 3

Thread: Rich HTML Balloon Tooltip - Tooltip position in Firefox and other browser incorrect

  1. #1
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Rich HTML Balloon Tooltip - Tooltip position in Firefox and other browser incorrect

    1) Script Title: Rich HTML Balloon Tooltip

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...oontooltip.htm

    3) Describe problem: It was working fine earlier but now the results on page differs from browser to browser
    in Fire Fox : Tool tip is showing at the bottom of Page
    in IE 8 : at the top left corner of the page
    in Chrome : at the top left corner of the page

    http://www.indiatravelvacation.com/i...x.htm#indiamap

    Can anyone please help where the problem is

    Thanks for your help in advance

    Regards vikas

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,684
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    .

    Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.


    That said, I'm surprised it ever worked. In IE it looks sort of OK sometimes. In the rest it's either at the top or below the image of the map. That's because browsers see the image as the trigger and position the tip in relation to either the top or bottom edge of the image taking into account the height of the image and the top and bottom edges of the page.

    Use this reworked version of the script instead:

    Code:
    //Rich HTML Balloon Tooltip: http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm
    //Created: September 10th, 2006
    //Updated: May 9th, 10 for window edge bug
    //Modified July 22nd, 2012 to react to mouse position for image maps see: http://www.dynamicdrive.com/forums/showthread.php?p=278150#post278150
    
    var disappeardelay=800  //tooltip disappear delay (in miliseconds)
    var verticaloffset=0.5 //vertical offset of tooltip from anchor link, if any
    var enablearrowhead=0 //0 or 1, to disable or enable the arrow image
    var arrowheadimg=["images/arrowdown.gif", "images/arrowup.gif"] //path to down and up arrow images
    var arrowheadheight=13 //height of arrow image (amount to reveal)
    
    /////No further editting needed
    
    var ie=document.all
    var ns6=document.getElementById&&!document.all
    verticaloffset=(enablearrowhead)? verticaloffset+arrowheadheight : verticaloffset
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    function showhide(obj, e){
    dropmenuobj.style.left=dropmenuobj.style.top="-500px"
    if (e.type=="mouseover")
    obj.visibility="visible"
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
    if (whichedge=="rightedge"){
    edgeoffsetx=20
    var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffsetx=dropmenuobj.contentmeasure-0//obj.offsetWidth
    if (dropmenuobj.x-edgeoffsetx+dropmenuobj.contentmeasure>windowedge)
    edgeoffsetx=dropmenuobj.x-windowedge+dropmenuobj.contentmeasure
    return edgeoffsetx
    }
    else{
    edgeoffsety=0
    var topedge=ie && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) //move up?
    edgeoffsety=dropmenuobj.contentmeasure+/* obj.offsetHeight */+(verticaloffset*2)
    return edgeoffsety
    }
    }
    function contains_ns6(a, b) {
    if (!b) return;
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    function displayballoontip(obj, e){ //main ballooon tooltip function
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    if (typeof dropmenuobj!="undefined"){ //hide previous tooltip?
    if(dropmenuobj === document.getElementById(obj.getAttribute("rel")) && dropmenuobj.style.visibility === 'visible'){
    clearhidemenu()
    return;
    }
    dropmenuobj.style.visibility="hidden"
    }
    clearhidemenu()
    dropmenuobj=document.getElementById(obj.getAttribute("rel"))
    dropmenuobj.onmouseout=function(e){
    e = e || event;
    if(e.currentTarget && e.relatedTarget && (e.currentTarget === e.relatedTarget || contains_ns6(e.currentTarget, e.relatedTarget))){return;}
    if(e.srcElement && e.srcElement.contains(e.toElement)){return;}
    delayhidemenu();
    }
    dropmenuobj.onmouseover = clearhidemenu
    showhide(dropmenuobj.style, e)
    dropmenuobj.x=e.pageX || e.clientX+iecompattest().scrollLeft;//getposOffset(obj, "left")
    dropmenuobj.y=(e.pageY || e.clientY+iecompattest().scrollTop)+verticaloffset;//getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge") +"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")/* +obj.offsetHeight */ +"px"
    if (enablearrowhead)
    displaytiparrow()
    }
    
    function displaytiparrow(){ //function to display optional arrow image associated with tooltip
    tiparrow=document.getElementById("arrowhead")
    tiparrow.src=(edgeoffsety!=0)? arrowheadimg[0] : arrowheadimg[1]
    var ieshadowwidth=(dropmenuobj.filters && dropmenuobj.filters[0])? dropmenuobj.filters[0].Strength-1 : 0
    //modify "left" value depending on whether there's no room on right edge of browser to display it, respectively
    tiparrow.style.left=(edgeoffsetx!=20)? parseInt(dropmenuobj.style.left)+dropmenuobj.offsetWidth-tiparrow.offsetWidth-10+"px" : parseInt(dropmenuobj.style.left)+5+"px"
    //modify "top" value depending on whether there's no room on right edge of browser to display it, respectively
    tiparrow.style.top=(edgeoffsety!=0)? parseInt(dropmenuobj.style.top)+dropmenuobj.offsetHeight-tiparrow.offsetHeight-ieshadowwidth+arrowheadheight+"px" : parseInt(dropmenuobj.style.top)-arrowheadheight+"px"
    tiparrow.style.visibility="visible"
    }
    
    function delayhidemenu(){
    delayhide=setTimeout("dropmenuobj.style.visibility='hidden'; dropmenuobj.style.left=0; if (enablearrowhead) tiparrow.style.visibility='hidden'",disappeardelay)
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    function reltoelement(linkobj){ //tests if a link has "rel" defined and it's the ID of an element on page
    var relvalue=linkobj.getAttribute("rel")
    return (relvalue!=null && relvalue!="" && document.getElementById(relvalue)!=null && document.getElementById(relvalue).className=="balloonstyle")? true : false
    }
    
    function initalizetooltip(){
    var all_links=document.getElementsByTagName("area")
    if (enablearrowhead){
    tiparrow=document.createElement("img")
    tiparrow.setAttribute("src", arrowheadimg[0])
    tiparrow.setAttribute("id", "arrowhead")
    document.body.appendChild(tiparrow)
    tiparrow.onmouseover = clearhidemenu;
    tiparrow.onmouseout = delayhidemenu;
    }
    for (var i=0; i<all_links.length; i++){
    if (reltoelement(all_links[i])){ //if link has "rel" defined and it's the ID of an element on page
    all_links[i].onmouseover=function(e){
    var evtobj=window.event? window.event : e
    displayballoontip(this, evtobj)
    }
    all_links[i].onmouseout=delayhidemenu
    }
    }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initalizetooltip, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initalizetooltip)
    else if (document.getElementById)
    window.onload=initalizetooltip
    Notes: It positions the tip relative to where the mouse is when it activates it and it allows the tip to remain if the mouse moves over the tip. Because of that I found I could shorten the disappeardelay and make other adjustments to the configuration.
    Last edited by jscheuer1; 07-22-2012 at 02:36 PM. Reason: minor code improvement
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Dear Mr John

    Thanks for your great Help. You are amazing, I was trying to rectify it from last 1 week. It in now working fine in all browsers.

    Thanks again your your valuable help.

    Regards Vikas

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
  •