Fun Page

Home Page About Page Photo Page What's New Page Contact Page Favorite Links Guest Book Page Catalog <blink>Fun Page</blink>

Here you'll create or edit a custom page for your Web site.

<!-- Paste this code into the CSS section of your HTML document  -->

#miniflex {
  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;
}

#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;
}

<!-- Paste this code into an external JavaScript file named: miniTab.js  -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Brian McAllister :: http://www.frequency-decoder.com/ */

/*
Animated miniTabs by frequency decoder
Further information on this script can be located
on the authors Web site http://www.frequency-decoder.com/

Based on an idea by Rob L Glazebrook
(http://www.rootarcana.com/test/smartmini/)
which was derived from the original idea of Stephen Clark
(http://www.sgclark.com/sandbox/minislide/)

Changes
=======
05/03/06 : Creation
08/03/06 : Added the cleanUp method to stop IE memory leaks.

This script is distributed under a "Attribution-NonCommercial-ShareAlike 2.0" license

You are free:
  1. to copy, distribute, display, and perform the work.
  2. to make derivative works.

Under the following conditions:

  1. **Attribution*: You must attribute the work in the manner specified
     by the author or licensor.
  2. Noncommercial*: You may not use this work for commercial purposes.*
  3. Share Alike*: If you alter, transform, or build upon this work,
     you may distribute the resulting work only under a license identical to this one.
*/


var miniTab = {
  currentTab:     0,
  activeTab:      0,
  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);
      }
    }

    ul.onmouseout = function(e) {
      miniTab.initSlide(miniTab.currentTab);
    };
   
    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"));
    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) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
  }
}

window.onload = miniTab.init;
window.onunload = miniTab.cleanUp;


<!-- Paste this code into the HEAD section of your HTML document.
     You may need to change the path of the file.  -->

<script type="text/javascript" src="miniTab.js"></script>

<!-- Paste this code into the BODY section of your HTML document  -->

<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>

This is one of my favorite images

This is my good friend Hal. I took this picture on his birthday. I think he likes to be in pictures.

Here you'll create or edit a custom page for your Web site.

Use this template for any additional information you need such as products, pictures, fan clubs, links or just more information It's important to regularly change the content on your site and make updates to the information that you display. Doing this will help you to get more return visitors.

Here you'll create or edit a custom page for your Web site.

Use this template for any additional information you need such as products, pictures, fan clubs, links or just more information It's important to change the content on your site and make updates to the information that you display. Doing this will help you to get more return visitors.

Here you'll create or edit a custom page for your Web site.

Use this template for any additional information you need such as products, pictures, fan clubs, links or just more information It's important to regularly change the content on your site and make updates to the information that you display. Doing this will help you to get more return visitors.

This is one of my favorite images

This is my good friend Hal. I took this picture on his birthday. I think he likes to be in pictures.

This is one of my favorite images

This is my good friend Hal. I took this picture on his birthday. I think he likes to be in pictures.