How can i remove navigator toolbar from top on single page index.html, but i want ons.navigator.pushPage functionality for some button on index.html is it possible?
It can be achieved by hide-toolbar="true" on index page and get back false on page1 , but after move to page1, i am not able to view left button on top header, and ons.navigator.popPage() is also not working on my button.
You can vanish navigation bar by
index.html
<ons-navigator page="foo.html" hide-toolbar=true></ons-navigator>
http://onsenui.io/guide/components.html#navigator
And in order to display ons-navigator html on next.html, write this in foo,html
foo.html
<div class="topcoat-navigation-bar">
<div class="topcoat-navigation-bar__item center full">
<h1 class="topcoat-navigation-bar__title">Navigation Bar</h1>
</div>
</div>
<br><br><br>
<div class="topcoat-navigation-bar topcoat-navigation-bar--bottom">
<div class="topcoat-navigation-bar__line-height" style="text-align:center">Bottom Toolbar</div>
</div>
http://onsenui.io/themes/#navigation-bar
Related
I am using Angular ui-router to navigate pages and flexbox as a grid type solution. I am attempting to reproduce Google Image Search Result look where the black expanding div opens under the selected image. I also need the route to change when the image is selected which I have working. However the div opens after all the divs in the row. Now after the row which the selected item is located. Any help on a ng-if, directive or script that could help me do this would be greatly appreciated.
EDIT: After thinking about it more I think I would need a script/directive that detected divs in selected's row and then inserted the ui-view div after the row.
Here what I have so far:
HTML:
<div id="container">
<a ng-repeat="item in professionals | filter:{cat: cat} | filter:query"
ui-sref="bids.item({item: item.link})"
ui-sref-active-eq="selected">
<div>
...
</div>
</a>
<div ui-view></div>
</div>
CSS makes div a flex element and wraps the square `a` divs contained.
Partial that opens when clicked includes:
<div class="expand" data-ng-if=" need something to the extent of open only below selected items row">
Mobile Angular UI Is getting popular which is nothing but bootstrap 3 and angularjs combination
I would like to create a modal dialog box on button click and close the dialog on close icon, how to do it?
Based on the docs it says
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state='modal1'>
.....
</div>
</div>
But how to call this dialog, I tried this
<button ui-turn-on="modal1" class="btn btn-primary">Show Model</button>
But it is not working as expected, I am getting Warning: Attempt to set uninitialized shared state: modal1error
I think you have placed ui-content-for inside the ui-yield-to
Put it outside that div tag as follows
<div ui-yield-to="modals"></div>
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state="modal1">
....your model html code
</div>
</div>
So that modals will remain as a place holder
I have a main menu item inside of my base template which resides outside of my ng-view container. I would like for my links to work so that whenever I change pages between them, the pages load scrolled on top instead of the ng-view nested within my body and outside of my main menu.
It should be noted that when loading a view directly instead of through a link, the view starts on top, as I desire.
<body>
<header>
<search />
<login />
<!-- more main menu stuff -->
</header>
<div ng-view="" class="content">
<!-- This link should redirect me to /profile *and* start on top of my body! -->
<a ng-href="#/profile/john">John</a>
</div>
</body>
PS - The main menu is outside of my ng-view and directly on my base template so it easily resides on all my views.
You can use the autoscroll param with ng-view to make this work.
http://plnkr.co/edit/vmKoBHEKq0wP3du7gtps?p=preview
I want to write directive for hide submenu on click but it is not working properly.
Hover click on menu, Submenu are display but click on submenu I cannot manage hide all submenu
I'm not sure if you really need a directive for doing this. If you don't, you could use simply 'ng-hide' and 'ng-click' directives to make this works.
In the element you want to hide, put ng-hide="hideSubmenu" and in the element who will hide it, put a ng-click="hideSubmenu = true".
In your code:
<body ng-controller="MainCtrl">
<p>Hello name {{name}}!</p>
<div>
<div class="col-md-1" style="padding-left: 00px;padding-right: 350px">
<div class="cssmenu" ng-hide="hideSubmenu">
...
<li>Type</li>
<li>Request</li>
...
</div>
</div>
</div>
</body>
i have this html structure and i use angular-snap module:
<div snap-drawer id="menu">
profile
<hr/>
cart
</div>
<div snap-content>
<div ng-view></div>
</div>
When I click on one of the links in the snap-drawer, snap-content correctly loads the page but the snap-drawer will not close.
How can I close it? if you use the directive 'snap-close' on the link, the snap-drawer closes but the snap content does not load page.
Thanks
Snap.js Side Panel Default To Open? helped me with the same problem; try
<div snap-content style="-webkit-transformk: translate3d(266px, 0px, 0px);">
<div ng-view></div>
</div>
I think this works because default snap maxPosition is 266.