Team:Imperial College London/test10

From 2011.igem.org

(Difference between revisions)

Revision as of 20:31, 21 September 2011

JavaScript Kit | CodingForums.com

@@ Line 1: / Line 1: @@
 <html>
 <head>
 <style type="text/css">
-#dhtmltooltip{
-position: absolute;
+#fixedtipdiv{
-width: 150px;
+position:absolute;
-border: 2px solid black;
 padding: 2px;
-background-color: lightyellow;
+border:1px solid black;
-visibility: hidden;
+font:normal 12px Verdana;
-z-index: 100;
+line-height:18px;
-/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
+z-index:100;
-filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
 }
 </style>
 </head>
 <body>
-<div id="dhtmltooltip"></div>
 <script type="text/javascript">
 /***********************************************
-* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
+* Fixed ToolTip script- © Dynamic Drive (www.dynamicdrive.com)
 * This notice MUST stay intact for legal use
-* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
+* Visit http://www.dynamicdrive.com/ for full source code
 ***********************************************/
+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
-var offsetxpoint=-60 //Customize x offset of tooltip
+/////No further editting needed
-var offsetypoint=20 //Customize y offset of tooltip
-var ie=document.all
-var ns6=document.getElementById && !document.all
-var enabletip=false
-if (ie||ns6)
-var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
-function ietruebody(){
+var ie4=document.all
-return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
+var ns6=document.getElementById&&!document.all
+if (ie4||ns6)
+document.write('<div id="fixedtipdiv" style="visibility:hidden;width:'+tipwidth+';background-color:'+tipbgcolor+'" ></div>')
+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 ddrivetip(thetext, thecolor, thewidth){
-if (ns6||ie){
+function showhide(obj, e, visible, hidden, tipwidth){
-if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
+if (ie4||ns6)
-if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
+dropmenuobj.style.left=dropmenuobj.style.top=-500
-tipobj.innerHTML=thetext
+if (tipwidth!=""){
-enabletip=true
+dropmenuobj.widthobj=dropmenuobj.style
-return false
+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 positiontip(e){
+function iecompattest(){
-if (enabletip){
+return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
-var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
+}
-var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
-//Find out how close the mouse is to the corner of the window
-var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
-var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
-var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
+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
+}
-//if the horizontal distance isn't enough to accomodate the width of the context menu
+function fixedtooltip(menucontents, obj, e, tipwidth){
-if (rightedge<tipobj.offsetWidth)
+if (window.event) event.cancelBubble=true
-//move the horizontal position of the menu to the left by it's width
+else if (e.stopPropagation) e.stopPropagation()
-tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
+clearhidetip()
-else if (curX<leftedge)
+dropmenuobj=document.getElementById? document.getElementById("fixedtipdiv") : fixedtipdiv
-tipobj.style.left="5px"
+dropmenuobj.innerHTML=menucontents
-else
-//position the horizontal position of the menu where the mouse is positioned
-tipobj.style.left=curX+offsetxpoint+"px"
-//same concept with the vertical position
+if (ie4||ns6){
-if (bottomedge<tipobj.offsetHeight)
+showhide(dropmenuobj.style, e, "visible", "hidden", tipwidth)
-tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
+dropmenuobj.x=getposOffset(obj, "left")
-else
+dropmenuobj.y=getposOffset(obj, "top")
-tipobj.style.top=curY+offsetypoint+"px"
+dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
-tipobj.style.visibility="visible"
+dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
 }
 }
-function hideddrivetip(){
+function hidetip(e){
-if (ns6||ie){
+if (typeof dropmenuobj!="undefined"){
-enabletip=false
+if (ie4||ns6)
-tipobj.style.visibility="hidden"
+dropmenuobj.style.visibility="hidden"
-tipobj.style.left="-1000px"
-tipobj.style.backgroundColor=''
-tipobj.style.width=''
 }
 }
-document.onmousemove=positiontip
+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> |
-<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
+<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>
- onMouseout="hideddrivetip()">Search Engine</a>
-<DIV onMouseover="ddrivetip('This DIV has a tip!', '#EFEFEF')";
- onMouseout="hideddrivetip()">Some text here. Some text here.</div>
-<a href="http://yahoo.com" onMouseover="ddrivetip('Yahoo\'s Site', 'yellow', 250)";
- onMouseout="hideddrivetip()">Yahoo</a>
 </body>
 </html>