FAQ Database Discussion Community


ons-tabbar hide with jQuery

onsen-ui
I'm using onsen with ons-tabbar and want to hide/show the tabs with jquery. I want to hide the tabs in login page and show after login. This is my code: <head> <meta charset="utf-8"> <script src="http://debug-software.intel.com/target/target-script-min.js#h2kN-2HmemNy-2C0zFMFsSdJyBtr__GRx6CB-TI6nsA"></script> <link rel="stylesheet" href="css/onsenui.css"> <link rel="stylesheet" href="css/onsen-css-components-blue-basic-theme.css"> <link rel="stylesheet" href="css/login.css"> <script...

Onsen - Cordova - AngularJs module is not available

android,angularjs,cordova,onsen-ui
I've an hybrid app for android, i'm using cordova and onsen + angular js. This is my index.html file: <html lang="en" ng-app="AppModel"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <title>AppModel</title> <!-- <link rel="stylesheet" href="css/plugins.css"/> --> <link rel="stylesheet/less" href="css/plugins.less"/> <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link...

How to use ons-select in onse-ui-1.3.1?

angularjs,onsen-ui
i want to use ons-select in my app. and i have added it into my code, then debug the app, but the emulate show nothing. by the way, webstom alert me that 'can not find the ons-select tag'. so how to use ons-select in onse-ui-1.3.1? Any help is really appreciated....

Onsen UI navigation not working after adding tabbar

onsen-ui
I can't get the navigation to work with the tab bar. I have a list page, search page and details page. For some reason I can't get the list page to persist when navigating either. The details page is never shown even thought I am using app.navi.pushPage('detail.html'). Before adding the...

What is the best way to wrap onsen ui list item to 'a' tag?

onsen-ui
I try to make clickable list item using ons-list-item. When I display my entries like <ons-list-item modifier="tappable"> ... </ons-list-item> <ons-list-item modifier="tappable"> ... </ons-list-item> they are displayed properly. But list separators disappear when I try to wrap ons-list-item to a tag. What is the best way to make ons-list-item handle links?...

How to initialize subpage when i pushPage to it

