Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70432 articles
Browse latest View live
↧

How to implement a "scroll reveal" effect in Ionic-Angular (v5) found on the ionic homepage

March 22, 2020, 4:36 pm
$
0
0

@sakotturi wrote:

I would like to implement the effect of showing certain elements/components based on the scroll position. This is similar to the https://ionicframework.com/ page which beautifully reveals elements using a delay and scroll position.

I’ve been able to reproduce something similar using ng-in-viewport but it’s nowhere near as cool as the ionic page.

template:

   <ion-card
      inViewport
      [inViewportOptions]="{ partial: true, threshold: [0.5] }"
      (inViewportAction)="onIntersection($event)"
      class="activateOnScroll"
    >

scss:

.activateOnScroll {
  opacity: 0;
  -webkit-transform: translateY(48px);
  transform: translateY(48px);
  transition: .4s opacity,.8s -webkit-transform cubic-bezier(.07,.89,.79,.95);
  transition: .4s opacity,.8s transform cubic-bezier(.07,.89,.79,.95);
  transition: .4s opacity,.8s transform cubic-bezier(.07,.89,.79,.95),.8s -webkit-transform cubic-bezier(.07,.89,.79,.95)
}

.activateOnScroll.active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1
}

ts:

  public onIntersection({
    target,
    visible
  }: {
    target: Element;
    visible: boolean;
  }): void {
    this.renderer.addClass(target, visible ? 'active' : 'inactive');
    this.renderer.removeClass(target, visible ? 'inactive' : 'active');
  }

I don’t find that the renderer correctly captures these events. It does sometimes, misses them sometimes. I’ve got this wired up on a dozen components, it works on most of them, most of the time but it misses a lot.

My guess is that this is perhaps related to ion-content having it’s own scroll container? I’m guessing this because I’ve used ngx-scrollreveal on pure angular projects and it works great but doesn’t work with ionic projects https://github.com/tinesoft/ngx-scrollreveal

Maybe someone more familiar with the ionic homepage could show us how to do this within an Ionic Angular app?! I tried searching through the homepage source code but couldn’t see where the active class is being applied in js.

Posts: 1

Participants: 1

Read full topic

↧
Search

Bug: using one checkbox or radio in an ion-alert converts all inputs to checkbox/radio

March 22, 2020, 6:15 pm
↧
↧

Issues with iPhone notch

March 22, 2020, 9:01 pm
$
0
0

@tkclark wrote:

Having issue with the not and my modal. Anybody know what I should be doing to fix?

Screen Shot 2020-03-22 at 11.58.14 PM
Screen Shot 2020-03-22 at 11.58.14 PM902×184 22 KB

I tried adding:

body{
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}

but it isn’t helping. Oh, I also feel like the tab bar at the bottom needs some spacing as well. Any advice would be great!

P.S. I am using Ionic/Vue project. Might be outdated?

Posts: 1

Participants: 1

Read full topic

↧

How to pass radio button value to another page

March 22, 2020, 11:50 pm
$
0
0

@NthabyMogoboya wrote:

<ion-radio-group (ionChange)="radioChangeHandler($event)">

  <ion-list-header>

    <ion-label color="">

      Flavours

    </ion-label>

  </ion-list-header>

  <ion-item>

    <ion-label color="medium">Plain</ion-label>

    <ion-radio value="plain"></ion-radio>

  </ion-item>

  <ion-item>

    <ion-label color="success">Lemon&Herb</ion-label>

    <ion-radio value="Lemon&Herb"></ion-radio>

  </ion-item>

  <ion-item>

    <ion-label color="warning">Mild</ion-label>

    <ion-radio value="Hild"></ion-radio>

  </ion-item>

  <ion-item>

    <ion-label color="danger">Hot</ion-label>

    <ion-radio value="Hot"></ion-radio>

  </ion-item>

</ion-radio-group>

// .ts file

flavor: string;

radioChangeHandler(event: any){

this.flavor = event.target.value;

console.log(event.target.value);

}

Posts: 1

Participants: 1

Read full topic

↧

Notification as a voice call app

March 23, 2020, 12:20 am
$
0
0

@doraeball22 wrote:

How to implement notification like a voice call in LINE, Messenger, WhatsApp or any voice call app? when anyone calls to you, it will show screen accept or reject even though the app runs on background mode. Currently, I implement notification using FCM https://capacitor.ionicframework.com/docs/guides/push-notifications-firebase/ it works but I want notification like incoming call then user accepts it will open some link with capacitor InAppBrowser. (the notification should have a sound for ringing about a minute and show screen) because of normal notification, it won’t work when the user leaves the phone.

