Team:Imperial College London/balloontipjs

From 2011.igem.org

(Difference between revisions)
 
Line 1: Line 1:
-
/*Speech Bubbles Tooltip (Initial: Dec 8th, 2010)
+
/* Image w/ description tooltip v2.0
-
* This notice must stay intact for usage  
+
* Created: April 23rd, 2010. This notice must stay intact for usage  
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
* Visit http://www.dynamicdrive.com/ for full source code
*/
*/
-
var speechbubbles_tooltip={
 
-
loadcontent:function($, selector, options, callback){
+
var ddimgtooltip={
-
var ajaxfriendlyurl=options.url.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
+
-
$.ajax({
+
-
url: ajaxfriendlyurl, //path to external content
+
-
async: true,
+
-
error:function(ajaxrequest){
+
-
alert('Error fetching Ajax content.<br />Server Response: '+ajaxrequest.responseText)
+
-
},
+
-
success:function(content){
+
-
$(document.body).append(content)
+
-
callback(selector)
+
-
$(content).remove()
+
-
}
+
-
})
+
 +
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
},
},
-
buildtooltip:function($, setting){
+
positiontooltip:function($, $tooltip, e){
-
var speechtext=(setting.speechid)? $('div#'+setting.speechid).html() : setting.speechtext
+
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
-
if (speechtext){
+
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
-
$speech=$('<div class="speechbubbles">'+speechtext+'</div>').appendTo(document.body)
+
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
-
$speech.addClass('speechbubbles').append('<div class="speechbubbles-arrow-border"></div>\n<div class="speechbubbles-arrow"></div>')
+
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
-
$speech.data('$arrowparts', $speech.find('div.speechbubbles-arrow, div.speechbubbles-arrow-border')) //store ref to the two arrow DIVs within tooltip
+
$tooltip.css({left:x, top:y})
-
var arrowheight=(window.XMLHttpRequest)? $speech.data('$arrowparts').eq(0).outerHeight() : 10
+
-
$speech.data('measure', {w:$speech.outerWidth(), h:$speech.outerHeight()+arrowheight, arroww:$speech.data('$arrowparts').eq(0).outerWidth()}) //cache tooltip dimensions
+
-
$speech.css({display:'none', visibility:'visible'})
+
-
setting.$speech=$speech //remember ref to tooltip
+
-
}
+
-
return setting.$speech
+
},
},
 +
showbox:function($, $tooltip, e){
 +
$tooltip.show()
 +
this.positiontooltip($, $tooltip, e)
 +
},
-
positiontip:function($, $anchor, s, e){
+
hidebox:function($, $tooltip){
-
var $speech=s.$speech
+
$tooltip.hide()
-
var $offset=$anchor.offset()
+
-
var windowmeasure={w:$(window).width(), h:$(window).height(), left:$(document).scrollLeft(), top:$(document).scrollTop()} //get various window measurements
+
-
var anchormeasure={w:$anchor.outerWidth(), h:$anchor.outerHeight(), left:$offset.left, top:$offset.top} //get various anchor link measurements
+
-
var speechmeasure={w:$speech.data('measure').w, h:$speech.data('measure').h} //get tooltip measurements
+
-
var x=anchormeasure.left
+
-
var y=anchormeasure.top+anchormeasure.h
+
-
x=(x+speechmeasure.w>windowmeasure.left+windowmeasure.w-3)? x-speechmeasure.w+anchormeasure.w-5 : x //right align tooltip if no space to the right of the anchor
+
-
y=(y+speechmeasure.h>windowmeasure.top+windowmeasure.h)? y-speechmeasure.h-anchormeasure.h-10 : y+10 //top align tooltip if no space to the bottom of the anchor
+
-
var isrightaligned=x!=anchormeasure.left //Boolean to indicate if tooltip is right aligned
+
-
var istopaligned=y!=anchormeasure.top+anchormeasure.h+10 //Boolean to indicate if tooltip is top aligned
+
-
$speech.removeClass('downversion').addClass(istopaligned? 'downversion' : '') //add CSS "downversion" class to tooltip if arrow should be pointing down
+
-
var arrowpos=(isrightaligned)? speechmeasure.w-(anchormeasure.left+anchormeasure.w-e.pageX)-25 : e.pageX-anchormeasure.left-25 //25 is to move arrow 25px to the left so it's not obscured by cursor
+
-
if (arrowpos>speechmeasure.w-25) //if arrow exceeds the width of the tooltip
+
-
arrowpos=speechmeasure.w-40 //move it to the left of the cursor
+
-
else{
+
-
arrowpos=(isrightaligned)? Math.max(anchormeasure.left-x+10, arrowpos) : Math.max(15, arrowpos) //make sure arrow doesn't appear too far to the left of the tooltip
+
-
}
+
-
$speech.data('$arrowparts').css('left', arrowpos)
+
-
var speechcss_before={opacity:0, left:x, top:(istopaligned)? y-speechmeasure.h-10 : y+speechmeasure.h+10}
+
-
var speechcss_after={opacity:1, top:y+10}
+
-
if (document.all && !window.msPerformance){ //detect IE8 and below
+
-
delete speechcss_before.opacity //remove opacity property, as IE8- does not animate this property well with CSS triangles present
+
-
delete speechcss_after.opacity
+
-
}
+
-
$speech.css(speechcss_before).show().animate(speechcss_after)
+
},
},
-
init:function($, $anchor, options){
+
init:function(targetselector){
-
var s={speechtext:$anchor.attr('title'), speechid:$anchor.attr('rel')}
+
jQuery(document).ready(function($){
-
$.extend(s, options)
+
var tiparray=ddimgtooltip.tiparray
-
if (this.buildtooltip($, s)){
+
var $targets=$(targetselector)
-
if (s.speechtext) //if title attribute of anchor is defined
+
if ($targets.length==0)
-
$anchor.attr('title', "") //disable it
+
return
-
$anchor.mouseenter(function(e){
+
var tipids=[]
-
if (s.$speech.queue().length==0){
+
$targets.each(function(){
-
clearTimeout(s.hidetimer)
+
var $target=$(this)
-
speechbubbles_tooltip.positiontip($, $anchor, s, e)
+
$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))
 +
})
}
}
})
})
-
$anchor.mouseleave(function(e){
 
-
s.hidetimer=setTimeout(function(){s.$speech.stop(true,true).hide()}, 200)
 
-
})
 
-
}
 
-
}
 
 +
}) //end dom ready
 +
}
}
}
-
jQuery.fn.speechbubble=function(options){
+
//ddimgtooltip.init("targetElementSelector")
-
var $=jQuery
+
ddimgtooltip.init("*[rel^=imgtip]")
-
function processanchor(selector){
+
-
return selector.each(function(){ //return jQuery obj
+
-
var $anchor=$(this)
+
-
speechbubbles_tooltip.init($, $anchor, options)
+
-
})
+
-
}
+
-
if (options && options.url)
+
-
speechbubbles_tooltip.loadcontent($, this, options, processanchor)
+
-
else
+
-
processanchor(this)
+
-
};
+

Latest revision as of 20:48, 21 September 2011

/* Image w/ description tooltip v2.0


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"