Team:Wageningen UR/Templates/HeaderFooterStyle

From 2011.igem.org

(Difference between revisions)
Line 7: Line 7:
    
    
  <STYLE TYPE="text/css">
  <STYLE TYPE="text/css">
-
<!--
 
-
.menuh {
 
-
BORDER-COLOR : #FFFF99 ;
 
-
cursor : hand ;
 
-
Border-Left : #FFFF99 ;
 
-
Border-Top : #FFFF99 ;
 
-
Padding-Left : 1px ;
 
-
Padding-Top : 1px ;
 
-
Background-Color : #FFFF99 ;
 
-
}
 
-
.menu {
 
-
Background-Color : white ;
 
-
}
 
-
.home {
 
-
cursor : hand ;
 
-
}
 
-
.menulinks{
+
#miniflex {
-
text-decoration:none;
+
  width: 100%;
 +
  float: left;
 +
  font-size: small; /* could be specified at a higher level */
 +
  margin: 0;
 +
  padding: 0 10px 0 10px;
 +
  border-bottom: 1px solid #696;
 +
  position:relative;
 +
  z-index:2;
}
}
-
//-->
 
-
</STYLE>
 
 +
#miniflex li {
 +
  float: left;
 +
  margin: 0;
 +
  padding: 0;
 +
  display: inline;
 +
  list-style: none;
 +
  position:relative;
 +
}
 +
 +
#miniflex a:link, #miniflex a:visited {
 +
  float: left;
 +
  font-size: 85%;
 +
  line-height: 20px;
 +
  font-weight: bold;
 +
  margin: 0 10px 0 10px;
 +
  text-decoration: none;
 +
  color: #9c9;
 +
}
 +
 +
#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
 +
  border-bottom: 4px solid #696;
 +
  padding-bottom: 2px;
 +
  color: #696;
 +
}
 +
 
 +
#animated-tab {
 +
  position: absolute;
 +
  z-index: 1;
 +
  font-size: 85%;
 +
  line-height: 20px;
 +
  padding-bottom: 2px;
 +
  border-bottom: 4px solid #696;
 +
}
 +
</STYLE>
 +
<script type="text/javascript" src="miniTab.js"></script>
Line 39: Line 63:
   <body>
   <body>
<SCRIPT Language="Javascript1.2">
<SCRIPT Language="Javascript1.2">
-
<!--
 
-
/*
+
var miniTab = {
-
Static menu script (By maXimus, maximus@nsimail.com, http://maximus.ravecore.com/)
+
  currentTab:    0,
-
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
+
  activeTab:      0,
-
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
+
  destX:         0,
-
*/
+
  destW:          0,
 +
  t:              0,
 +
  b:              0,
 +
  c:              0,
 +
  d:              20,
 +
  animInterval:  null,
 +
  sliderObj:      null,
 +
  aHeight:        0,
 +
 
 +
  init: function() {
 +
    if(!document.getElementById || !document.getElementById("miniflex")) return;
 +
   
 +
    var ul          = document.getElementById("miniflex");
 +
    var liArr      = ul.getElementsByTagName("li");
 +
    var aArr        = ul.getElementsByTagName("a");
 +
   
 +
    for(var i = 0, li; li = liArr[i]; i++) {
 +
      liArr[i].onmouseover = aArr[i].onfocus = function(e) {
 +
        var pos = 0;
 +
        var elem = this.nodeName == "LI" ? this : this.parentNode;
 +
        while(elem.previousSibling) {
 +
          elem = elem.previousSibling;
 +
          if(elem.tagName && elem.tagName == "LI") pos++;
 +
        }
 +
        miniTab.initSlide(pos);
 +
      }
 +
    }
-
//configure below variable for menu width, position on page
+
    ul.onmouseout = function(e) {
-
var menuwidth=110
+
      miniTab.initSlide(miniTab.currentTab);
-
var offsetleft=10
+
    };
-
var offsettop=90
+
   
 +
    for(var i = 0; i < aArr.length; i++) {
 +
      if(document.location.href.indexOf(aArr[i].href)>=0) {
 +
        miniTab.activeTab = miniTab.currentTab = i;
 +
      }
 +
      aArr[i].style.borderBottom  = "0px";
 +
      aArr[i].style.paddingBottom = "6px";
 +
    }
-
var ns4=document.layers?1:0
+
    miniTab.slideObj                = ul.parentNode.appendChild(document.createElement("div"));
-
var ie4=document.all?1:0
+
    miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
-
var ns6=document.getElementById&&!document.all?1:0
+
    miniTab.slideObj.id            = "animated-tab";
 +
    miniTab.slideObj.style.top      = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";
 +
    miniTab.slideObj.style.left    = (ul.offsetLeft + + liArr[miniTab.activeTab].offsetLeft + aArr[miniTab.activeTab].offsetLeft) + "px";
 +
    miniTab.slideObj.style.width    = aArr[miniTab.activeTab].offsetWidth + "px";
 +
    miniTab.aHeight                = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop;
 +
   
 +
    miniTab.initSlide(miniTab.activeTab, true);
 +
   
 +
    var intervalMethod = function() { miniTab.slideIt(); }
 +
    miniTab.animInterval = setInterval(intervalMethod,10);
 +
  },
