Skip to content

Commit 24ba9a3

Browse files
retroretro
committed
Mobile version with sliding menu is ready
1 parent d76e372 commit 24ba9a3

File tree

6 files changed

+807
-15
lines changed

6 files changed

+807
-15
lines changed

‎_includes/builder.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ <h4><a href="#dom_helpers">DOM HELPERS</a> - faster and easier DOM manipulation
2323

2424
<label>
2525
<input type="checkbox" value="jquery/dom/form_params" name="plugins"/>
26-
<a href="#formparams">jQuery.formParams</a> - serializes a form into an object
26+
<a href="#dimensions">jQuery.formParams</a> - serializes a form into an object
2727
</label>
2828

2929
<label>
@@ -85,7 +85,7 @@ <h4><a href="#events">EVENTS</a> - listen to special events with:</h4>
8585

8686
<label>
8787
<input type="checkbox" value="jquery/event/resize" name="plugins"/>
88-
<a href="#resize">jQuery.event.resize</a> - listen to a resize event on any element
88+
<a href="#resize">jQuery.event.resize</a> - listen to a resize event on every object
8989
</label>
9090

9191
<label>

‎_layouts/default.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
})();
2222

2323
</script>
24+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
2425
</head>
2526
<body>
2627
<div id='bg'>
@@ -34,7 +35,7 @@
3435
</div>
3536
</div>
3637
<div class='cf' id='buttons'>
37-
<a href='https://forum.javascriptmvc.com/jquery'>Forums</a>
38+
<a href='https://forum.javascriptmvc.com/#Forum/jquerymx'>Forums</a>
3839
<a href='http://bitovi.com/blog/tag/jquerypp/'>Blog</a>
3940
<a href='https://twitter.com/jquerypp'>Twitter</a>
4041
</div>
@@ -55,6 +56,7 @@
5556
<script src="javascripts/jquery-1.7.1.js" type="text/javascript"></script>
5657
<script src="javascripts/can.jquery-1.0.2.js" type="text/javascript"></script>
5758
<script src="javascripts/can.construct.proxy.js" type="text/javascript"></script>
59+
<script src="javascripts/jquerypp.js" type="text/javascript"></script>
5860
<script src="javascripts/application.js" type="text/javascript"></script>
5961
</body>
6062
</html>

‎images/logo.png

-448 Bytes
Loading

‎javascripts/application.js

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
var isMobile = false;
2+
3+
if(window.matchMedia && window.matchMedia("(max-device-width: 480px)")){
4+
isMobile = true;
5+
}
6+
7+
18
var currentH2slug = "";
29
var animationCount = 0;
310

@@ -210,15 +217,17 @@ can.Control('Menu', {
210217
}, 1);
211218
},
212219
resizeMenu : function(){
213-
var menuWrapHeight = this.element.find('#menu-wrapper').height(),
220+
if(!isMobile){
221+
var menuWrapHeight = this.element.find('#menu-wrapper').height(),
214222
menuHeight = this._menu.height(),
215223
windowHeight = $(window).height();
216-
this.element.find('#inner-menu-wrap').css('maxHeight', (windowHeight - (menuWrapHeight - menuHeight) - 40) + "px");
217-
if(this.element.find('#inner-menu-wrap').innerHeight() - menuHeight > 2){ // top and bottom borders
218-
this._menuShouldScroll = true;
219-
} else {
220-
this._menuShouldScroll = false;
221-
this._menu.css('marginTop', 0);
224+
this.element.find('#inner-menu-wrap').css('maxHeight', (windowHeight - (menuWrapHeight - menuHeight) - 40) + "px");
225+
if(this.element.find('#inner-menu-wrap').innerHeight() - menuHeight > 2){ // top and bottom borders
226+
this._menuShouldScroll = true;
227+
} else {
228+
this._menuShouldScroll = false;
229+
this._menu.css('marginTop', 0);
230+
}
222231
}
223232
},
224233
"#inner-menu-wrap mousemove" : function(el, ev){
@@ -292,6 +301,38 @@ can.Control('Menu', {
292301
}
293302
});
294303

304+
can.Control('MobileMenu', {}, {
305+
"{document} swiperight" : function(el, ev){
306+
$('#menu-wrapper').css({
307+
top: $(window).scrollTop() + "px"
308+
}).animate({
309+
marginLeft: 0
310+
}, 150)
311+
},
312+
" touchstart" : function(el, ev){
313+
var target = $(ev.target);
314+
if(target.closest('#menu-wrapper').length > 0 && target.is('a')){
315+
var cb = function(){
316+
window.location = target.attr('href');
317+
}
318+
this.hideMenu(cb);
319+
ev.preventDefault();
320+
}
321+
},
322+
"{document} swipeleft" : "hideMenu",
323+
"#inner-menu-wrapper li a swipeleft" : "hideMenu",
324+
hideMenu : function(cb){
325+
if(arguments.length > 1){
326+
cb = function(){};
327+
}
328+
$('#menu-wrapper').animate({
329+
marginLeft: "-100%"
330+
}, 150, cb)
331+
}
332+
})
333+
334+
335+
295336
can.Control('Builder', {
296337
'input[type="checkbox"] click' : function() {
297338
var button = this.element.find('button');
@@ -323,6 +364,16 @@ if($('.lt-ie7, .lt-ie8, .lt-ie9').length == 0){
323364
} else {
324365
new Menu($('#wrapper'), 'html,body');
325366
}
326-
367+
new MobileMenu(document.documentElement)
327368
$('a[href$=#dom_helpers], a[href$=#events]').prepend('<span class="special">&#x2605;</span>');
328369

370+
// google analytics
371+
var _gaq = _gaq || [];
372+
_gaq.push(['_setAccount', 'UA-2302003-11']);
373+
_gaq.push(['_trackPageview']);
374+
375+
(function() {
376+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
377+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
378+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
379+
})();

0 commit comments

Comments
 (0)