angular-mobile-frame

Handy frame-elements for a typical mobile website with off-canvas-navigation.
0 people use it

Angular Mobile Frame

Angular Mobile Frame gives you a set of HTML-elements for building a typical mobile webiste — including top- and bottom-bar and an off-canvas-navigation-area.

View the Demo

Usage

To use Angular Mobile Frame include angular.js, dist/js/angular-mobile-frame-x.x.x.min.js and dist/css/angular-mobile-frame-x.x.x.css in your site. Then write the following in your JS-script:

The ek.mobileFrame injects the component. Inside the config-method the height for top- and bottom-bar and the width of the off-canvas-navigation-area are set.

When this is done, you can use the Mobile-Frame-element-set inside your HTML:

The rendered DOM looks like this …

Angular Mobile Frame takes care of setting the correct height to the top-bar, the bottom-bar and the content-area. Also it sets the width of the off-canvas-navigation-area and toggles it, when the button is tapped.

Usage with ng-view

If you have routing and want angular to take care of displaying the content, just add the ng-view-attribute to the mobile-content-element. That's it!

Scrolling inside the content-area.

In the component's CSS I added -webkit-overflow-scrolling: touch. That's rather nice but unfortunately it doesn't guarantee a correct scrolling behaviour on some mobile devices. If you want to ensure, that only the content area is scrolling and not the whole site, you have to include a custom solution like iScroll.

In the moment I'm not planning to include custom scrolling into this component.

Meta

Me in teh interwebs:

@Herschel_R

EK-Blog

License

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE Version 2, December 2004

Copyright (C) 2004 Sam Hocevar sam@hocevar.net

Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

0. You just DO WHAT THE FUCK YOU WANT TO.

comments powered by Disqus
This page was last updated over 4 years ago.