3 Animated miniTabs by frequency decoder (http://www.frequency-decoder.com/)
5 Based on an idea by Rob L Glazebrook (http://www.rootarcana.com/test/smartmini/) itself
6 derived from the original idea of Stephen Clark (http://www.sgclark.com/sandbox/minislide/)
8 Adjusted by Thierry Parmentelat -- INRIA - uses only forms rather than <a> tags, for supporting http-POST
14 /* I'm done with this - write it ourselves - don't care about perfs so much anyway */
15 /* define getElementsByClassName on Element if missing */
16 function getElementsByClassName (elt,cls) {
18 var retval= elt.getElementsByClassName(cls);
21 var retVal = new Array();
22 var elements = elt.getElementsByTagName("*");
23 for (var i = 0; i < elements.length; i++) {
24 var element = elements[i];
25 var classes = element.className.split(" ");
26 for (var c = 0; c < classes.length; c++)
27 if (classes[c] == cls)
28 retVal.push(elements[i]);
52 miniTab.ul = document.getElementById("minitabs-list");
53 miniTab.liArr = miniTab.ul.getElementsByTagName("li");
54 // Thierry: the original impl. relied on <a> links rather than forms
55 // we use <input>s and there might be hidden ones, so use a class marker instead
56 miniTab.inputArr = getElementsByClassName(miniTab.ul,"minitabs-submit");
58 for(var i = 0, li; li = miniTab.liArr[i]; i++) {
59 li.onmouseover = miniTab.inputArr[i].onfocus = function(e) {
62 /* some browsers - firefox - somehow trigger this on <input> */
63 if (this.nodeName != "LI") return;
64 /* move up until we find the 'LI' tag */
65 while(elem.previousSibling) {
66 elem = elem.previousSibling;
67 if(elem.tagName && elem.tagName == "LI") pos++;
70 miniTab.initSlide(pos,true);
74 miniTab.ul.onmouseout = function(e) {
75 miniTab.initSlide(miniTab.currentTab,true);
76 miniTab.setActive (miniTab.activeTab,false);
79 for(var i = 0, input; input = miniTab.inputArr[i]; i++) {
80 if(input.className.search("active") != -1) {
81 miniTab.activeTab = miniTab.currentTab = i;
83 /*input.style.borderBottom = "0px";*/
84 /*input.style.paddingBottom = "6px";*/
87 miniTab.slideObj = miniTab.ul.parentNode.appendChild(document.createElement("div"));
88 miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
89 miniTab.slideObj.id = "minitabs-sliding";
90 miniTab.slideObj.style.top = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop +
91 miniTab.inputArr[miniTab.activeTab].offsetTop) + "px";
92 miniTab.slideObj.style.left = (miniTab.ul.offsetLeft + miniTab.liArr[miniTab.activeTab].offsetLeft +
93 miniTab.inputArr[miniTab.activeTab].offsetLeft) + "px";
94 miniTab.slideObj.style.width = miniTab.inputArr[miniTab.activeTab].offsetWidth + "px";
95 miniTab.aHeight = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop +
96 miniTab.inputArr[miniTab.activeTab].offsetTop);
98 miniTab.initSlide(miniTab.activeTab, true);
100 var intervalMethod = function() { miniTab.slideIt(); }
101 miniTab.animInterval = setInterval(intervalMethod,10);
104 cleanUp: function() {
105 clearInterval(miniTab.animInterval);
106 miniTab.animInterval = null;
109 initSlide: function(pos, force) {
110 if(!force && pos == miniTab.activeTab) return;
111 miniTab.setActive (miniTab.activeTab,false);
112 miniTab.activeTab = pos;
113 miniTab.setActive (miniTab.activeTab,true);
117 setActive: function (pos,active) {
118 var input=getElementsByClassName(miniTab.liArr[pos],"minitabs-submit")[0];
119 var cn=input.className;
120 cn=cn.replace(" active","");
121 if (active) cn += " active";
125 initAnim: function() {
126 /* search for the input with type != hidden */
127 var input=getElementsByClassName(miniTab.liArr[miniTab.activeTab],"minitabs-submit")[0];
128 miniTab.destX = parseInt(miniTab.liArr[miniTab.activeTab].offsetLeft + input.offsetLeft + miniTab.ul.offsetLeft);
129 miniTab.destW = parseInt(input.offsetWidth);
131 miniTab.b = miniTab.slideObj.offsetLeft;
132 miniTab.c = miniTab.destX - miniTab.b;
134 miniTab.bW = miniTab.slideObj.offsetWidth;
135 miniTab.cW = miniTab.destW - miniTab.bW;
137 miniTab.slideObj.style.top = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop) + "px";
142 // Has the browser text size changed?
143 if(miniTab.aHeight != miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop) {
145 miniTab.aHeight = miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop
148 if(miniTab.t++ < miniTab.d) {
149 var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);
150 var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);
152 miniTab.slideObj.style.left = parseInt(x) + "px";
153 miniTab.slideObj.style.width = parseInt(w) + "px";
155 miniTab.slideObj.style.left = miniTab.destX + "px";
156 miniTab.slideObj.style.width = miniTab.destW +"px";
160 animate: function(t,b,c,d) {
161 if ((t/=d/2) < 1) return c/2*t*t + b;
162 return -c/2 * ((--t)*(t-2) - 1) + b;
165 submit: function (message) {
166 /* save activeTab before confirmation; some browsers - firefox - send mouseout during confirm .. */
167 var submitTab = this.activeTab;
168 /* ask for confirmation if message is not empty */
169 if (message && ! confirm (message) ) return;
170 this.inputArr[submitTab].parentNode.parentNode.submit();
174 window.onload = miniTab.init;
175 window.onunload = miniTab.cleanUp;