Posts: 1

Participants: 1

Read full topic

↧
↧

Remote databse driver

March 23, 2020, 12:49 am
$
0
0

@robyguglie wrote:

Hi! i’m trying to create an application and i need to interface with an mysql db, how can i connect to it using driver? i know i can use httprequest and php, but it’s not very secure, there is another way to do that?
thank you!

Posts: 1

Participants: 1

Read full topic

↧

XMPP strophe file transfer

March 23, 2020, 3:03 am
$
0
0

@etarom wrote:

Hi,
I am developing an ionic-cordova application with chat by Openfire.
I can’t get the strophe.si-filetransfer.js plugin to work
This the declaration in index, html:

  <script src="/assets/xmpp/strophe.si-filetransfer.js"></script>
  <script src="/assets/xmpp/strophe.ibb.js"></script>

and this in file .ts:

 import { Strophe } from 'strophe.js';
.......
.......

  this.connection.si_filetransfer.addFileHandler(self.fileHandler);
  this.connection.ibb.addIBBHandler(self.ibbHandler);

but connection.si_filetransfer’ and ‘connection.ibb’ are always ‘undefined’

i tried installing ‘npm strophejs-plugins’ but it doesn’t help

Can anyone help me?

Posts: 2

Participants: 2

Read full topic

↧

Android Studio not recognizing changes

March 23, 2020, 4:46 am
$
0
0

@Vigors wrote:

Hi,
For some reason, when I make a change to my code, and then build it: ionic build, ionic capacitor copy, the change is not picked up in the Android Studio. When I run the app, some old version of the code is ran on the app.

I am really stuck on this, any help would be appreciated.

Ionic:

