Ionic V1 footer, subheader jumping out of view (WkWebView iOS)

By | Ionic | No Comments

Following was observed on input focus (keyboard open) and then scrolling up / down with good speed and typing something (Ionic V1 WKWebView iOS):

  • sub-header was thrown out of view
  • Footer was appearing randomly anywhere on the page.
  • The content view scroll was restricted. I could only scroll in some parts of the page and the rest of the page was inaccessible. It was creating a bounce effect as if I touched the end of the page.
  • Touching anywhere on the content page fixed it but obviously a major issue.

Solution

1
<ion-content overflow-scroll="true">
1
2
3
4
5
6
7
// @source: https://ionicframework.com/docs/v1/api/provider/$ionicConfigProvider/

// App level across all devices
$ionicConfigProvider.scrolling.jsScrolling(false);

// Platform level across the entire app
$ionicConfigProvider.platform.android.scrolling.jsScrolling(false);

Read more about the options provided by ion-content here.

That’s it. Overflow scroll did the trick for me.

AWS: Elastic IP

By | AWS | No Comments

When an EC2 instance is stopped and started it releases te public IP address and a new public IP address is assigned. In other words, relying on the default assigned IP address is risky.

Elastic IP is a Static IP, which does not change (or gets released) and it associates with the instance itself. Hence, a strong connection is created here.

It is recommended to have an elastic IP along with each instance.

Ionic V1: Show form accessory bar conditionally on iOS

By | Uncategorized

With WKWebView having form accessory bar has problems with keyboard. However, for select dropdown it is essential to have that Done bar. The Done helps make the selection in iOS otherwise you need to tap on the select field itself that initiated the rolling box. Not many people knows about it. Here’s how you conditionally show form accessory bar only for select.

1
2
3
4
5
6
7
8
9
10
11
            if (ionic.Platform.isIOS()) {

                angular.element('body').on('touchstart focus', 'select', function (e) {
                    Keyboard.hideFormAccessoryBar(false);
                });

                angular.element('body').on('blur', 'select', function (e) {
                    Keyboard.hideFormAccessoryBar(true);
                });

            }

Ionic V1 Cursor Lost

By | Uncategorized

Sometimes span inside label takes focus along with input. Sometimes first the input takes focus then it moves to span. This transition removes the focus from the input but the keyboard still stays open. What you type in won’t register.

Removing span resolves the issue.

Ionic V1 Keyboard Close Leaves Content Up

By | Ionic

I had a main chat area in center and a input box at bottom for sending message.

Following code did the trick for me.

1
2
3
4
5
6
7
8
9
// This prevents the issue of the unwanted space left below the messages after the keyboard is closed.
                $timeout(function () {
                    $ionicScrollDelegate.scrollBottom(false);
                    // safety net
                    $timeout(function () {
                        // no animation since this is only a safety net
                        $ionicScrollDelegate.scrollBottom(false);
                    }, 350);
                }, 350);

This was called on blur and on focus of the input and when the message was sent.

How to share on Facebook with JS SDK and Vue?

By | Facebook

Facebook share offers different SDK’s to perform the share. JavaScript SDK, PHP SDK, Android SDK, iOS SDK etc.

We’ll be looking into the JS SDK

The project in which I wanted to integrate this Facebook share was based on Vue. Following are the steps, I followed to complete this feature.

Looking for an existing plugin: Vue-social-sharing

Initially I looked for an existing plugin to do the job and I found a really nice one here. It does the job in a nice manner. However, In my project there were certain actions I needed to perform if the facebook share was performed and there was no clear indication whether the share was actually performed or not. The closest information this plugin gave was when the facebook share popup was closed. Not good enough.

If all you need is facebook share and you do not need to perform any actions based on whether the share was performed or not. The plugin should be really a good fit.

Integrating FB Share with JS SDK

Facebook Documentation for JS SDK

Loading the SDK

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
methods: {

    initializeFacebook()
    {

        window.fbAsyncInit = function () {
            FB.init({
                appId: '*******',
                autoLogAppEvents: true,
                xfbml: true,
                version: 'v3.3'
            });
        };

// Since vue doesn't allow placing the script tag inside template we will not use the following script tag but an alternative way to do the same.
        /* <script async defer src="https://connect.facebook.net/en_US/sdk.js"> */

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

    }
}

The above code loads the SDK for us. I created a method called initializeFacebook and invoked it inside the mounted block.

Click to Share

Now that we have loaded the SDK, we can proceed with the share. During development you might be sharing with a virtual environment. Facebook expects you to input this domain in App’s Domains. Not doing it will end up with an error.


We are ready to perform share now. Let’s add one more method: facebookShare.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
methods: {
    facebookShare()
    {

        let self = this;

        FB.ui(
            {
                method: 'share',
                href: self.issueUrl, // replace with your url
            },
            // callback
            function (response) {
                if (response && !response.error_message) {
                    alert('Posting completed.');
                } else {
                    alert('Error while posting.');
                }
            }
        );

    }
}

We can call this function on the click of the share button.

Voila! Now we know whether the user did share our post or not.

For local development share, facebook can’t read our meta tags since it is our virtual domain and we should not expect a proper share content on local development environment. However, once you put this code on your production server, a domain that is accessible to everyone and facebook, it should work just fine.

If this guide helped you in anyway, please consider dropping a comment, it will mean a lot to me.