User:WindPower/Page.js
Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
var nopeWiki = { nopeHeight: 873, innerNopeHeight: 552, nopeWidth: 450, maxInnerNeck: 150, currentWidth: -1, currentHeight: -1, currentTarget: -1, timer: null, stepInterval: 10, stepHeight: 2, stepMultiplier: 0.1, checkInterval: 100, clearNode: null, contentNode: null, headNode: null, neckNode: null, nopeNode: null, swingCenter: -120, swingOffset: -120, heightSwingAccelFactor: 0.001, heightSwingSpeed: 5, swingInterval: 15, getNeckTop: function(height) { return -height + 322; }, getHeadTop: function(height) { return -height + 164; }, getNeckSize: function(height) { if(height > nopeWiki.nopeHeight) { return nopeWiki.maxInnerNeck + height - nopeWiki.nopeHeight; } return height * nopeWiki.maxInnerNeck / nopeWiki.nopeHeight; }, getNopeTop: function(height) { return nopeWiki.currentTarget - nopeWiki.nopeHeight; }, updateHeight: function(height) { height = nopeWiki.getNeckSize(height + nopeWiki.swingOffset); nopeWiki.headNode.css('top', nopeWiki.getHeadTop(height) + 'px'); nopeWiki.neckNode.css('top', nopeWiki.getNeckTop(height) + 'px').css('height', height + 'px'); nopeWiki.nopeNode.css('top', nopeWiki.getNopeTop(height) + 'px'); }, step: function() { var difference = Math.abs(nopeWiki.currentTarget - nopeWiki.currentHeight); if(nopeWiki.currentTarget > nopeWiki.currentHeight) { nopeWiki.currentHeight = Math.min(nopeWiki.currentHeight + nopeWiki.stepHeight + nopeWiki.stepMultiplier * difference, nopeWiki.currentTarget); } else { nopeWiki.currentHeight = Math.max(nopeWiki.currentHeight - nopeWiki.stepHeight - nopeWiki.stepMultiplier * difference, nopeWiki.currentTarget); } nopeWiki.updateHeight(nopeWiki.currentHeight); if(nopeWiki.currentHeight == nopeWiki.currentTarget && nopeWiki.timer != null) { clearInterval(nopeWiki.timer); nopeWiki.timer = null; } }, swing: function() { nopeWiki.swingOffset += nopeWiki.heightSwingSpeed; nopeWiki.heightSwingSpeed -= (nopeWiki.swingOffset - nopeWiki.swingCenter) * nopeWiki.heightSwingAccelFactor; nopeWiki.updateHeight(nopeWiki.currentHeight); }, checkHeight: function() { var newWidth = nopeWiki.contentNode.width(); if(newWidth != nopeWiki.currentWidth) { nopeWiki.clearNode.css('width', newWidth + 'px'); nopeWiki.currentWidth = newWidth; } var newHeight = nopeWiki.contentNode.height(); if(newHeight != nopeWiki.currentTarget) { // Need to move nopeWiki.currentTarget = newHeight; if(nopeWiki.timer == null) { nopeWiki.timer = setInterval(nopeWiki.step, nopeWiki.stepInterval); } nopeWiki.clearNode.css('height', Math.max(nopeWiki.nopeHeight, newHeight) + 'px'); } }, init: function() { nopeWiki.clearNode = $('#windpower-clear'); nopeWiki.contentNode = $('#windpower-content'); nopeWiki.headNode = $('#windpower-head'); nopeWiki.neckNode = $('#windpower-neck'); nopeWiki.nopeNode = $('#windpower-nope'); nopeWiki.currentWidth = nopeWiki.contentNode.width(); var height = nopeWiki.contentNode.height(); nopeWiki.clearNode.css('width', nopeWiki.currentWidth + 'px').css('height', height + 'px'); nopeWiki.currentHeight = height; nopeWiki.currentTarget = height; nopeWiki.updateHeight(height); setTimeout(function(){setInterval(nopeWiki.checkHeight, nopeWiki.checkInterval); setInterval(nopeWiki.swing, nopeWiki.swingInterval);}, 10); } }; nopeWiki.init(); // Mini 3-tab system; so simple, no need for arrays var windTabs = { switchDuration: 400, selectorDuration: 200, inactiveOpacity: 0.25, hoverOpacity: 0.6, tab1: null, tab2: null, tab3: null, tab1Selector: null, tab2Selector: null, tab3Selector: null, selected: 1, hoverTab:function(tab) { if(tab == windTabs.selected) return; if(tab == 1) windTabs.tab1Selector.animate({opacity: windTabs.hoverOpacity}, windTabs.selectorDuration); if(tab == 2) windTabs.tab2Selector.animate({opacity: windTabs.hoverOpacity}, windTabs.selectorDuration); if(tab == 3) windTabs.tab3Selector.animate({opacity: windTabs.hoverOpacity}, windTabs.selectorDuration); }, unhoverTab:function(tab) { if(tab == windTabs.selected) return; if(tab == 1) windTabs.tab1Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration); if(tab == 2) windTabs.tab2Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration); if(tab == 3) windTabs.tab3Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration); }, changeTab:function(tab) { if(tab == windTabs.selected) return; if(windTabs.selected == 1) { windTabs.tab1.hide(windTabs.switchDuration); windTabs.tab1Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration); } if(windTabs.selected == 2) { windTabs.tab2.hide(windTabs.switchDuration); windTabs.tab2Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration); } if(windTabs.selected == 3) { windTabs.tab3.hide(windTabs.switchDuration); windTabs.tab3Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration); } windTabs.selected = tab; if(tab == 1) { windTabs.tab1.show(windTabs.switchDuration); windTabs.tab1Selector.animate({opacity: 1}, windTabs.selectorDuration); } if(tab == 2) { windTabs.tab2.show(windTabs.switchDuration); windTabs.tab2Selector.animate({opacity: 1}, windTabs.selectorDuration); } if(tab == 3) { windTabs.tab3.show(windTabs.switchDuration); windTabs.tab3Selector.animate({opacity: 1}, windTabs.selectorDuration); } }, init: function() { windTabs.tab1 = $('#windpower-content-1'); windTabs.tab1Selector = $('#windpower-selector-1').click(function(){windTabs.changeTab(1); return false;}).css('opacity', 1); windTabs.tab1Selector.hover(function(){windTabs.hoverTab(1);}, function(){windTabs.unhoverTab(1);}); windTabs.tab2 = $('#windpower-content-2'); windTabs.tab2Selector = $('#windpower-selector-2').click(function(){windTabs.changeTab(2); return false;}).css('opacity', windTabs.inactiveOpacity); windTabs.tab2Selector.hover(function(){windTabs.hoverTab(2);}, function(){windTabs.unhoverTab(2);}); windTabs.tab3 = $('#windpower-content-3'); windTabs.tab3Selector = $('#windpower-selector-3').click(function(){windTabs.changeTab(3); return false;}).css('opacity', windTabs.inactiveOpacity); windTabs.tab3Selector.hover(function(){windTabs.hoverTab(3);}, function(){windTabs.unhoverTab(3);}); } }; windTabs.init();