Guest User

Simple swipe/fade menus

a guest
Dec 1st, 2012
559
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function E(id) {return document.getElementById(id)}
  2. var swStep = 10, swInt = 10;
  3. function Menu(name, swipe) {
  4.     // --- Class to make a swipy menu. The menu elements must be in the following format:
  5.     // <div class="wrap"><div class="menu" id="menu_M">[content]</div></div>
  6.     // where M is the menu name
  7.     // swipe should be either "left" to swipe to the left or "down" to swipe downwards
  8.     // CSS needed:
  9.     // div.wrap {position: absolute; overflow: hidden;  visibility: hidden;}
  10.     // div.wrap div.menu {position: relative; visibility: visible }
  11.    
  12.     this.name = name;
  13.     this.el = E('menu_' + name);
  14.     this.opened = false;
  15.     this.stage = 0;
  16.     this.maxOp = .9;                // opacity of menu when it is fully revealed
  17.     this.swipe = swipe
  18.     this.animate = function(action) {
  19.         var t = this, opening = action == 'open', closing = action == 'close';
  20.         if (this.ti != undefined) {
  21.             clearInterval(this.ti);
  22.         }
  23.         this.ti = setInterval(function() {
  24.             if (opening) t.stage += swStep;
  25.             if (closing) t.stage -= swStep;
  26.             if ((opening && t.stage >= 100) || (closing && t.stage <= 0)) {
  27.                 clearInterval(t.ti);
  28.                 t.ti = undefined;
  29.                 t.stage = opening ? 100 : 0;
  30.             }
  31.             t.draw();
  32.         }, swInt);
  33.     }
  34.     this.draw = function() {
  35.         if (this.swipe == 'left') {
  36.             this.el.style.left = 100 - this.stage + '%';
  37.         }
  38.         else if (this.swipe == 'down') {
  39.             this.el.style.bottom = (100 - this.stage) * this.el.offsetHeight / 100 + 'px';
  40.                 // (because % positioning doesn't work vertically)
  41.         }
  42.         setOpacity(this.el, this.maxOp * this.stage / 100);
  43.     }
  44.     this.el.style.display = 'block';
  45.     this.draw();
  46.     this.close = function () {
  47.         this.opened = false;
  48.         this.animate('close');
  49.         document.body.onclick = null;
  50.         this.el.onclick = null;
  51.     }
  52.     this.open = function() {
  53.         var t = this;
  54.         this.opened = true;
  55.         this.animate('open');
  56.         document.body.onclick = function() {t.close()}
  57.         this.el.onclick = function(ev) {stopProp(ev)}
  58.     }
  59. }
  60. // e.g.
  61. var myMenu = new Menu('options', 'left');
  62. E('openMenuButton').onclick = myMenu.open();
Advertisement
Add Comment
Please, Sign In to add comment