Develop Reference

React js detect page reload

Using React.js, how I can check if the whole page was reloaded?
if (window.performance) {
console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
console.info("This page is reloaded");
} else {
console.info("This page is not reloaded");
}
The code above doesn't help, triggers every time I change the component or call any api on the same page.

try this
onUnload(event) {
alert('page Refreshed')
}
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
}

Admob plugin dosen't work with Phonegap app

I hope you can help me with this problem. I have tried EVERYTHING the last 5 days, but I fail every time.
I have buildt a simple app using HTML5, CSS and little bit of Javascript.The app works fine.Than I want a simple banner ad that shows at the bottom of the app.I just can't get it to work. Sometimes a black box shows up at the bottom, that's all, but not ad. I'm not very good with Javascript so the problem is maby with the code, but I've copied most of it from plugin exemple.
Source: https://www.npmjs.com/package/phonegap-admob
I'm using:
- Phonegap 6.1.2 (Build Service)
- admob-phonegap plugin(<plugin name="phonegap-admob" spec="4.2.1" />)
- Other plugins that work fine.
What I need:
- Only a small banner ad at the bottom of the page.
Platform:
- Only Andriod
In my config.xml I have this line:
<plugin name="phonegap-admob" spec="4.2.1" />
In my index.html inside the <script></script> tags, I have this code:
<script>
var isAppForeground = true;
function initAds() {
if (admob) {
var adPublisherIds = {
android : {
banner : "ca-app-pub-1467389904102750/404191XXXX",
}
};
var admobid = (/(android)/i.test(navigator.userAgent)) ? adPublisherIds.android : adPublisherIds.ios;
admob.setOptions({
publisherId: admobid.banner,
interstitialAdId: admobid.interstitial,
});
registerAdEvents();
} else {
alert('AdMobAds plugin not ready');
}
}
function onAdLoaded(e) {
if (isAppForeground) {
if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
console.log("An interstitial has been loaded and autoshown. If you want to load the interstitial first and show it later, set 'autoShowInterstitial: false' in admob.setOptions() and call 'admob.showInterstitialAd();' here");
} else if (e.adType === admob.AD_TYPE_BANNER) {
console.log("New banner received");
}
}
}
function onPause() {
if (isAppForeground) {
admob.destroyBannerView();
isAppForeground = false;
}
}
function onResume() {
if (!isAppForeground) {
setTimeout(admob.createBannerView, 1);
setTimeout(admob.requestInterstitialAd, 1);
isAppForeground = true;
}
}
// optional, in case respond to events
function registerAdEvents() {
document.addEventListener(admob.events.onAdLoaded, onAdLoaded);
document.addEventListener(admob.events.onAdFailedToLoad, function (e) {});
document.addEventListener(admob.events.onAdOpened, function (e) {});
document.addEventListener(admob.events.onAdClosed, function (e) {});
document.addEventListener(admob.events.onAdLeftApplication, function (e) {});
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
}
function onDeviceReady() {
document.removeEventListener('deviceready', onDeviceReady, false);
initAds();
// display a banner at startup
admob.createBannerView();
}
document.addEventListener("deviceready", onDeviceReady, false);
</script>
I hope someone can help me. Thank you so much

Allright, the whole code was correct. The problem was just that I didn't link to Cordova in the Script tag. I read it somewhere that you didn't need it and Phonegap / Cordova would include it automatically. It was all that was needed. Do you want Admob to be displayed (and probably many other plugins), please include
<script type = "text / javascript" src = "cordova.js"> </script>.

How to get 2 images to match and stay revealed using jQuery

I'm making a memory game for my mini project and am trying to get 2 images to stay revealed if it's a match. However, the images aren't staying revealed although its a match. I'm trying to match the 2 images by their Id, but doesn't look like it's working. Please take a look at my code, any help would be greatly appreciated, thanks.
JS
$('.flip-container').click(function() {
$(this).find('.flipper').addClass('flip');
var $flip = $('.flip');
if ($flip.length === 2) {
setTimeout(flips, 800);
}
});
function flips() {
if (matching()) {
$('.flip').removeClass('flip').addClass('delete');
$('.delete').bind('.flip');
console.log('It\'s a match!');
} else {
$('.flip').removeClass('flip');
console.log('No matches');
}
}
function matching() {
if (flip.length === 2) {
if (flip[0].attr('id') === $(flip[1].attr('id')) {
$('.flip').addClass('matchFound');
$('.flip').removeClass('matchFound');
}
}
}
My GitHub link for this project

How to open a web page automatically in full screen mode

How do I open a web page automatically in full screen mode?
I am looking for a solution to open an web page automatically in full screen mode, without expecting user to users press F11 or any other browser-specifc key.
I've searched a lot, but I just could not find a solution.
Is there a script or library or browser specific API available to help me achieve this?

For Chrome via Chrome Fullscreen API
Note that for (Chrome) security reasons it cannot be called or executed automatically, there must be an interaction from the user first. (Such as button click, keydown/keypress etc.)
addEventListener("click", function() {
var
el = document.documentElement
, rfs =
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
;
rfs.call(el);
});
Javascript Fullscreen API as demo'd by David Walsh that seems to be a cross browser solution
// Find the right method, call on correct element
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element

Only works in IE:
window.open ("mapage.html","","fullscreen=yes");
window.open('','_parent','');
window.close();

It's better to try to simulate a webbrowser by yourself.You don't have to stick with Chrome or IE or else thing.
If you're using Python,you can try package pyQt4 which helps you to simulate a webbrowser.
By doing this,there will not be any security reasons and you can set the webbrowser to show in full screen mode automatically.

You can go fullscreen automatically by putting this code in:
var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen() }
demo: https://codepen.io/ConfidentCoding/pen/ewLyPX
note: does not always work for security reasons. but it works for me at least. does not work when inspecting and pasting the code.

view full size page large
(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
})();
<div class="container">
<section class="main-content">
<center><button id="view-fullscreen">view full size page large</button><center>
<script>(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
})();</script>
</section>
</div>
for view demo clcik here demo of click to open page in fullscreen

window.onload = function() {
var el = document.documentElement,
rfs = el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen;
rfs.call(el);
};

How to run jQuery only on non-mobile browser?

I'm using this jQuery for an (excellent) lightbox-like plugin called zoombox:
$('a.zoombox').zoombox({...});
It takes a links in the form http://vimeo.com/15171582, parses the vimeo id (15171582) and pops up a lightbox which loads an iframe with this URL:
http://player.vimeo.com/video/15171582?autoplay=1&title=0&byline=0&portrait=0&wmode=transparent
How can I modify the jQuery so that, when viewed on a mobile browser,
the lightbox doesn't launch, and
the simple link gets converted to the iframe link?

You can use this: http://detectmobilebrowsers.com/ to detect mobile devices.
Or detect window width like:
function isMobile() {
if(window.innerWidth <= 600) {
return true;
} else {
return false;
}
}
And make it responsive like:
// keep original url
$('a.zoombox').each(function() {
var url = $(this).attr('href');
$(this).data('url',url);
});
// on load
doMagic();
// resizing
$(window).resize(function() {
doMagic();
});
// lightbox?
function doMagic() {
$('a.zoombox').each(function() {
var url = $(this).data('url');
$(this).attr('href',url);
});
if (!isMobile) {
$('a.zoombox').zoombox({...}); // lightbox here
}
}
// detect mobile
function isMobile() {
if(window.innerWidth <= 600) {
return true;
} else {
return false;
}
}
NOT TESTED
edit: add doMagic call on load..