Ionic CLI : 5.4.16 (C:\Users\craig\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.900.6
@angular-devkit/schematics : 9.0.6
@angular/cli : 9.0.6
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 1.5.1
@capacitor/core : 1.5.1

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

Utility:

cordova-res : 0.10.0
native-run : 0.3.0

System:

NodeJS : v12.15.0 (C:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10

Posts: 1

Participants: 1

Read full topic

↧
Search

Ionic date picker and calling calendar view

March 23, 2020, 5:15 am
↧
↧

--release causes a very large App Size

March 23, 2020, 5:30 am
$
0
0

@EinfachHans wrote:

When i build my App with:

ionic cordova build ios --debug --buildConfig is has a File Size of nearly 50mb.

But with

ionic cordova build ios --prod --release --buildConfig the Size of the distribution Archive is over 100mb.

Any Ideas?

I tried:

  • Remove Platform
  • Remove Node_modules
  • Remove Plugins
  • Remove www Folder
  • Reinstall and Rebuild everything

Posts: 1

Participants: 1

Read full topic

↧

How to get your current location in real-time using geolocation?

March 23, 2020, 5:34 am
$
0
0

@Sweg wrote:

I am getting my current location using Geolocation below:

ngAfterViewInit(): void {
    this.getLoc().then((resp) => {
      this.initMap(resp.coords.latitude, resp.coords.longitude);
    }, er => {
      alert('Cannot retrieve Location')
    });
  }

getLoc() {
    return this.geolocation.getCurrentPosition(
      {
        maximumAge: 1000, timeout: 5000,
        enableHighAccuracy: true
      });
  }

The above code retrieves my current location when I open up the app.

But now when the user has the app open, I want their location to be updated in realtime.

I.e. If I have the app open, & start walking, I want my longitude & latitude values to be updated on the map I’m initiating in ngAfterViewInit().

Can someone please tell me what changes I need to make to add this functionality?

Posts: 1

Participants: 1

Read full topic

↧

Circular dependency with modals

March 23, 2020, 7:45 am
$
0
0

@chager wrote:

Hi all. I’m trying to build a ModalPage to create a Contact. This Contact has a List of related Contacts wich can be created from inside the Modal. As soon as I try to Open the Modal from inside the Modal I get a “Circular dependency detected”. Does anyone know how I can prevent this?

Posts: 1

Participants: 1

Read full topic

↧

Ionic Router without Frameworks

March 23, 2020, 8:05 am
$
0
0

@ArasBerke wrote:

Hello! I am using Ionic without any Framework. How can I use the router? In the Docs there is this:

    customElements.define('nav-home', class NavHome extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          ... HTML CODE HERE ...
        `;
      }
    });

How can I split it into files? I tried using:

customElements.define('nav-home', class NavHome extends HTMLElement {
      connectedCallback() {
        $(this).load('myfile.html');
      }
    });

with jQuery, but It is not a good idea. What do you use? Thanks!

Posts: 1

Participants: 1

Read full topic

↧
↧

How to place an ion-label underneath an ion-fab-button?

March 23, 2020, 8:11 am
$
0
0

@Sweg wrote:

Is it possible to have an ion-label placed just underneath an ion-fab-button?

At the moment, it is appearing like this:

home

But I want it to display like so:

home1

Here is my current HTML & CSS:

<ion-fab class="ion-fab">
        <ion-fab-button color="light">
          <ion-label class="ion-text-wrap">HOME</ion-label>
            <ion-icon name="home-outline" color="primary"></ion-icon>
        </ion-fab-button>
</ion-fab>

.ion-fab {
  bottom: 20px;
  z-index: 400;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

Posts: 1

Participants: 1

Read full topic

↧

How to show loading spinner while fetching data ionic 4

March 23, 2020, 8:40 am
$
0
0

@tkhang wrote:

I want to fetch data when I displaying the loading spinner, and after duration, the spinner gone and user will see data. Please help me :smiley: In ionic 4 using loading controller

Posts: 1

Participants: 1

Read full topic

↧
Search

Ionic v4 livereload on Android emulator not working

March 23, 2020, 10:02 am
$
0
0

@obinnae wrote:

I want to test my Ionic 4 app on the Android emulator with live-reload, but when I run it, the emulator just shows a white screen and the chrome debug screen doesn’t print anything. If I run it without --livereload, it works fine, though I won’t be able to debug it. It also works fine (with --livereload) if testing on a device via USB.

Any idea why, or how I can get it to work on the emulator?

Thanks.

Posts: 1

Participants: 1

Read full topic

↧

Cordova-plugin-firebasex under iOS do not rigger callbacks

March 23, 2020, 10:06 am
$
0
0

@fascox wrote:

Firebase Cloud Message notification work quite well under Android.
But in iOS notifications definitely arrive as verified in the Xcode console but callbacks like onMessageReceived() or with getToken() never get triggered.

Anyone with this issue?

Ionic:

Ionic CLI : 6.3.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.900.4
@angular-devkit/schematics : 9.0.4
@angular/cli : 9.0.4
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 10 other plugins)

Utility:

cordova-res (update available: 0.10.0) : 0.9.0
native-run : 0.3.0

System:

Android SDK Tools : 26.1.1 (/Users/fascox/Library/Android/sdk)
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v13.8.0 (/usr/local/Cellar/node/13.8.0/bin/node)
npm : 6.14.3
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C504

Posts: 1

Participants: 1

Read full topic

↧
↧

Fab toggleList() not exist in V5?

March 23, 2020, 10:11 am
$
0
0

@LHLK wrote:

Good day. Updating from V4 to V5 but encouter issues and don’t know how to solve it.

In V4 following works:
import { IonFabList } from ‘@ionic/angular’;
@ViewChild(‘fab’,{static: false}) fab: IonFabList;

then I can call this.fab.toggleList(); (Open the list fab buttons)

But in V5 toggleList() no longer associated with IonFabList ?

I tried with IonFab but no luck. Would you please advice how to call the toggleList() method in ion-fab component?

Envirnoment:
Utility:
cordova-res : 0.10.0
native-run : 0.3.0
System:
Android SDK Tools : 26.1.1
NodeJS : v12.14.0 (D:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10

Thanks…

Posts: 1

Participants: 1

Read full topic

↧

Creator or Studio (a comprehensive comparison)

March 23, 2020, 11:20 am
$
0
0

@fogelfish wrote:

I asked Sales recently whether should I use Creator or Studio. The salesperson had very little to say. He told me this was a technical question, but he didn’t send me to technical support because, catch-22, I am not a subscriber of either. Uh… yeah, and that’s because I need to know which one to use!

He ended up advising me to go with Studio if I wanted full control over development.

As a developer I would like to know the details. Does anyone know if there is a comprehensive, side-by-side comparison of Creator and Studio?

Posts: 1

Participants: 1

Read full topic

↧

Equivalent path to http://localhost:8100/assets/ for ionic android

March 23, 2020, 11:56 am
$
0
0

@arunRaj1986 wrote:

Hello code lovers,

I have problem on my web app ( ionic 4, angular 6 and cordova 9).

I have to open a PDF file which located in src/assets folder,
while running locally filePath = 'http://localhost:8100/assets/ is working fine, but on android build it’s failed to locate assets path.

on opening of app , it shows
Application Error
The connection to the server was unsuccessful.
(file:///android_asset/www/index.html)

I know app does not run on localhost:port/

waiting for solution.

Posts: 1

Participants: 1

Read full topic

↧
Viewing all 70432 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>