<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
Related
So I have a button on my template, with a tooltip that gives some extra information about the button. I would like the tooltip to appear when the mouse hovers over the button, and then disappear when the button is clicked. Clicking the button loads a separate view.
Currently I have it so the tooltip appears on hover, but then the problem is that the tooltip sticks around after the button has been clicked. Since the button is no longer part of the current view, the tooltip jumps to the top corner of the screen for a few seconds before disappearing. I'd like it to disappear the moment the button is clicked.
So far I've tried two things to solve the problem, neither of which have worked:
I tried wrapping the JS function which opens a new view in $timeout, hoping that the tooltip would disappear before the new view loads.
I tried changing the tooltip-trigger to 'click', but now the tooltip won't appear when the mouse is hovering over it. It will appear once the button is clicked, and stay there until the view is re-loaded.
Here is my code, which includes the two failed attempts mentioned above:
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo($event)"
tooltip-trigger="'click'"
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function($event) {
$timeout(function($event) { //timeout
SystemViews.openNewView(ctrl.newView);
});
};
Is it possible to have separate triggers for a tooltip like this? If not, what is another way that I can make sure the tooltip disappears before the new view is loaded?
Thank you very much in advance for any wisdom you'd be willing to impart.
The simplest solution is to hide the tooltip before changing view.
If your tooltip is triggered by a click on your anchor, you can emulate a click in your loadNewFunction function to hide it.
Test.html:
<a id="the-button" ng-click="loadNewView($event)" uib-tooltip-html="getToolTipInfo($event)" tooltip-trigger="'click'">Click Me!</a>
Test.js
ctrl.loadNewView = function($event) {
angular.element('#the-button').trigger('click');
SystemViews.openNewView(ctrl.newView);
};
Maybe this answer can interest you since it's about a very similar question.
I found the solution (for me, at least). I learned that you can have multiple triggers if you separate them by space. For my solution, I used the value:
tooltip-trigger='mouseenter click'.
That way it always turns on when I mouse-over, and turns off when I click.
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo()"
tooltip-trigger="'mouseenter click'
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function() {
SystemViews.openNewView(ctrl.newView);
};
Hope someone else finds this helpful!
I encountered this specific issue with Material's md-dialog:
I click on any of the text boxes on the web page, which brings up
the mobile keyboard, this is on IPad 9.3.2.
after typing, I then either minimise the keyboard or leave it on
and click a button which shows a md-dialog as modal.
the modal shows up, which grays out and blocks the whole page.
but the dialog box appears outside of the screen, i.e. you cant see
it, you cant touch it, you cant close it.
now if I til the screen to change the orientation from horizontal to vertical or vise-versa, the screen resizes and the dialog is shown properly.
so as soon as i use the keyboard the immediate dialog show will be located incorrectly.
I am wondering if any one had this problem before, and if you know how to solve this issue?
Thanks a lot
I had a similar issue and resolved it by wrapping it in a timeout:
var confirm = $mdDialog.confirm()
.title('Test')
.content('This is test content')
.ariaLabel('Test')
.ok('Got it!')
.cancel('Cancel');
$timeout(
$mdDialog.show(confirm).then(function () {
// Do Something
})
, 0);
i have a big problem. I'm working on a side menu app, and i need to open another view from another view. I tried to use $state.go and $location.go but when i open a window, this window have the back button of the navigation bar. I want the window will open like when i click on a item on my menu, so with the sidemenu icon on left of the nav-bar. What is the method to open a "new window"?
when i open the new view with AngularJS $state.go and $location.path:
1
when i open the same with href="url" in my HTML sidemenu :
2
I need to open the new view like the second screenshot using angularJS. How can i hit it?
If you don't need navigation back button (eventually on condition) you can use this code in your index.html:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button hide-back-button="{{options.hideBackButton}}">
</ion-nav-back-button>
</ion-nav-bar>
When you need to hide the back button set options.hideBackButton = false;
Another way is to use: $ionicNavBarDelegate.showBackButton(false);
Instead of clicking on a button and showing the slide navigation menu, how to show the menu by just sliding the screen. Say for example the menu button is positioned on the top left corner. When I swipe the screen from left to right the menu must open likewise it should close if I swipe from right to left.
You could add a swipe listeners to the Viewport and call the events accordingly
Ext.Viewport.bodyElement.on('swipe', function (event, node, options){
var button = Ext.ComponentQuery.query('button');
if (event.direction == 'right') {
button[0]._handler();
} else {
button[1].fireAction('tap');
}
});
Fiddle: https://fiddle.sencha.com/#fiddle/c1p
Obviously this fiddle has bugs and should only be used so you can have an idea of how to implement your solution.
See here solution for how to show the side menu by just sliding the screen in Sencha Touch 2.4.1
Sencha Touch - menu and edge swipes errors
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