Team:Imperial College London/balloontipjs

From 2011.igem.org

(Difference between revisions)
(Created page with "//Rich HTML Balloon Tooltip: http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm //Created: September 10th, 2006 //Updated: May 9th, 10 for window edge bug var disappea...")
 
(One intermediate revision not shown)
Line 1: Line 1:
-
//Rich HTML Balloon Tooltip: http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm
+
/* Image w/ description tooltip v2.0
-
//Created: September 10th, 2006
+
* Created: April 23rd, 2010. This notice must stay intact for usage
-
//Updated: May 9th, 10 for window edge bug
+
* Author: Dynamic Drive at http://www.dynamicdrive.com/
 +
* Visit http://www.dynamicdrive.com/ for full source code
 +
*/
-
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=["https://static.igem.org/mediawiki/2011/e/ee/ICL_arrowdown.gif", "https://static.igem.org/mediawiki/2011/d/d5/ICL_arrowup.gif"] //path to down and up arrow images
 
-
var arrowheadheight=11 //height of arrow image (amount to reveal)
 
-
/////No further editting needed
+
var ddimgtooltip={
-
var ie=document.all
+
tiparray:function(){
-
var ns6=document.getElementById&&!document.all
+
var tooltips=[]
-
verticaloffset=(enablearrowhead)? verticaloffset+arrowheadheight : verticaloffset
+
//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}
-
function getposOffset(what, offsettype){
+
tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
-
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
+
tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
-
var parentEl=what.offsetParent;
+
tooltips[2]=["../dynamicindex14/winter.jpg"]
-
while (parentEl!=null){
+
tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
-
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
+
-
parentEl=parentEl.offsetParent;
+
-
}
+
-
return totaloffset;
+
-
}
+
-
function showhide(obj, e){
+
return tooltips //do not remove/change this line
-
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
+
}(),
-
if (e.type=="mouseover")
+
-
obj.visibility="visible"
+
-
}
+
-
function iecompattest(){
+
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
-
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
+
-
}
+
-
function clearbrowseredge(obj, whichedge){
+
//***** NO NEED TO EDIT BEYOND HERE
-
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
+
-
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 displayballoontip(obj, e){ //main ballooon tooltip function
+
tipprefix: 'imgtip', //tooltip ID prefixes
-
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
+
createtip:function($, tipid, tipinfo){
-
tiparrow=document.getElementById("arrowhead")
+
if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
-
tiparrow.src=(edgeoffsety!=0)? arrowheadimg[0] : arrowheadimg[1]
+
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
-
var ieshadowwidth=(dropmenuobj.filters && dropmenuobj.filters[0])? dropmenuobj.filters[0].Strength-1 : 0
+
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
-
//modify "left" value depending on whether there's no room on right edge of browser to display it, respectively
+
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
-
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
+
.css(tipinfo[2] || {})
-
tiparrow.style.top=(edgeoffsety!=0)? parseInt(dropmenuobj.style.top)+dropmenuobj.offsetHeight-tiparrow.offsetHeight-ieshadowwidth+arrowheadheight+"px" : parseInt(dropmenuobj.style.top)-arrowheadheight+"px"
+
.appendTo(document.body)
-
tiparrow.style.visibility="visible"
+
}
-
}
+
return null
 +
},
-
function delayhidemenu(){
+
positiontooltip:function($, $tooltip, e){
-
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'; dropmenuobj.style.left=0; if (enablearrowhead) tiparrow.style.visibility='hidden'",disappeardelay)
+
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)
 +
},
-
function clearhidemenu(){
+
hidebox:function($, $tooltip){
-
if (typeof delayhide!="undefined")
+
$tooltip.hide()
-
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(){
+
init:function(targetselector){
-
var all_links=document.getElementsByTagName("a")
+
jQuery(document).ready(function($){
-
if (enablearrowhead){
+
var tiparray=ddimgtooltip.tiparray
-
tiparrow=document.createElement("img")
+
var $targets=$(targetselector)
-
tiparrow.setAttribute("src", arrowheadimg[0])
+
if ($targets.length==0)
-
tiparrow.setAttribute("id", "arrowhead")
+
return
-
document.body.appendChild(tiparrow)
+
var tipids=[]
-
}
+
$targets.each(function(){
-
for (var i=0; i<all_links.length; i++){
+
var $target=$(this)
-
if (reltoelement(all_links[i])){ //if link has "rel" defined and it's the ID of an element on page
+
$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
-
all_links[i].onmouseover=function(e){
+
var tipsuffix=parseInt(RegExp.$1) //get d as integer
-
var evtobj=window.event? window.event : e
+
var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
-
displayballoontip(this, evtobj)
+
var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
-
}
+
$target.mouseenter(function(e){
-
all_links[i].onmouseout=delayhidemenu
+
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
 +
}
}
}
-
if (window.addEventListener)
+
//ddimgtooltip.init("targetElementSelector")
-
window.addEventListener("load", initalizetooltip, false)
+
ddimgtooltip.init("*[rel^=imgtip]")
-
else if (window.attachEvent)
+
-
window.attachEvent("onload", initalizetooltip)
+
-
else if (document.getElementById)
+
-
window.onload=initalizetooltip
+

Latest revision as of 20:48, 21 September 2011

/* 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
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(

'
<img src="' + tipinfo[0] + '" />
' + ((tipinfo[1])? '
'+tipinfo[1]+'
' : )

) .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]")

Retrieved from "http://2011.igem.org/Team:Imperial_College_London/balloontipjs"