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 function plc_debug (txt,value) {
15 window.console.log (txt + ' => ' + value);
18 function plc_element (txt,elem) {
19 var message=txt + ':';
20 message += ' type=' + elem.nodeName;
21 message += ' id=' + elem.id;
22 message += ' cls=' + elem.className;
23 window.console.log (message);
26 /* lists all attributes - or the specified one -
27 * verbose means the attribute value gets printed as well */
28 function plc_introspect (txt,obj,verbose,attribute) {
29 window.console.log ('=== beg intro ' + txt);
30 for (var prop in obj) {
31 if ( (attribute === undefined) || ( prop == attribute ) )
33 window.console.log (prop + '=' + obj[prop]);
35 window.console.log (prop);
37 window.console.log ('=== end intro ' + txt);
40 /* I'm done with this - write it ourselves - don't care about perfs so much anyway */
41 /* define getElementsByClassName on Element if missing */
42 function getElementsByClassName (elt,cls) {
44 var retval= elt.getElementsByClassName(cls);
47 var retVal = new Array();
48 var elements = elt.getElementsByTagName("*");
49 for (var i = 0; i < elements.length; i++) {
50 var element = elements[i];
51 var classes = element.className.split(" ");
52 for (var c = 0; c < classes.length; c++)
53 if (classes[c] == cls)
54 retVal.push(elements[i]);
78 miniTab.ul = document.getElementById("minitabs-list");
79 miniTab.liArr = miniTab.ul.getElementsByTagName("li");
80 // Thierry: the original impl. relied on <a> links rather than forms
81 // we use <input>s and there might be hidden ones, so use a class marker instead
82 miniTab.inputArr = getElementsByClassName(miniTab.ul,"minitabs-submit");
84 for(var i = 0, li; li = miniTab.liArr[i]; i++) {
85 li.onmouseover = miniTab.inputArr[i].onfocus = function(e) {
88 /* some browsers - firefox - somehow trigger this on <input> */
89 if (this.nodeName != "LI") return;
90 /* move up until we find the 'LI' tag */
91 while(elem.previousSibling) {
92 elem = elem.previousSibling;
93 if(elem.tagName && elem.tagName == "LI") pos++;
96 miniTab.initSlide(pos);
100 miniTab.ul.onmouseout = function(e) {
101 miniTab.initSlide(miniTab.currentTab);
102 miniTab.setActive (miniTab.activeTab,false);
105 for(var i = 0, a; a = miniTab.inputArr[i]; i++) {
106 if(a.className.search("active") != -1) {
107 miniTab.activeTab = miniTab.currentTab = i;
109 a.style.borderBottom = "0px";
110 /*a.style.paddingBottom = "6px";*/
113 miniTab.slideObj = miniTab.ul.parentNode.appendChild(document.createElement("div"));
114 miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
115 miniTab.slideObj.id = "minitabs-sliding";
116 miniTab.slideObj.style.top = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop +
117 miniTab.inputArr[miniTab.activeTab].offsetTop) + "px";
118 miniTab.slideObj.style.left = (miniTab.ul.offsetLeft + miniTab.liArr[miniTab.activeTab].offsetLeft +
119 miniTab.inputArr[miniTab.activeTab].offsetLeft) + "px";
120 miniTab.slideObj.style.width = miniTab.inputArr[miniTab.activeTab].offsetWidth + "px";
121 miniTab.aHeight = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop +
122 miniTab.inputArr[miniTab.activeTab].offsetTop);
124 miniTab.initSlide(miniTab.activeTab, true);
126 var intervalMethod = function() { miniTab.slideIt(); }
127 miniTab.animInterval = setInterval(intervalMethod,10);
130 cleanUp: function() {
131 clearInterval(miniTab.animInterval);
132 miniTab.animInterval = null;
135 initSlide: function(pos, force) {
136 if(!force && pos == miniTab.activeTab) return;
137 miniTab.setActive (miniTab.activeTab,false);
138 miniTab.activeTab = pos;
139 miniTab.setActive (miniTab.activeTab,true);
143 setActive: function (pos,active) {
144 var input=getElementsByClassName(miniTab.liArr[pos],"minitabs-submit")[0];
145 var cn=input.className;
146 cn=cn.replace(" active","");
147 if (active) cn += " active";
151 initAnim: function() {
152 /* search for the input with type != hidden */
153 var input=getElementsByClassName(miniTab.liArr[miniTab.activeTab],"minitabs-submit")[0];
154 miniTab.destX = parseInt(miniTab.liArr[miniTab.activeTab].offsetLeft + input.offsetLeft + miniTab.ul.offsetLeft);
155 miniTab.destW = parseInt(input.offsetWidth);
157 miniTab.b = miniTab.slideObj.offsetLeft;
158 miniTab.c = miniTab.destX - miniTab.b;
160 miniTab.bW = miniTab.slideObj.offsetWidth;
161 miniTab.cW = miniTab.destW - miniTab.bW;
163 miniTab.slideObj.style.top = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop) + "px";
168 // Has the browser text size changed?
169 if(miniTab.aHeight != miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop) {
171 miniTab.aHeight = miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop
174 if(miniTab.t++ < miniTab.d) {
175 var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);
176 var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);
178 miniTab.slideObj.style.left = parseInt(x) + "px";
179 miniTab.slideObj.style.width = parseInt(w) + "px";
181 miniTab.slideObj.style.left = miniTab.destX + "px";
182 miniTab.slideObj.style.width = miniTab.destW +"px";
186 animate: function(t,b,c,d) {
187 if ((t/=d/2) < 1) return c/2*t*t + b;
188 return -c/2 * ((--t)*(t-2) - 1) + b;
191 submit: function (message) {
192 /* save activeTab before confirmation; some browsers - firefox - send mouseout during confirm .. */
193 var submitTab = this.activeTab;
194 /* ask for confirmation if message is not empty */
195 if (message && ! confirm (message) ) return;
196 this.inputArr[submitTab].parentNode.parentNode.submit();
200 window.onload = miniTab.init;
201 window.onunload = miniTab.cleanUp;