Ionic 3 – Integrate AdMob Plus an Update of AdMob Free in Ionic 3 Applications

AdMob Plus is a Cordova plugin to use Google AdMob in hybrid applications like Ionic. AdMob Plus is developed by same developer Ratson who previously developed and maintained AdMob Free plugin. Ratson wanted to create an AdMob plugin with no ad sharing, as most of the plugin do, they take a part of the revenue from developer earning when they cross a certain threshold. But Ratson was interested to develop an open source project where a developer can use AdMob without any risk of revenue sharing.

Continue reading Ionic 3 – Integrate AdMob Plus an Update of AdMob Free in Ionic 3 Applications

Ionic 3 Toast Not Hiding Issue using Toast Controller Workaround!

Ionic 3 provides Toast Controller using which we can have close enough toasts like native applications. Toasts prove very helpful in making user interfaces more friendly, we can alert users for small information like data processing, please wait, It’s Done! like messages.

Continue reading Ionic 3 Toast Not Hiding Issue using Toast Controller Workaround!

Angular 7 – Drag and Drop Across Multi Lists in Angular Material 7

Angular Material 7 has introduced two major updates, Virtual Scroll, and Drag and Drop. Both these features prove very useful and productive from a user perspective. You can check my previous post on Virtual Scroll here. In this post, we will create an application to demonstrate Drag and Drop functionality in Angular Material 7.

Drag and Drop enables a user to move anything from one place to another in a web application with the help of a mouse, this helps in creating interactive, highly simple clean user interface. In our application we will have three user lists i.e Still Doing, Done and Nevermind. A user can drop an item from any list and can drop to any other list.

Continue reading Angular 7 – Drag and Drop Across Multi Lists in Angular Material 7

AngularJS – Image Crop Directive with Resize in Angular 1.x

Many web application has a feature to upload media including images, this can be for any purpose like Uploading some document, uploading screenshots, Updating profile images. To provide a user-friendly interface for uploading we can add an Image crop tool on the client side so that user can crop the desired portion of Images to be uploaded. On another side, it also helps in reducing disk space occupied by images as cropped images have lesser size.

Continue reading AngularJS – Image Crop Directive with Resize in Angular 1.x

CSS & jQuery – How to Disable Text Selection Highlighting?

In some cases, we don’t want others to copy selected text. To prevent text on a webpage we can opt for CSS, Pure JavaScript or jQuery solution. We will discuss one by one.

Continue reading CSS & jQuery – How to Disable Text Selection Highlighting?

How to Test Touch Behavior in Google Chrome

Ever wondered to test touch events on Web Browser itself? Yes! it’s possible to emulate touch events and behavior in chrome browser. Many Ionic developers sometimes need to test touch events, then the only option left is to run the application in the real device.

Here we will discuss How to Enable Touch sensors in Google Chrome?

Continue reading How to Test Touch Behavior in Google Chrome

Ionic 3- Resolve! Failed to install ‘cordova-plugin-admob-free’: Error: Variable(s) missing: ADMOB_APP_ID

Here we will discuss an issue faced during the platform build of Ionic 3 application, having an AdMob Free plugin. You can see that error below, this issue comes when we don’t add AdMob app id in an application using AdMob Free Ionic 3 native Plugin.

Continue reading Ionic 3- Resolve! Failed to install ‘cordova-plugin-admob-free’: Error: Variable(s) missing: ADMOB_APP_ID

HTML5 – How to Disable Spell Check & Remove Red Line Below Text?

It is good to know about spell mistakes realtime as we type in case of global languages like English, but when we type in other regional languages auto spell check comes to the rescue even if not required.

Continue reading HTML5 – How to Disable Spell Check & Remove Red Line Below Text?

Owl Carousel 2 – Customize Navigation Next Prev Arrows

Owl Carousel 2 is a very popular and easy to implement Image and HTML slider. This is the most loved and favorable image slider available. Most developers prefer to use this slider due to many reasons like responsiveness, touch device support and also support older browsers. It is a full package of many useful options to customize it.

Here we will discuss navigation arrows, next prev buttons available by default looks a bit simple and centralized in between, so adding some custom CSS we will align them on both corners of the slider.

Continue reading Owl Carousel 2 – Customize Navigation Next Prev Arrows

Ionic 4 – Pull to Refresh functionality in Ionic 4.x Application

As seen in many Android native applications like chrome browser we usually have a user-friendly feature pull to refresh. A user just pulls or simply drag page down to some limit then, the current view is automatically got a refresh. Pull to refresh feature eliminates any need to tap or click somewhere.

Ionic provides the same component to add Pull Down feature in a hybrid environment. In this post, we will implement Pull Refresher in Ionic 4 application.

Continue reading Ionic 4 – Pull to Refresh functionality in Ionic 4.x Application