I'm currently working on an Onsen-based application where the requirement is that the sliding menu stay open.
It works okay by setting "swipeable=false" in conjunction with manually opening the sliding menu via "application.slidingmenu.open()", but my issue is that there appears to be a click event bound somewhere that auto-closes the sliding-menu every time a click event is registered outside the sliding-menu (in the page body etc).
Anyone have any pointers?
Update: I went another route - by using ons-split-view (see official docs):
Essentialy, it's:
<ons-sliding-menu
ng-show="isMobile"
var="application.slidingmenu"
swipe-target-width="100"
main-page="page1.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px">
<ons-split-view
ng-show="!isMobile"
secondary-page="menu.html"
main-page="page1.html"
main-page-width="85%"
collapse="portrait">
Related
I'm trying to have an always open sidebar on desktop and screens that are large enough. and the a sidebar on mobile;
like the one shown here: http://onsen.io/pattern-sliding_menu.html
but there when you click on the main page the sidebar goes away.
any way to make it stick? I couldn't find anything for this
Onsen UI has <ons-split-view> for that. Explained in the docs: http://onsen.io/reference/ons-split-view.html
<ons-split-view
secondary-page="secondary.html"
main-page="main.html"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
I'm using Ionic directives as generated by Ionic Creator. At the top we have a standard nav-bar and tabbed navigation icons at the bottom. Each icon has a specific color and I want the navbar to match the color when clicked.
<ion-nav-bar class="bar-{{$root.color}}">
Firing on-select, I've tried to set $scope.color, $rootScope.color, and even created a function that returns the value of $rootScope.color.
<ion-tab title="Reps" icon="ion-person-stalker balanced" on-select="headerColor('balanced')">
With the code above, the css changes in the inspector but the new color is never applied or rendered. Anyone know a good way to work this in? I've also tried to $scope.$apply() but that just throws errors as other $digests are running.
Here's the app link
https://irthos.github.io/medviz-admin/#/labs
Here's the index.html with the code
https://github.com/irthos/medviz-admin/blob/master/www/index.html
Thanks!
This can be achieved by changing the color when switching states. I created a codepen that does just that:
http://codepen.io/cavanflynn/pen/VLBgEK
<ion-nav-bar class="bar-positive"
ng-class="{'bar-custom': secColor == '1',
'bar-custom2' : secColor == '2'}">
</ion-nav-bar>
<ons-sliding-menu var="slidingMenu" main-page="index.html" menu-page="menu.html" max-slide-distance="200px" type="overlay" side="left" swipable ="true"></ons-sliding-menu>
My sliding menu structure is above. The slide menu is working fine like opening and closing, on clicking the Button.
But my issue is, need to close the sliding menu on clicking outside of menu or on clicking the main-page(index.html)
I would like to know, is there an option available or any work around is available.
Thanks in advance
Yeah it would be nice to close the menu by clicking outside.
You can use the 'postopen' event for the Sliding Menu to attach a click handler to the main page. In the click handler you can call slidingMenu.close(). It's also important to remove the click handler, otherwise you won't we able to open the menu again.
Code:
ons.ready(function() {
slidingMenu.on('postopen', function() {
var main = slidingMenu._element[0].
querySelector('.onsen-sliding-menu__above').children[0],
el = angular.element(main);
el.on('click', function() {
slidingMenu.close();
el.off('click');
})
});
});
The following pen shows how it can be used:
http://codepen.io/argelius/pen/jENKeX
Since it's a nice behavior I think it will be added in the next version.
Regards
I have an off panel menu working perfectly on a site. The user can open and close it using both a navicon or sliding it with the finger.
Right now I have a very nice navicon icon that transitions from Menu Icon to X Icon when is clicked (and opens the menu) and the other way around when is clicked again and the menu closes. Buuut if the user slides the menu open or closed instead of using the navicon, the transition is not triggered, which might lead to confusions on the UX (i.e. the menu being closed, and the navicon showing an X instead of the regular 3 horizontal lines icon).
So, the navicon has right now the following code to trigger the transition:
ng-click="open = !open" ng-class="{'open-mob':open}">
I thought that a nice and easy way to fix this, would be to trigger this "open = !open" every time that the menu is open or closed, as the js from the off panel adds the class slidRight to the main section when the menu is open, and removes it when it is closed.
Being so, is there some straight way to check if the class is there using AngularJS?
Something like if class = slidRight -> "open = !open".
Thanks!!
for those (including me) who could not get their head around Angular's documentation, here is an example which worked for me:
angular.element(myElement).hasClass('my-class');
angular.element(myElement).addClass('new-class');
angular.element(myElement).removeClass('old-class');
hope this help someone ...
Angular uses jqLite's .hasClass() natively.
Read here on the angular docs for more info.
http://docs.angularjs.org/api/angular.element
https://docs.angularjs.org/api/ng/function/angular.element
My question is similar to this one and this one, but involves the new animations in AngularJS 1.2.0.
Basically, I have a bunch of elements on my signup page that are initially hidden and only displayed when a particular form element is invalid (they point to the invalid form element and display a message like "password needs to be at least 8 characters"). These messages fade in and out as they are shown/hidden.
But as soon as the signup page is displayed the elements are visible and fade out. They are briefly visible (they "blink" or "flash" on the screen, as is the case in situations where ng-cloak is necessary).
Here's a plunker to demonstrate the behaviour that I'm experiencing. In this plunker I have set up a basic route (the "login" page) that contains a box and a button that toggles the box's visibility. Notice how the box fades out when you click run? It should just be hidden. (I've deliberately set the animation to be slow so you can see the animation occurring).
How can I stop the animation from occurring initially?
What I've tried:
Set ng-cloak on the animating elements.
Use ng-cloak with the display: none !important rule added. (See this)
Setting display: none on the element, as if it were an "initial setting" for the element. (See this)
Interestingly, this plunker behaves properly and the animation doesn't occur initially. This plunker doesn't use routing and the controller is set explicitly on the body tag. I want to use routing though.
There's a problem with the version of angular you are using. Angular animate changed a lot I think in 1.2 so try this:
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script>
Check it out, I've forked your plunker here
http://plnkr.co/edit/Mchjx51GREGU2Gj0NBXX?p=preview