Problems with "Rich HTML Balloon Tooltip"  | Familiar Sight | | Join Date: Sep 2008 Location: Athens, Greece
Posts: 188
| |
1) Script Title: Rich HTML Balloon Tooltip
2) Script URL : http://www.dynamicdrive.com/dynamici...oontooltip.htm
3) Problem Description:
See this page General Music
for links you can see without scrolling down the div the tooltip is shown at the desired place but when you scroll donw the div the tooltip's position gets all messed up, e.g in the last "ΤΙΤΛΟΣ ALBUM" (which means Title of album ) the tooltip gets in front of the link and so the user cannot press the link!
Thous far it has proven a very neat easy to implement script which has added a lot visually to my site, for anyone capable of thinking some modification to overcome the div problem any suggestions?
Many thanks for your time
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: Problems with "Rich HTML Balloon Tooltip"
You need to add scrollTop into the equation. See Element Dimensions.
|  | Familiar Sight | | Join Date: Sep 2008 Location: Athens, Greece
Posts: 188
| | | re: Problems with "Rich HTML Balloon Tooltip"
Should I add or substract the scrollTop property and from which lines?
Apologise for the trouble but do not know much of Javascript plus the code is not mine, for convinience I have posted the js below. -
//Rich HTML Balloon Tooltip: http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm
-
//Created: September 10th, 2006
-
-
var disappeardelay=250 //tooltip disappear delay (in miliseconds)
-
var verticaloffset=0 //vertical offset of tooltip from anchor link, if any
-
var enablearrowhead=1 //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=14 //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=0
-
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-obj.offsetWidth
-
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 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?
-
dropmenuobj.style.visibility="hidden"
-
clearhidemenu()
-
//obj.onmouseout=delayhidemenu
-
dropmenuobj=document.getElementById(obj.getAttribute("rel"))
-
showhide(dropmenuobj.style, e)
-
dropmenuobj.x=getposOffset(obj, "left")
-
dropmenuobj.y=getposOffset(obj, "top")+verticaloffset
-
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!=0)? 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("a")
-
if (enablearrowhead){
-
tiparrow=document.createElement("img")
-
tiparrow.setAttribute("src", arrowheadimg[0])
-
tiparrow.setAttribute("id", "arrowhead")
-
document.body.appendChild(tiparrow)
-
}
-
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
-
-
|  | Familiar Sight | | Join Date: Sep 2008 Location: Athens, Greece
Posts: 188
| | | re: Problems with "Rich HTML Balloon Tooltip"
In the above code wherever offsetTop (only in the function getposOffset) I substracted scrolltop now in IE works fine but in firefox is still the same any idea why?
The code now is -
//Rich HTML Balloon Tooltip: http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm
-
//Created: September 10th, 2006
-
-
var disappeardelay=250 //tooltip disappear delay (in miliseconds)
-
var verticaloffset=0 //vertical offset of tooltip from anchor link, if any
-
var enablearrowhead=1 //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=14 //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.scrollLeft : what.offsetTop-what.scrollTop;
-
var parentEl=what.offsetParent;
-
while (parentEl!=null){
-
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft-parentEl.scrollLeft : totaloffset+parentEl.offsetTop-parentEl.scrollTop;
-
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=0
-
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-obj.offsetWidth
-
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 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?
-
dropmenuobj.style.visibility="hidden"
-
clearhidemenu()
-
//obj.onmouseout=delayhidemenu
-
dropmenuobj=document.getElementById(obj.getAttribute("rel"))
-
showhide(dropmenuobj.style, e)
-
dropmenuobj.x=getposOffset(obj, "left")
-
dropmenuobj.y=getposOffset(obj, "top")+verticaloffset
-
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!=0)? 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("a")
-
if (enablearrowhead){
-
tiparrow=document.createElement("img")
-
tiparrow.setAttribute("src", arrowheadimg[0])
-
tiparrow.setAttribute("id", "arrowhead")
-
document.body.appendChild(tiparrow)
-
}
-
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
-
|  | Familiar Sight | | Join Date: Sep 2008 Location: Athens, Greece
Posts: 188
| | | re: Problems with "Rich HTML Balloon Tooltip"
As said in previous post in my page I use the "Rich HTML Balloon Tooltip" which can be found here : Dynamic Drive DHTML Scripts- Rich HTML Balloon Tooltip
Great script helped a lot but when I used it inside a div for elements that neede to be scrolled to reach the ballon tip was dispalyed at the position they would had in the page without the page. In another thread acoder suggested to use scrolltop wich I did and worked but only in IE, in firefox/safari I get still the same but why?
the .js is -
//Rich HTML Balloon Tooltip: http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm
-
//Created: September 10th, 2006
-
-
var disappeardelay=250 //tooltip disappear delay (in miliseconds)
-
var verticaloffset=0 //vertical offset of tooltip from anchor link, if any
-
var enablearrowhead=1 //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=14 //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.scrollLeft : what.offsetTop-what.scrollTop;
-
var parentEl=what.offsetParent;
-
while (parentEl!=null){
-
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft-parentEl.scrollLeft : totaloffset+parentEl.offsetTop-parentEl.scrollTop;
-
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=0
-
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-obj.offsetWidth
-
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 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?
-
dropmenuobj.style.visibility="hidden"
-
clearhidemenu()
-
//obj.onmouseout=delayhidemenu
-
dropmenuobj=document.getElementById(obj.getAttribute("rel"))
-
showhide(dropmenuobj.style, e)
-
dropmenuobj.x=getposOffset(obj, "left")
-
dropmenuobj.y=getposOffset(obj, "top")+verticaloffset
-
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!=0)? 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("a")
-
if (enablearrowhead){
-
tiparrow=document.createElement("img")
-
tiparrow.setAttribute("src", arrowheadimg[0])
-
tiparrow.setAttribute("id", "arrowhead")
-
document.body.appendChild(tiparrow)
-
}
-
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
-
-
what I did was insert the scrollTop in lines 17 and 20 (its in the getposOffset function) I suspect lines 47 and 48 but I cannot be sure
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: Problems with "Rich HTML Balloon Tooltip" |  | Familiar Sight | | Join Date: Sep 2008 Location: Athens, Greece
Posts: 188
| | | re: Problems with "Rich HTML Balloon Tooltip"
You have given me this link in your previous post, did I miss something?
In the above code wherever offsetTop (only in the function getposOffset) I substracted scrolltop in lines 17 and 20 I couldn't find anyother point where he calculates these properties, now in IE works fine but only there why? the only lines where I could see a separation based on the browser is in lines 47 and 48 but I think of what to do any tips?
greatly appreciate your time
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: Problems with "Rich HTML Balloon Tooltip"
Oh, so I did! Sorry, I didn't realise. In my defence, I could say that it was 1 and a half months later!
I haven't got time to look at this properly, but what I would suggest you do is use a debugging tool like Firebug to see the values as they change to see what they are and what they should be.
|  | Familiar Sight | | Join Date: Sep 2008 Location: Athens, Greece
Posts: 188
| | | re: Problems with "Rich HTML Balloon Tooltip"
Yep 1 nad a half moth since the lat post and more than two since I have this little ermm...problem well, hopefully someine with better knowledge in js than me will see the posted code and figure it out before I find the time and (and the effort) to learn a bit more and correct it myself
thanks anyhow you are always a great help ;)
|  | Similar JavaScript / Ajax / DHTML bytes | | | /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,471 network members.
|