Posts made by naufal17

So, I tried to make an offline app using Onsen UI and AngularJS
I know AngularJs is already stop developed, but because the application that I want to make is offline base, so I choose to use it still

Anw, back to the topic, I have already tried to follow the instruction of this ons-popover documentation, but it’s not working
Because I create an application that has few pages, so I use a template tag for every page and the popover as well

Here’s my HTML script looks like

<template id="main_page.html">
  <ons-page ng-controller="appCtrl">
    <ons-toolbar>
      My App
    </ons-toolbar>

    <div class="main">
      <ons-button id="target_button">Button</ons-button>
    </div>
  </ons-page>
</template>

<template id="popover.html">
  <ons-popover>
    This popover is defined as a template.
  </ons-popover>
</template>

And here is the script inside of my controller

app.controller("appCtrl", function($scope){
  ons.createElement("popover.html", {parentScope: $scope, append: true})
   .then(function(popover){
     popover.show("#target_button"); // the target where I want the popover to show at
   })
})

As you can see on my controller above, I use the ons-button id which is button_target as a target where I want the popover to show at
And the error that I got just like this

Error: [Onsen UI] Invalid target type or undefined
    at vi.throw (onsenui.min.js:2:62668)
    at HTMLElement.value (onsenui.min.js:2:236643)
    at t.<computed> [as show] (angular-onsenui.min.js:4:43505)
    at ctrl.js:93:11

It’s said that the target is undefined
So I tried to add and change a few lines just like this

ons.createElement("popover.html", {parentScope: $scope, append: true})
   .then(function(popover){
     var target = document.getElementById("button_target");
     popover.show("target"); // the target where I want the popover to show at
   })

But nothing changed, is there something that I missed?

@emccorson it’s not working again, even though I opened the same file as yesterday

@gobiyau thank you for answering my question, it’s work

Is there a way to make it autofocus after the page is open?

I don’t really get it, but it’s work again now, even though I didn’t make any changes
I hope this issue will not come again
anw, I really appreciate the effort that you have put into helping me
Thank you @emccorson

@emccorson Is it possible to save the file on the playground?

@emccorson I’m not sure am I using WkWebView on my device or not, but it’s not working on my laptop browser.
And about the solution link, I was just read it, but that is for iOS. How about android? Cuz I’m using android

A few months ago I was still able to use it, but now I can’t
More precisely when I want to move or navigate from index html file to another html file, the page doesn’t respond at all

Is there a way to solve the issue?

Btw, I’m using angularjs
So, I use this script to navigate from one page to another

myNav.pushPage('page2.html')

Hi guys, I need to make a menu button with a carousel, and I put a few images on it
I was trying to make it on the playground and it’s work, the images are not getting blur. But when I try to make it on my laptop, using my own images from my localdisk, its blur

Here is the code that I made on the playground

<ons-page ng-controller=“PageController as page”>
<ons-toolbar>
<div class=“center”>Carousel</div>
<div class=“right”>
<ons-toolbar-button>
<ons-icon icon=“ion-navicon, material:md-menu”></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>

<div class=“list”>
<ons-carousel swipeable overscrollable item-width=“110px”>
<ons-carousel-item>
<img src=“assets/img/movie_cover_template.jpg”>
</ons-carousel-item>
<ons-carousel-item>
<img src=“assets/img/movie_cover_template.jpg”>
</ons-carousel-item>
<ons-carousel-item>
<img src=“assets/img/movie_cover_template.jpg”>
</ons-carousel-item>
<ons-carousel-item>
<img src=“assets/img/movie_cover_template.jpg”>
</ons-carousel-item>
</ons-carousel>
</div>

</ons-page>
<style type=“text/css”>
.carousel ons-carousel-item img{
width: 100%;
max-height: 190px
}
.list{
margin: 10px;
height: 130px;
padding-top: 30px;
}
.list img {
width: 90%
}
</style>

And here is the result
PLAYGROUND

LOCALDISK

Anyway, I make the carousel using an array too

I’m trying to make some mobile applications using Cordova. In the application, there is a picture or text as the application content. I need the content can be able to zoom or to enlarge it

This is the example code

<template>
   <ons-page>
      <ons-toolbar>
         <dic class="center">Sample App</div>
      </ons-toolbar>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <img src="http://placekitten.com/g/1000/1000">
   </ons-page>
</template>

I have read the same topic, there is a Guy recommended to use canvas. I truly don’t know what he means. Help me please, thanks!

Anyway, I’m using AngularJS

@misterjunio how if I use angularjs? I need to make some indicators for the carousel

I was trying to create a few buttons using an array in Angularjs.
My question is how to put a value like function or code like myNavigator.pushPage(‘page’) inside ng-click from an array and make the button work to navigating

This is my code

HTML

<template id="home">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button></ons-back-button>
</div>
<div class="center">Home</div>
</ons-toolbar>

<ons-list ng-repeat="x in data">
<ons-list-item ng-click="x.link">
{{x.btn}}
</ons-list-item>
</ons-list>

</ons-page>
</template>

AngularJS

var module = angular.module('app', ['onsen']);
module.controller('Ctrl', ['$scope',  function ($scope){
  $scope.pg1 = function(){
    myNav.pushPage('pg1');
  };
  $scope.pg2 = function(){
    myNav.pushPage('pg2');
  };
  $scope.pg3 = function(){
    myNav.pushPage('pg3');
  };
	$scope.tombol = [
  {link:'pg1()', data:'Tombol 1'},
  {link:'pg2()', data: 'Tombol 2'},
  {link:'pg3()', data: 'Tombol 3'}
  ]
}]);

Don’t you use angular? cause i wanna try to make a button to play a video from youtube

I tried to display the notification using native backbutton. I have tried using the method shown below, but it doesn’t work properly, while for the cordova plugin was successful.
Then I looked for ways on the onsen website, I found this https://onsen.io/v2/api/angular1/ons.html#method-setDefaultDeviceBackButtonListener
But I still don’t know how to use it. So guys, please help me
thank you