-
function makeStatic() {
+
  cleanUp: function() {
-
if (ie4) {object1.style.pixelTop=document.body.scrollTop+offsettop}
+
    clearInterval(miniTab.animInterval);
-
else if (ns6) {document.getElementById("object1").style.top=window.pageYOffset+offsettop}
+
    miniTab.animInterval = null;
-
else if (ns4) {eval(document.object1.top=eval(window.pageYOffset+offsettop));}
+
  },
-
setTimeout("makeStatic()",0);
+
 
 +
  initSlide: function(pos, force) {
 +
    if(!force && pos == miniTab.activeTab) return;
 +
    miniTab.activeTab = pos;
 +
    miniTab.initAnim();
 +
  },
 +
 
 +
  initAnim: function() {
 +
    var ul          = document.getElementById("miniflex");
 +
    var liArr      = ul.getElementsByTagName("li");
 +
    var aArr        = ul.getElementsByTagName("a");
 +
    miniTab.destX = parseInt(liArr[miniTab.activeTab].offsetLeft + liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + ul.offsetLeft);
 +
    miniTab.destW = parseInt(liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth);
 +
    miniTab.t = 0;
 +
    miniTab.b = miniTab.slideObj.offsetLeft;
 +
    miniTab.c = miniTab.destX - miniTab.b;
 +
    miniTab.bW = miniTab.slideObj.offsetWidth;
 +
    miniTab.cW = miniTab.destW - miniTab.bW;
 +
    miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";
 +
  },
 +
 
 +
  slideIt:function() {
 +
    var ul          = document.getElementById("miniflex");
 +
    var liArr      = ul.getElementsByTagName("li");
 +
    var aArr        = ul.getElementsByTagName("a");
 +
   
 +
    // Has the browser text size changed?
 +
    if(miniTab.aHeight != ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) {
 +
      miniTab.initAnim();
 +
      miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop
 +
    };
 +
   
 +
    if(miniTab.t++ < miniTab.d) {
 +
      var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);
 +
      var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);
 +
      miniTab.slideObj.style.left = parseInt(x) + "px";
 +
      miniTab.slideObj.style.width = parseInt(w) + "px";
 +
    } else {
 +
      miniTab.slideObj.style.left = miniTab.destX + "px";
 +
      miniTab.slideObj.style.width = miniTab.destW +"px";
 +
    }
 +
  },
 +
 
 +
  animate: function(t,b,c,d) {
 +
    if ((t/=d/2) < 1) return c/2*t*t + b;
 +
    return -c/2 * ((--t)*(t-2) - 1) + b;
 +
  }
}
}
-
if (ie4||ns6) {document.write('<span ALIGN="CENTER" ID="object1" STYLE="Position:absolute; Top:20; Left:'+offsetleft+'; Z-Index:5;cursor:hand;background-color:black;"><TABLE BORDER="1" width="'+menuwidth+'" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white">')}
+
window.onload = miniTab.init;
-
else if (ns4){ document.write('<LAYER top="20" name="object1" left="'+offsetleft+'" BGCOLOR=black><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1"><TR><TD><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="'+menuwidth+'">')}
+
window.onunload = miniTab.cleanUp;
-
if (ie4||ns6||ns4)
+
</SCRIPT>
-
document.write('<TR><TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="4" FACE=ARIAL>Menu</FONT></TD></TR>')
+
  <h2>Animated Mini Tabs</h2>
 +
<ul id="miniflex">
 +
  <li><a href="/about/" title="">About</a></li>
 +
  <li><a href="/archives/" title="">Archives</a></li>
 +
  <li><a href="/the-language-in-the-lab/" title="">The Language in the Lab</a></li>
 +
  <li><a class="active" href="/demo/animated-minitabs/" title="">MiniTab demo</a></li>
 +
  <li><a href="/contact/" title="">Contact</a></li>
 +
</ul>
 +
<p><div align="center">
 +
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
 +
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
 +
</div><p>
-
var menui = new Array();
 
-
var menul = new Array();
 
-
//configure below for menu items. Extend list as desired
 
-
menui[0]="Dynamic Drive";
 
-
menui[1]="What\'s New?";
 
-
menui[2]="What\'s Hot?";
 
-
menui[3]="Message Forum";
 
-
menui[4]="FAQs";
 
-
menui[5]="Submit Script";
 
-
menui[6]="Link to us";
 
-
menui[7]="Email us";
 
-
 
-
menul[0]="http://dynamicdrive.com";
 
-
menul[1]="http://dynamicdrive.com/new.htm";
 
-
menul[2]="http://dynamicdrive.com/hot.htm";
 
-
menul[3]="http://wsabstract.com/cgi-bin/Ultimate.cgi";
 
-
menul[4]="http://dynamicdrive.com/faqs.htm";
 
-
menul[5]="http://dynamicdrive.com/submit.htm";
 
-
menul[6]="http://dynamicdrive.com/link.htm";
 
-
menul[7]="http://dynamicdrive.com/contact.htm";
 
-
 
-
for (i=0;i<=menui.length-1;i++)
 
-
if (ie4||ns6) {document.write('<TR><TD BORDERCOLOR="white" ONCLICK="location=\''+menul[i]+'\'" onmouseover="className=\'menuh\'" onMouseout="className=\'menu\'"><CENTER><FONT>'+menui[i]+'</FONT></TD></TR>')}
 
-
else if (ns4){document.write('<TR><TD BGCOLOR="white"><ILAYER><LAYER width="'+menuwidth+'" onmouseover="bgColor=\'yellow\'" onmouseout="bgColor=\'white\'"><CENTER><A HREF="'+menul[i]+'" class=menulinks>'+menui[i]+'</A></CENTER></LAYER></ILAYER></TD></TR>')}
 
-
 
-
if (ie4||ns6) {document.write('</TABLE></span>')}
 
-
else if (ns4){document.write('</TABLE></TD></TR></TABLE></LAYER>')}
 
-
 
-
function menu3(){
 
-
if (ns6||ie4||ns4)
 
-
makeStatic()
 
-
}
 
-
 
-
window.onload=menu3
 
-
 
-
//-->
 
-
</SCRIPT>
 
-
 
 
   </body>
   </body>
   </html>
   </html>

Revision as of 18:11, 30 June 2011

Animated Mini Tabs

Free JavaScripts provided
by The JavaScript Source

Retrieved from "http://2011.igem.org/Team:Wageningen_UR/Templates/HeaderFooterStyle"