Nativescript Firebase plugin has Admob where you can use Smart Banner but we can't detect height of banner.
Who can i get banner height after it loads on different screen sizes?
firebase.admob.showBanner({
size: firebase.admob.AD_SIZE.SMART_BANNER, // see firebase.admob.AD_SIZE for all options
margins: { // optional nr of device independent pixels from the top or bottom (don't set both)
bottom: 10,
top: -1
},
androidBannerId: "ca-app-pub-9517346003011652/7749101329",
iosBannerId: "ca-app-pub-9517346003011652/3985369721",
testing: true, // when not running in production set this to true, Google doesn't like it any other way
iosTestDeviceIds: [ //Android automatically adds the connected device as test device with testing:true, iOS does not
"45d77bf513dfabc2949ba053da83c0c7b7e87715", // Eddy's iPhone 6s
"fee4cf319a242eab4701543e4c16db89c722731f" // Eddy's iPad Pro
],
keywords: ["keyword1", "keyword2"], // add keywords for ad targeting
onOpened: () => console.log("Ad opened"),
onClicked: () => console.log("Ad clicked"),
onLeftApplication: () => console.log("Ad left application")
}).then(
function () {
console.log("AdMob banner showing");
},
function (errorMessage) {
dialogs.alert({
title: "AdMob error",
message: errorMessage,
okButtonText: "Hmmkay"
});
}
);
First we are getting screen size and then doing calculations with SMART_BANNER logic
Import this platform
const platform = require("platform")
Height divided by scale
const screenHeightDp =platform.screen.mainScreen.heightPixels / platform.screen.mainScreen.scale;
Doing calculations as smart banner works
const BannerHeight = screenHeightDp > 720 ? 90 : screenHeightDp > 400 ? 50 : 32;
This is our banner height
console.log(BannerHeight);
Related
Is it possible on page mount (useEffect) setting the window scroll top position without the scroll effect?
right now in nextjs i have pages which behaves like SPA, am persisting the scroll position of each page in react Context. below is my useEffect in all the pages.
useEffect(() => {
window.scrollTo({ top: scrollPosition[page].current.scrollPos, behavior: 'auto' });
const handleScrollPos = () => {
scrollPosition[page].current.scrollPos = window.scrollY;
};
window.addEventListener('scroll', handleScrollPos);
return () => {
window.removeEventListener('scroll', handleScrollPos);
};
}, []);
the problem is, if am in page Home with top value 400, switch to page about
the page about should start from 0 but right now its scrolling from 400 to 0 in about page
PS: somehow this implementation is working without scroll behavoiur in safari, just in chrome this is happening
I used the youtube-api code I found and embedded it in a WordPress site. Essentially, it should autoplay an embedded Youtube video set to loop, that is muted and have CC. When I test it, it works except for the looping part. When I open the website on a different browser, nothing shows. I tried the one as well but it does not let me mute the video. Help?!
<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'ofVRwYmc9WA', // YouTube Video ID
width: 600, // Player width (in px)
height: 316, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 1, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 1, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0 // Hide video controls when playing
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
// Written by #labnol
</script>
So, I finally found someone to help me with this. We are using Powerpack for BeaverBuilder on WordPress.
You just need to add this code to the functions.php file of your current theme's folder:
add_filter( 'pp_video_embed_url', function($embed_url) {
if ( false !== strpos( $embed_url, 'youtube' ) ) {
$embed_url .= '&cc_load_policy=1';
}
return $embed_url;
});
I'm using the following code to open the WordPress media uploader in my plugin. The code works fine and returns the selected image.
/* media*/
var mediaUploader;
$('#upload_image_button').click(function(e) {
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Select Image',
button: {
text: 'Select Image'
}, multiple: false });
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#background_image').val(attachment.url);
console.log(attachment.sizes);
});
mediaUploader.open();
});
However when I look at the console - the custom image sizes (height and width) in the attachment.sizes are wrong, but the image, e.g. An image of 1024 x 1024 reports as 580x580 - but the filename clearly shows 1024x1024.
Any ideas on why this would be the case?
edit:
Here is an image of all of the Image sizes in WordPress including 1 from the theme and one I added as a test.
As you can see the thumbnail , medium and full sizes are correct but large and the 2 added (using add_image_size( 'imagetest', 1200, 630, true ); // Hard Crop Mode) Are incorrect.
Thanks in advance.
I'm using OverlayTrigger, Tooltip from react-bootstrap, and want to change tooltip position depending on viewport. I use a default placement right for now, but when I test it on iPhone X (375px), it's not working, I suppose because of not enough space to render. How to do this to automatically update on a small screen?
For LONGTextLon does not work:
const CustomTooltip = ({ placement = 'right', text = null }) => {
return (
<OverlayTrigger
placement={placement}
popperConfig={{
modifiers: {
// preventOverflow: {
// enabled: true
// // priority: ['top', 'right'],
// // boundariesElement: 'viewport'
// }
}
}}
overlay={
<Tooltip>
<div className="tc-text">{text}</div>
</Tooltip>
}
>
<Icon/>
</OverlayTrigger>
);
};
Current state: does not change position automativcaly when not enouph space
Expected: flip or change position to 'bottom' depends on viewport or space
Try the event resize.
window.addEventListener('resize', () => {
// Check for the size of the window and re render
});
H,I am using the KendoUI window and I am getting an issue as i have to open 3 Pop up window that contains divs as a Content in it but of different heights.if I select first one say of height 100px and close it and open the second window of height say 200px,it remains at 100px and hence hiding the content of the second popup window and when i resize the window and close it and when again open it,it remains at the previous dimension that i had resized it.
Why this is happening,not getting any clue on this.Please help me.
if (AccountType == "Bank") {
//alert("Return View For Bank")
$.ajax({
type: 'POST',
url: "Popup_Account_Update",
data: {AccountID:AccountID},
success: function (response) {
$('#Update_Window').empty();
$('#Update_Window').html(response);
$popup = $("#Update_Window");
var wnd = $popup.kendoWindow({
//content: Main.rootUrl("Home/Customer/" + customer.attributes[1].value),
actions: ["Close"],
modal: true,
//title: customer.attributes[2].value,
visible: false,
width: '500px',
height: '200px',
scrollable: false,
//deactivate: function () { wnd.destroy(); }
}).data('kendoWindow').center();
wnd.open();
var tmp = $("#Update_Window").data("kendoWindow");
tmp.title("Bank Account Edit");
}
});
}
if (AccountType == "Cash") {
//alert("Return View For Bank")
$.ajax({
type: 'POST',
url: "Popup_Account_Update",
data: { AccountID: AccountID },
success: function (response) {
$('#Update_Window').empty();
$('#Update_Window').html(response);
$popup = $("#Update_Window");
var wnd1 = $popup.kendoWindow({
//content: Main.rootUrl("Home/Customer/" + customer.attributes[1].value),
actions: ["Close"],
modal: true,
//title: customer.attributes[2].value,
visible: false,
width: '500px',
height: '360px',
scrollable: false,
//deactivate: function () { wnd1.destroy(); }
}).data('kendoWindow').center().open();
//wnd1.open();
var tmp = $("#Update_Window").data("kendoWindow");
tmp.title("Cash Account Edit");
}
});
}
<div id="Update_Window" style="display:none;"></div>
As you said: you close it, you did not destroy. Closing a window means hiding it but it is still there with the same content and attributes.
You should not use $('#Update_Window').empty(); since this releases the DOM but not the Kendo Window so it will cause a memory leak. Instead of that, use: destroy.
$('#Update_Window').data("kendoWindow").destroy();
Anyway, my recommendation is not creating and destroying windows since this has some impact in performance, you should try to reuse it.