Friday, June 10, 2016

How to set conditional WebView resizes on a Cordova/Phonegap project?

By Hường Hana 9:30 PM , , Leave a Comment

I'm using a plugin that creates another WebView (Appodeal banners) that overlaps the main apps WebView. Theres not a good way to fix that manipulating the HTML tags because elements mess

Default banner settings

32px : device screen height <= 400
50px : 400 < device screen height <= 720
90px = device screen height > 720

So the webview must resize height according to Appodeal banner height.

Example:

if (device.screen.height <= 400) { WebView.height = WebView.height - "32px" }

PS: I'm not Java programmer Web developer only

1 Answers

Answers 1

I'm not sure you have to resize your root webview on Admob banner show (I'm not even sure it is possible at all). But all that you need to do is to re-layout content of your main webview when banner is shown. If I understood your post right, you use Appodeal PhoneGap Plugin that really uses one more webview component to show ads. In this case you know everything about:

  1. Banner placement (top or bottom), b/c you request it explicitly (Appodeal.BANNER_TOP | Appodeal.BANNER_BOTTOM);
  2. Banner size (you described it yourself in question);
  3. A fact that banner is appeared (document.addEventListener('onBannerShown', function(){...}););

So, I'd just prepare an empty placeholders in my HTML template, add CSS rules that will hide them when no Appodeal banner shown, and onBannerShown event will display corresponding placeholder and resize all my webview content.

<style>   .appodeal-top {     position: absolute;     top: 0;     left: 0;     right: 0;     height: 0;   }   .main-content {     position: absolute;     top: 0;     bottom: 0;     left: 0;     right: 0;   }   .appodeal-show .appodeal-top {     /* replace it with appropriate value calculated on device height */     height: 50px;   }   .appodeal-show .main-content {     /* replace it with appropriate value calculated on device height */     top: 50px;   } </style> <script>   document.addEventListener('onBannerShown', function(){     document.getElementById('root').className = 'appodeal-show';   }); </script> <div id="root">   <div class="appodeal-top"></div>   <div class="main-content">   ...   </div> </div>

(I didn't try this code - it just shows you an idea).

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment