Team:Wageningen UR/Templates/HeaderFooterStyle

From 2011.igem.org

(Difference between revisions)
Line 9: Line 9:
-
#miniflex {
+
#mContainer {
-
  width: 100%;
+
position:relative;
-
  float: left;
+
margin:0 auto;
-
  font-size: small; /* could be specified at a higher level */
+
width:404px;
-
  margin: 0;
+
height:25px;
-
  padding: 0 10px 0 10px;
+
border-top:1px solid #638DA1;
-
  border-bottom: 1px solid #696;
+
border-bottom:1px solid #638DA1;
-
  position:relative;
+
background-color:#F2F5F6;
-
  z-index:2;
+
padding:5px 0 0 0;
 +
z-index:0;
}
}
-
#miniflex li {
+
#mContainer li {
-
  float: left;
+
position:relative;
-
  margin: 0;
+
display:inline;
-
  padding: 0;
+
margin:0 10px 0 12px;
-
  display: inline;
+
font:0.8em arial,verdana;
-
  list-style: none;
+
padding:0;
-
  position:relative;
+
z-index:20;
}
}
-
#miniflex a:link, #miniflex a:visited {
+
#mContainer li a {
-
  float: left;
+
text-decoration:none;
-
  font-size: 85%;
+
color:#638DA1;
-
  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 {
+
#slider {
-
  border-bottom: 4px solid #696;
+
position:absolute;
-
  padding-bottom: 2px;
+
background-color: #98B4C1;
-
  color: #696;
+
border:1px solid #78919B;
-
}
+
width:74px;
-
 
+
height:20px;
-
#animated-tab {
+
padding:0;
-
  position: absolute;
+
z-index:1;
-
  z-index: 1;
+
-
  font-size: 85%;
+
-
  line-height: 20px;
+
-
  padding-bottom: 2px;
+
-
  border-bottom: 4px solid #696;
+
}
}
 +
 +
</STYLE>
</STYLE>
-
<script type="text/javascript" src="miniTab.js"></script>
+
 
 +
<script type="text/javascript" src="focusSlide.js"></script>
Line 63: Line 57:
   <body>
   <body>
<SCRIPT Language="Javascript1.2">
<SCRIPT Language="Javascript1.2">
 +
/* This script and many more are available free online at
 +
The JavaScript Source!! http://javascript.internet.com */
-
var miniTab = {
+
/******************************************************
-
  currentTab:    0,
+
Focus Slide
-
  activeTab:      0,
+
version 1.0
-
  destX:          0,
+
last revision: 12.17.2004
-
  destW:          0,
+
steve@slayeroffice.com
-
  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);
+
-
      }
+
-
    }
+
-
    ul.onmouseout = function(e) {
+
Should you improve upon or
-
      miniTab.initSlide(miniTab.currentTab);
+
modify this code, please let me know
-
    };
+
so that I can update the version hosted
-
   
+
at slayeroffice.
-
    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";
+
-
    }
+
-
    miniTab.slideObj                = ul.parentNode.appendChild(document.createElement("div"));
+
PLEASE LEAVE THIS NOTICE INTACT!
-
    miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
+
-
    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);
+
-
  },
+
-
  cleanUp: function() {
+
******************************************************/
-
    clearInterval(miniTab.animInterval);
+
-
    miniTab.animInterval = null;
+
-
  },
+
-
 
+
-
  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) {
+
var d=document; // shortcut reference to the document object
-
    if ((t/=d/2) < 1) return c/2*t*t + b;
+
var activeLI = 0; // the currently "active" list element - value represents its index in the liObj array
-
    return -c/2 * ((--t)*(t-2) - 1) + b;
+
var zInterval = null; // interval variable
 +
 
 +
var SLIDE_STEP = 8; // how many pixels to move the sliding div at a time
 +
var SLIDER_WIDTH = 74; // the width of the sliding div. used to calculate
 +
                        // its left based on the width and left of the active LI element
 +
 
 +
 
 +
function init() {
 +
// bail out if this is an older browser or Opera which gets the offsets wrong
 +
// the opera issue is fixable by subtracting the container UL's width from the
 +
  // offsetLefts...but I don't care enough to do it
 +
// this does NOT break opera, it just wont get the sliding thing
 +
 
 +
if(!document.getElementById || window.opera)return;
 +
 
 +
// create references to the LI's
 +
mObj = d.getElementById("mContainer");
 +
liObj = mObj.getElementsByTagName("li");
 +
 
 +
// set up the mouse over events
 +
for(i=0;i<liObj.length;i++) {
 +
liObj[i].xid = i;
 +
liObj[i].onmouseover = function() { initSlide(this.xid); }
 +
}
 +
 
 +
// create the slider object
 +
slideObj = mObj.appendChild(d.createElement("div"));
 +
slideObj.id = "slider";
 +
 
 +
// position the slider over the first LI
 +
x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3)-5;
 +
y = liObj[activeLI].offsetTop-3;
 +
slideObj.style.top = y + "px";
 +
slideObj.style.left = x + "px";
 +
}
 +
 
 +
 
 +
function initSlide(objIndex) {
 +
// return if the user is mousing over the currently active LI
 +
if(objIndex == activeLI)return;
 +
// clear the interval so we can start it over in a few lines to avoid doubling up on intervals
 +
clearInterval(zInterval);
 +
 
 +
// set the active list item to the object index argument
 +
activeLI = objIndex;
 +
// figure out the destination for the sliding div element
 +
destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3))-5;
 +
// start the interval
 +
intervalMethod = function() { doSlide(destinationX); }
 +
zInterval = setInterval(intervalMethod,10);
 +
}
 +
 
 +
function doSlide(dX) {
 +
// get the current left of the sliding div
 +
x = slideObj.offsetLeft;
 +
if(x+SLIDE_STEP<dX) {
 +
// div is less than its destination, move it to the right
 +
x+=SLIDE_STEP;
 +
slideObj.style.left = x + "px";
 +
} else if (x-SLIDE_STEP>dX) {
 +
// div is more than its destination, move to the left
 +
x-=SLIDE_STEP;
 +
slideObj.style.left = x + "px";
 +
} else  {
 +
// div is within the boundaries of its destination. put it where its supposed to be
 +
// and clear the interval
 +
slideObj.style.left = dX + "px";
 +
clearInterval(zInterval);
 +
zInterval = null;
 +
}
 +
}
 +
 
 +
// Multiple onload function created by: Simon Willison
 +
// http://simonwillison.net/2004/May/26/addLoadEvent/
 +
function addLoadEvent(func) {
 +
  var oldonload = window.onload;
 +
  if (typeof window.onload != 'function') {
 +
    window.onload = func;
 +
  } else {
 +
    window.onload = function() {
 +
      if (oldonload) {
 +
        oldonload();
 +
      }
 +
      func();
 +
    }
   }
   }
}
}
-
window.onload = miniTab.init;
+
addLoadEvent(function() {
-
window.onunload = miniTab.cleanUp;
+
  init();
 +
});
 +
 
 +
 
</SCRIPT>
</SCRIPT>
-
  <h2>Animated Mini Tabs</h2>
+
-
<ul id="miniflex">
+
<!-- this list is the actionable markup -->
-
  <li><a href="/about/" title="">About</a></li>
+
<ul id="mContainer">
-
  <li><a href="/archives/" title="">Archives</a></li>
+
<li><a href="#" title="Item One">Item One</a></li>
-
  <li><a href="/the-language-in-the-lab/" title="">The Language in the Lab</a></li>
+
<li><a href="#" title="Item Two">Item Two</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>
+
 +
<li><a href="#" title="Item Three">Item Three</a></li>
 +
<li><a href="#" title="Item Four">Item Four</a></li>
 +
<li><a href="#" title="Item Five">Item Five</a></li>
 +
</ul>

Revision as of 12:01, 1 July 2011

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