javascript,html,onsen-ui
in my index.html <div class="grid9 red" onclick="myNavigatorHome.pushPage('Test.html', { animation : 'slide' } )"> test </div> When I click it will pushPage to Test.html but: How to run my initialize code in Test.html ? I tried to write them in Test.html ons.ready(function() {//do some thing}); but it didn't work I also...

Onsen-UI using sliding menu with navigator

android,ios,angularjs,onsen-ui,navigator
Ok, The problem is I have a working sliding menu with pages. Now one of my page has an ons-list. By clicking on ons-list-item I want to navigate to a new page with back button. I have searched everywhere but didn't find any proper solution to my problem. Here is...

Onsen ui error “TypeError: Cannot read property 'pushPage' of null”

angularjs,onsen-ui
Im developing with onsen ui + angularjs. My app have to ways to access to different sections, one is for "home" page and another is for lateral menu. When i use "home" menu and i access to any items of my list works perfect, but if i use lateral menu...

Set ons-switch with predifined values from Angular controller

angularjs,onsen-ui
I cannot seem to get the correct way to set the 'checked' attribute in ons-switch. This is so that I can setup user configurations page with pre-checked select boxes. The Docs: This is a checked switch but how do I set this using a variable in an angular controller? For...

Doesn't show div in onsen ui and angularjs

angularjs,onsen-ui
in my app i try to show my search div into my toolbar. Now my searchbar is outside from my toolbar and works fine (show and hide when i click on my search button). When i try to put my searchbar into my toolbar my search button doesnt work (doesnt...

How to insert new module into Onsen UI

onsen-ui
I have following code using Onsen UI ons.bootstrap(); app.controller('MainController', ['$scope', 'service', '$http', '$q', function($scope, service, $http, $q) { }]); I wonder how I can add new module like ngCookies so that I can access any $injector provided in that module....

onsen ons-toolbar on cordova

cordova,android-emulator,onsen-ui
I'm new in cordova development. I'm using Onsen UI (1.2.1) as layout framework. I have a problem with title on ons-toolbar. <ons-toolbar> <div class="center">someTextHere</div> </ons-toolbar> If I run my program on ripple, the toolbar text rendered correctly (centered text), but in android emulator, it didn't (text align changed to left)....

How to implement two slide-menu on both sides of a page in Onsen-UI?

onsen-ui
I'm new to Onsen-UI and would like to have slide-menus on both sides of my page. I intend to have multiple pages that will have this functionality and dont know how I can implement that. What is the best way to do that?

What is the usage of modifier=chevron on onsen ui list items

onsen-ui
I am using onsenui, there are a lot of examples on the net and onsen.io web site as this <ons-list-item modifier="chevron"> I just want to know what modifier do and what does modifier="chevron" mean?...

OnsenUI and Kendo pie chart issue

json,kendo-ui,onsen-ui,kendo-chart
I am using Kendo pie chart in onsenui framework and it works great if i use function createChart() { $("#chart").kendoChart({ title: { position: "bottom", text: "Share of Internet Population Growth, 2007 - 2012" }, legend: { visible: false }, chartArea: { background: "" }, seriesDefaults: { labels: { visible: true,...

toolbar text setting to class=“center”,but in android browser see in the left

android,html,css,onsen-ui
I download the Tab Bar Template (http://onsen.io/project-templates/gen/onsenui-tab-bar.zip) IOS and my pc chrome no problem,the toolbar text in center, but my android phone(new moto x 5.0 and meizu mx4 4.4.4 ) see the toolbar text in the left. is it bug? Thx for your help! enter image description here...

I can implement icomoon icons with onsen ui?

onsen-ui
I watched icomoon, and you can see that I can create my own icons, and down I can use with osenui but only if you use the tag class=<icon> And I realized I dare ui works with <ons-icon icon=<icon>, and can be configured to icon=<> work with icomoon? I tried...

How to show scrollbars in onsen ui app list

javascript,css,angularjs,onsen-ui
I'm using Onsen Ui to build a hybrid Phonegap app. There are lists on some pages with 100's of items. But, the scrollbars are not showing. Is there anyway to show native like scrollbars on the page? Here is the code I'm using: <ons-row > <ons-col align="center" > <ons-list class="scrollme"...

Onsen UI: Get content height

onsen-ui
I have tried everything but can't seem to get the height of the page content. I am using Onsen UI with JQuery. Can anyone provide me with an example? I am trying to calculate the height minus the navbar so that I can adjust a map to full height. Thanks!...

Onsen UI Sliding Menu : custom parameters with SetMainPage?

onsen-ui
Is there a way to set parameters for the next page when calling SetMainPage() on sliding menu ? Something similar to : myNavigator.pushPage("page2.html", { param1: "value1", param2: "value2" }); but using myMenu.setMainPage(...); ...

Use ons.enableAutoStatusBarFill in in onsen ui with angularjs

javascript,angularjs,onsen-ui
i am completely new to Angularjs trying to understand how can i use ons.enableAutoStatusBarFill(); this so i my menus wont over take the status bar. here is how i have my controller setup. var mod = ons.bootstrap('app', ['onsen']); mod.controller('MyControler', function($scope) { ons.ready(function() { // code inside... }); }); Any suggestions...

onsen-ui postclose not triggered with swiping

javascript,onsen-ui
HTML: <ons-sliding-menu main-page="page1.html" menu-page="sidemenu.html" side="left" max-slide-distance="250px" var="sidemenu" type="reveal" swipe-target-width="40px"> </ons-sliding-menu> JS: sidemenu.on('postclose', function() { $scope.show_y = false; $scope.show_x = true; }); the postclose function is not triggered when user swipes menu closed, clicks work fine though.... advise please? UPDATE --- $scope.$watch(function($scope) { return $scope.sidemenu.isMenuOpened(); }, function() { alert('hi'); }); not...

firing onsen's setMainPage in onclick using variable from ng-repeat

javascript,angularjs,onclick,angularjs-ng-repeat,onsen-ui
i want to make my Onsen UI splitView app to set the main page with a certain page based on a variable it got from the clicked item in a list. the list is generated by ng-repeat. i have searched about ng-repeat and ng-click, but none give what i am...

How do I use multiple html files with onsen & use the sliding menu?

onsen-ui
I am trying to use multiple files for pages. However, I also want to use the sliding menu. I read here that to use multiple files with Onsen you just remove <ons-template>. I understand this, but I can't get the sliding menu to work with it. Here is what I...

ONS Toolbar in ANDROID

android,html,css,cordova,onsen-ui
i am designing a page in mobile app using ONSEN UI. in page, i have used onsen toolbar. the problem i am facing is the text i am writing doesn't come in center even if i write that using center class. i tried some alternative solutions like, "text-allign=center", text ,...

Removing Items from carousel with Onsen UI

angularjs,cordova,onsen-ui
I have a simple app using Onsen UI and am taking advantage of the carousel and updating the data based on whether the user swipes left or right to the current carousel element. Once they have swiped, I would like to remove that element from the carousel so that they...

Error: NavigatorView's page stack is empty in onsenui

angularjs,onsen-ui
I'm developing mobile application using onsenUI and facing this problem when navigating to pages in stack. When moving from first page to second page, we normally use pushPage(). From second page to first page, we use popPage(). But when moving from third page to second page using back button and...

Change the color of the ons-back-button

onsen-ui
I am trying to figure out how to override the color of the ons-back-button element. I have tried using the modifier: Thick Button and create my own style but it does not work....

How to manipulate the DOM with Onsen UI

javascript,jquery,dom,onsen-ui
I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc. But when I try to add dynamic stuff in there, it does not want to cooperate. When I click my side menu, it calls...

OnsenUI all ons.* functions doesn't work

onsen-ui
I'm started to use OnsenUI with Angular. In some patterns ons. functions are used (like ons.bootstrap() ). But in my case, it doesn't work. My navigator error consol is like this ReferenceError: ons is not defined If someone have some idea to fix my problem it will be great :)...

ons-navigator Multiple Navigator in one page template

javascript,html,angularjs,cordova,onsen-ui
i am trying to create an app from Onsen UI framework. I am using multiple navigator. Here in the first page(Template) it works fine. With another pages it gives certain error. Here is the error i get when i click on my google chrome console Error: You can not supply...

Lazy repeat calculateItemHeight index is always undefined

onsen-ui
I'm using ons-lazy-repeat and I want to have variable item heights depending on the item. For that I'm using, as described in the documentation, a delegate object with a calculateItemHeight function. The problem is all item heights are being set to 20 because initially the index variable is always undefined....

Phonegap/Onsen/AngularJS Remove Page after Pagechange

angularjs,cordova,onsen-ui
I´m developing an App with Cordova Onsen-UI and AngularJS. I have several pages in my application. I change the page with that command: $scope.ons.navigator.pushPage('msg_det.html', { animation: 'slide' }); I´ve noticed the following: If I call the same page with the same command again, the old page still exist. (I have...

Monaca + barcode scanner callback issue

angularjs,cordova,barcode,onsen-ui,monaca
I am currently trying Monaca to develop an hybrid app using the Cordova barcode scanner plugin. For some reason, scan callback started to behave not properly. Immediatly after scanning, I get a syncing message dialog ("checking sync target files..."), then a "downloading files" dialog and then, finally, the result dialog...

How to use multiple html files in onsenui

angularjs,onsen-ui
In OnsenUI it says: "Instead of creating index.html and services.html in separate files, you can also define the page content in the same page." I don't like to have my whole app in one html file so I tried to put each template into a separate file. This is my...

OnsenUI can't access component in code

angularjs,onsen-ui
I am working on an OnsenUI Cordova application, using OnsenUI 1.3.1 (installed via bower), AngularJS 1.3.15, and Cordova 5.0.0. I'm having trouble getting to the ons-navigator object within JavaScript, and all of the methods mentioned in the OnsenUI website for doing so (http://onsen.io/guide/overview.html#CallingComponentAPIsfromJavaScript) don't seem to work for me. I...

How to center onsen ui button bar on a page

html,css,onsen-ui
I am trying to place the button bar in the center of the page. I am trying with text-align:center But the expected result is not coming. Stuck here.some help will be much appreciated.Here is the code. <div class="button-bar" style="width:300px;" style="text-align:center"> <div class="button-bar__item" style="text-align:center"> <button class="button-bar__button">Prev</button> </div> <div class="button-bar__item" style="text-align:center"> <button...

OnSen UI Sliding Menu not appearing

javascript,cordova,onsen-ui
I have a full page carousel. On the last carousel item I have a button to go to another page where I have the Sliding Menu. However, the sliding menu doesnt appear/show on this page. My code is as below <ons-navigator title="Navigator" var="appNavigator"> <ons-page> <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">...

How to make Scrollable List area in a specific div in body (Onsen-UI)

list,cordova,scroll,onsen-ui
I am making phonegap application using Onsen-UI.In that,I made a signup page.Now whenever I am trying to scroll the screen,whole body of page is scrolling.I want a particular division in a body that should gonna scroll only.I have app Logo above the signup page and Logo is in the body...

Get input value from onsen dialog

onsen-ui
I've been following an example in http://codepen.io/onsen/pen/zxxaGa. However, I can't figure out how I can get the input text (username, email) from the dialog after I click the button. <ons-page> <ons-toolbar> <div class="center">Dialog</div> </ons-toolbar> <ons-list ng-controller="DialogController"> <ons-list-item ng-click="show('login.html')" modifier="tappable"> Login form </ons-list-item> </ons-list> </ons-page> <ons-template id="login.html"> <ons-dialog var="dialog"...

onsen-ui gestures not working

onsen-ui,gestures,monaca
I need to implement a menu with the exact same looks as onsen sliding-menu,but that slides from top. I was thinking to use onsen gestures to be able to drag the menu, but the gestures sample provided in the onsen guide does not work. Am I missing something? <ons-gesture-detector> <div...

ONSEN UI applying different color to each list

cordova,onsen-ui
I have 3 lists and I want to apply different color to each list, how can I do this? <ons-list class="one"> <ons-list-item> ... </ons-list-item> </ons-list> <ons-list class="two"> <ons-list-item> ... </ons-list-item> </ons-list> <ons-list class="three"> <ons-list-item> ... </ons-list-item> </ons-list> ...

How do the search box stick to the toolbar in onsen-ui?

onsen-ui
In my page I have an ons-toolbar on top and an ons-list in the page. The first list-item contains a search box, when the user scrolls down the list the search box will go up with other elements, is there any way to make the search box sticks to to...

How to block Landscape Orientation mode in ONSEN-UI?

cordova,orientation,onsen-ui,landscape-portrait
I am developing a ONSEN Application, in which I want to allow only a Portrait mode for the device and want to set off the Landscape mode. How to do that?

Parent controller module is not loaded after pop page through from a pushed page

onsen-ui
that's my first question so I´m afraid to be a silly one but I have done a lot of research before and spend many ours trying to fix this by changing the code. I´m relatively new to web app programming and maybe missing some conceptual knowledge that can be blocking...

JavaScript - Uncaught TypeError: Cannot read property 'search' of undefined

jquery,onsen-ui
When I execute my Javascript im getting this error: Uncaught TypeError: Cannot read property 'search' of undefined And I don't know how do fix it and why that is shown. I have objects inside an array, example: AsukohaArray = [{"Punkt":[[58.1056],[23.2589]], "name":"Haapsalu Raamat", "PunktiID": 23}]; My code $(document).ready(function() { $("input[type='search']").keyup(function() {...

ONSEN UI Removing default styles from list-item

cordova,onsen-ui
How can I remove default padding from list-item because the list-item looks too large.

Can't implement onsen through other file (app.js)

android,angularjs,cordova,onsen-ui
i'm making a sample app to learn how to use cordova, phonegap, angular.js and onsen ui. a nice tutorial video from CodeSchool about angular.js and this sample app (https://github.com/andipavllo/Google-Maps-Onsen-UI-Sample) show that we can implement onsen into our app by putting var app = angular.module ('app',['onsen]); in another file. i've tried...