Team:Imperial College London/test10

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
-
<style type="text/css">
+
<link rel="stylesheet" type="text/css" href="https://2011.igem.org/Team:Imperial_College_London/balloontip?action=raw&ctype=text/css" />
-
#fixedtipdiv{
+
<script src="https://2011.igem.org/Team:Imperial_College_London/balloontipjs?action=raw&ctype=text/js">
-
position:absolute;
+
-
padding: 2px;
+
-
border:1px solid black;
+
-
font:normal 12px Verdana;
+
-
line-height:18px;
+
-
z-index:100;
+
-
}
+
-
 
+
-
</style>
+
-
</head>
+
-
 
+
-
 
+
-
<body>
+
-
<script type="text/javascript">
+
/***********************************************
/***********************************************
-
* Fixed ToolTip script- © Dynamic Drive (www.dynamicdrive.com)
+
* Speech Bubbles Tooltip- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* This notice MUST stay intact for legal use
-
* Visit http://www.dynamicdrive.com/ for full source code
+
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
***********************************************/
-
 
-
var tipwidth='150px' //default tooltip width
 
-
var tipbgcolor='lightyellow'  //tooltip bgcolor
 
-
var disappeardelay=250  //tooltip disappear speed onMouseout (in miliseconds)
 
-
var vertical_offset="0px" //horizontal offset of tooltip from anchor link
 
-
var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link
 
-
/////No further editting needed
+
</script>
-
var ie4=document.all
+
<script type="text/javascript">
-
var ns6=document.getElementById&&!document.all
+
-
if (ie4||ns6)
+
jQuery(function($){ //on document.ready
-
document.write('<div id="fixedtipdiv" style="visibility:hidden;width:'+tipwidth+';background-color:'+tipbgcolor+'" ></div>')
+
//Apply tooltip to links with class="addspeech", plus look inside 'speechdata.txt' for the tooltip markups
 +
$('a.addspeech').speechbubble({url:'speechdata.txt'})
 +
})
-
function getposOffset(what, offsettype){
+
</script>
-
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
+
</head>
-
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, visible, hidden, tipwidth){
+
<body>
-
if (ie4||ns6)
+
-
dropmenuobj.style.left=dropmenuobj.style.top=-500
+
-
if (tipwidth!=""){
+
-
dropmenuobj.widthobj=dropmenuobj.style
+
-
dropmenuobj.widthobj.width=tipwidth
+
-
}
+
-
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
+
-
obj.visibility=visible
+
-
else if (e.type=="click")
+
-
obj.visibility=hidden
+
-
}
+
-
function iecompattest(){
+
<p><a href="http://tools.dynamicdrive.com/imageoptimizer/" class="addspeech" rel="#speechbubble1">Image
-
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
+
Optimizer</a> lets you easily optimize regular gifs, animated gifs, jpgs, and pngs, so they load as fast as possible. A fan of ribbons? Create alternating colored horizontal rules quickly using the <a href="http://tools.dynamicdrive.com/ribbon/" class="addspeech" rel="#speechbubble2">Ribbon Rules Generator</a>. Or, generate a gradient image using <a href="http://tools.dynamicdrive.com/gradient/" class="addspeech" rel="#speechbubble3">Gradient Image Maker</a>. And last but not least, if your site is missing a favourite icon- a 16x16 icon of your site shown in the user's location bar- generate one now using <a href="http://tools.dynamicdrive.com/favicon/" class="addspeech" rel="#speechbubble4">FavIcon Generator</a>.</p>
-
}
+
-
 
+
-
function clearbrowseredge(obj, whichedge){
+
-
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
+
-
if (whichedge=="rightedge"){
+
-
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
+
-
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
+
-
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
+
-
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
+
-
}
+
-
else{
+
-
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
+
-
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
+
-
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
+
-
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
+
-
}
+
-
return edgeoffset
+
-
}
+
-
 
+
-
function fixedtooltip(menucontents, obj, e, tipwidth){
+
-
if (window.event) event.cancelBubble=true
+
-
else if (e.stopPropagation) e.stopPropagation()
+
-
clearhidetip()
+
-
dropmenuobj=document.getElementById? document.getElementById("fixedtipdiv") : fixedtipdiv
+
-
dropmenuobj.innerHTML=menucontents
+
-
 
+
-
if (ie4||ns6){
+
-
showhide(dropmenuobj.style, e, "visible", "hidden", tipwidth)
+
-
dropmenuobj.x=getposOffset(obj, "left")
+
-
dropmenuobj.y=getposOffset(obj, "top")
+
-
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
+
-
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
+
-
}
+
-
}
+
-
 
+
-
function hidetip(e){
+
-
if (typeof dropmenuobj!="undefined"){
+
-
if (ie4||ns6)
+
-
dropmenuobj.style.visibility="hidden"
+
-
}
+
-
}
+
-
 
+
-
function delayhidetip(){
+
-
if (ie4||ns6)
+
-
delayhide=setTimeout("hidetip()",disappeardelay)
+
-
}
+
-
 
+
-
function clearhidetip(){
+
-
if (typeof delayhide!="undefined")
+
-
clearTimeout(delayhide)
+
-
}
+
-
 
+
-
</script>
+
-
<a href="http://www.javascriptkit.com" onMouseover="fixedtooltip('Comprehensive JavaScript tutorials and over 400+ <b>free</b> scripts.', this, event, '150px')" onMouseout="delayhidetip()">JavaScript Kit</a> |
+
<p>While all of the above tooltips have their contents defined inside a <a href="speechdata.txt">single external file</a>, the following simply use the <b>title attribute</b> of their respective links to make up the tooltip: Visit
 +
<a href="http://www.javascriptkit.com/" class="addspeech" title="Comprehensive JavaScript tutorials and over 400+ free scripts!">JavaScript Kit</a> for JavaScript tutorials! <a target="_partner" href="http://www.cssdrive.com/" class="addspeech" title="Categorized CSS gallery and examples!">CSS Drive</a> showcases some of the most attractive, CSS driven sites on the net.</p>
-
<a href="http://www.codingforums.com" onMouseover="fixedtooltip('Web coding and development forums. This tooltip has an apostrophe- I\'m here.', this, event, '200px')" onMouseout="delayhidetip()">CodingForums.com</a>
 
</body>
</body>
</html>
</html>

Revision as of 20:45, 21 September 2011

Image Optimizer lets you easily optimize regular gifs, animated gifs, jpgs, and pngs, so they load as fast as possible. A fan of ribbons? Create alternating colored horizontal rules quickly using the Ribbon Rules Generator. Or, generate a gradient image using Gradient Image Maker. And last but not least, if your site is missing a favourite icon- a 16x16 icon of your site shown in the user's location bar- generate one now using FavIcon Generator.

While all of the above tooltips have their contents defined inside a single external file, the following simply use the title attribute of their respective links to make up the tooltip: Visit JavaScript Kit for JavaScript tutorials! CSS Drive showcases some of the most attractive, CSS driven sites on the net.

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