| Index: trunk/mockups/glaucus-quick/glaucus.css |
| — | — | @@ -67,6 +67,7 @@ |
| 68 | 68 | overflow: hidden; |
| 69 | 69 | font-size: 13px; |
| 70 | 70 | padding: 1px 4px; |
| | 71 | + background: white; |
| 71 | 72 | } |
| 72 | 73 | |
| 73 | 74 | .langbar span { |
| Index: trunk/mockups/glaucus-quick/app.js |
| — | — | @@ -6,10 +6,11 @@ |
| 7 | 7 | $active.removeClass('active'); |
| 8 | 8 | $('.menu').hide(); |
| 9 | 9 | } |
| 10 | | - } |
| | 10 | + } |
| 11 | 11 | function setupMenu(button, menu) { |
| 12 | 12 | $(button).bind('click touchstart mousedown', function(e) { |
| 13 | 13 | e.preventDefault(); |
| | 14 | + e.stopPropagation(); |
| 14 | 15 | |
| 15 | 16 | hideMenus(); |
| 16 | 17 | |
| — | — | @@ -21,6 +22,7 @@ |
| 22 | 23 | |
| 23 | 24 | $('#menu-pane').bind('click touchstart mousedown', function(e) { |
| 24 | 25 | e.preventDefault(); |
| | 26 | + e.stopPropagation(); |
| 25 | 27 | hideMenus(); |
| 26 | 28 | $('#menu-pane').hide(); |
| 27 | 29 | }); |
| — | — | @@ -30,5 +32,54 @@ |
| 31 | 33 | setupMenu('#menu-contribute', '#contribute-menu'); |
| 32 | 34 | setupMenu('#menu-search', '#search-menu'); |
| 33 | 35 | |
| | 36 | + function sendHeaderTo(y) { |
| | 37 | + $('header').css('top', y + 'px'); |
| | 38 | + $('#menu-pane').css('top', (y + 44) + 'px'); |
| | 39 | + } |
| | 40 | + |
| | 41 | + function hideMenuBar() { |
| | 42 | + hideMenus(); |
| | 43 | + $('#menu-pane').hide(); |
| | 44 | + sendHeaderTo(0); |
| | 45 | + } |
| | 46 | + |
| | 47 | + function showMenuThingy() { |
| | 48 | + var top = $(window).scrollTop(), |
| | 49 | + current = $('header').css('top'); |
| | 50 | + if (current == '0px') { |
| | 51 | + sendHeaderTo(top); |
| | 52 | + } else { |
| | 53 | + hideMenuBar(); |
| | 54 | + } |
| | 55 | + } |
| | 56 | + |
| | 57 | + $(document).bind('click', function() { |
| | 58 | + showMenuThingy(); |
| | 59 | + }); |
| | 60 | + $(document).bind('scroll', function() { |
| | 61 | + hideMenuBar(); |
| | 62 | + }); |
| | 63 | + |
| | 64 | + $(document).bind('touchstart', function() { |
| | 65 | + var current = $('header').css('top'); |
| | 66 | + if (current == '0px') { |
| | 67 | + // simulate click handling for some reason it doesn't work |
| | 68 | + $(document).bind('touchend.menubar', function() { |
| | 69 | + $(document).unbind('touchmove.menubar'); |
| | 70 | + $(document).unbind('touchend.menubar'); |
| | 71 | + showMenuThingy(); |
| | 72 | + }); |
| | 73 | + $(document).bind('touchmove.menubar', function() { |
| | 74 | + // moved too much! cancel |
| | 75 | + $(document).unbind('touchmove.menubar'); |
| | 76 | + $(document).unbind('touchend.menubar'); |
| | 77 | + }); |
| | 78 | + } else { |
| | 79 | + // for start of scrolling or touch |
| | 80 | + hideMenuBar(); |
| | 81 | + } |
| | 82 | + }); |
| | 83 | + |
| | 84 | + |
| 34 | 85 | $(window).scrollTop(0); |
| 35 | 86 | }); |