MediaWiki:Medik.js
From the Audiovisual Identity Database, the motion graphics museum
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
// Tabber
var Tabs = {
switchDuration: 400,
selectorDuration: 200,
inactiveOpacity: 0.25,
hoverOpacity: 0.6,
tab1: null,
tab2: null,
tab3: null,
tab4: null,
tab5: null,
tab6: null,
tab1Selector: null,
tab2Selector: null,
tab3Selector: null,
tab4Selector: null,
tab5Selector: null,
tab6Selector: null,
selected: 1,
hoverTab: function (tab) {
"use strict";
if (tab === Tabs.selected) {
return;
}
if (tab === 1) {
Tabs.tab1Selector.animate({
opacity: Tabs.hoverOpacity
}, Tabs.selectorDuration);
}
if (tab === 2) {
Tabs.tab2Selector.animate({
opacity: Tabs.hoverOpacity
}, Tabs.selectorDuration);
}
if (tab === 3) {
Tabs.tab3Selector.animate({
opacity: Tabs.hoverOpacity
}, Tabs.selectorDuration);
}
if (tab === 4) {
Tabs.tab4Selector.animate({
opacity: Tabs.hoverOpacity
}, Tabs.selectorDuration);
}
if (tab === 5) {
Tabs.tab5Selector.animate({
opacity: Tabs.hoverOpacity
}, Tabs.selectorDuration);
}
if (tab === 6) {
Tabs.tab6Selector.animate({
opacity: Tabs.hoverOpacity
}, Tabs.selectorDuration);
}
},
unhoverTab: function (tab) {
"use strict";
if (tab === Tabs.selected) {
return;
}
if (tab === 1) {
Tabs.tab1Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
if (tab === 2) {
Tabs.tab2Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
if (tab === 3) {
Tabs.tab3Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
if (tab === 4) {
Tabs.tab4Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
if (tab === 5) {
Tabs.tab5Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
if (tab === 6) {
Tabs.tab6Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
},
changeTab: function (tab) {
"use strict";
if (tab === Tabs.selected) {
return;
}
if (Tabs.selected === 1) {
Tabs.tab1.hide(Tabs.switchDuration);
Tabs.tab1Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
if (Tabs.selected === 2) {
Tabs.tab2.hide(Tabs.switchDuration);
Tabs.tab2Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
if (Tabs.selected === 3) {
Tabs.tab3.hide(Tabs.switchDuration);
Tabs.tab3Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
if (Tabs.selected === 4) {
Tabs.tab4.hide(Tabs.switchDuration);
Tabs.tab4Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
if (Tabs.selected === 5) {
Tabs.tab5.hide(Tabs.switchDuration);
Tabs.tab5Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
if (Tabs.selected === 6) {
Tabs.tab6.hide(Tabs.switchDuration);
Tabs.tab6Selector.animate({
opacity: Tabs.inactiveOpacity
}, Tabs.selectorDuration);
}
Tabs.selected = tab;
if (tab === 1) {
Tabs.tab1.show(Tabs.switchDuration);
Tabs.tab1Selector.animate({
opacity: 1
}, Tabs.selectorDuration);
}
if (tab === 2) {
Tabs.tab2.show(Tabs.switchDuration);
Tabs.tab2Selector.animate({
opacity: 1
}, Tabs.selectorDuration);
}
if (tab === 3) {
Tabs.tab3.show(Tabs.switchDuration);
Tabs.tab3Selector.animate({
opacity: 1
}, Tabs.selectorDuration);
}
if (tab === 4) {
Tabs.tab4.show(Tabs.switchDuration);
Tabs.tab4Selector.animate({
opacity: 1
}, Tabs.selectorDuration);
}
if (tab === 5) {
Tabs.tab5.show(Tabs.switchDuration);
Tabs.tab5Selector.animate({
opacity: 1
}, Tabs.selectorDuration);
}
if (tab === 6) {
Tabs.tab6.show(Tabs.switchDuration);
Tabs.tab6Selector.animate({
opacity: 1
}, Tabs.selectorDuration);
}
},
init: function () {
"use strict";
Tabs.tab1 = $('#content-1');
Tabs.tab1Selector = $('#selector-1').click(function () {
Tabs.changeTab(1);
return false;
}).css('opacity', 1);
Tabs.tab1Selector.hover(function () {
Tabs.hoverTab(1);
}, function () {
Tabs.unhoverTab(1);
});
Tabs.tab2 = $('#content-2');
Tabs.tab2Selector = $('#selector-2').click(function () {
Tabs.changeTab(2);
return false;
}).css('opacity', Tabs.inactiveOpacity);
Tabs.tab2Selector.hover(function () {
Tabs.hoverTab(2);
}, function () {
Tabs.unhoverTab(2);
});
Tabs.tab3 = $('#content-3');
Tabs.tab3Selector = $('#selector-3').click(function () {
Tabs.changeTab(3);
return false;
}).css('opacity', Tabs.inactiveOpacity);
Tabs.tab3Selector.hover(function () {
Tabs.hoverTab(3);
}, function () {
Tabs.unhoverTab(3);
});
Tabs.tab4 = $('#content-4');
Tabs.tab4Selector = $('#selector-4').click(function () {
Tabs.changeTab(4);
return false;
}).css('opacity', Tabs.inactiveOpacity);
Tabs.tab4Selector.hover(function () {
Tabs.hoverTab(4);
}, function () {
Tabs.unhoverTab(4);
});
Tabs.tab5 = $('#content-5');
Tabs.tab5Selector = $('#selector-5').click(function () {
Tabs.changeTab(5);
return false;
}).css('opacity', Tabs.inactiveOpacity);
Tabs.tab5Selector.hover(function () {
Tabs.hoverTab(5);
}, function () {
Tabs.unhoverTab(5);
});
Tabs.tab6 = $('#content-6');
Tabs.tab6Selector = $('#selector-6').click(function () {
Tabs.changeTab(6);
return false;
}).css('opacity', Tabs.inactiveOpacity);
Tabs.tab6Selector.hover(function () {
Tabs.hoverTab(6);
}, function () {
Tabs.unhoverTab(6);
});
}
};
Tabs.init();
