document.addEventListener("deviceready", function () {
document.addEventListener("backbutton", function() {
alert("hello");
});
});
it's working
but
var element = $("#score-screen")[0];
element.addEventListener("deviceready", function() {
element.addEventListener("backbutton", function() {
alert("hello");
});
});
score-screen is div id
it's not working..
help me.. please
I think that device ready and BackButton be fired only on the document.
Phonegap documentation: http://docs.phonegap.com/en/2.3.0/cordova_events_events.md.html#deviceready
This is a very important event that every Cordova application should
use.
Cordova consists of two code bases: native and JavaScript. While the
native code is loading, a custom loading image is displayed. However,
JavaScript is only loaded once the DOM loads. This means your web
application could, potentially, call a Cordova JavaScript function
before it is loaded.
The Cordova deviceready event fires once Cordova has fully loaded.
After the device has fired, you can safely make calls to Cordova
function.
Typically, you will want to attach an event listener with
document.addEventListener once the HTML document's DOM has loaded.
This event behaves differently from others in that any event handler
registered after the event has been fired will have its callback
function called immediately.
Related
I have noticed a strange issue that when using Googles recaptcha, the jQuery $(window).on("load", function (e) { event wont fire ($(document).ready(function () { or window.addEventListener('load', function () { won't fire as well). When I reload the page using F5 it works as intendet.
I noticed that a recaptcha network request is cancelled, see the attached image. When I reload the page the request doesn't fail.
I found a workaround:
When I load the recaptcha js via ajax (see below), the event handlers fire on the initial page load.
$.getScript( "https://www.google.com/recaptcha/api.js");
I have an iframe that content is somehow loaded with ajax, not with content Location. This is WordPress customizer preview iframe. It's something like jquery mobile, the page in iframe flashes and new content is loaded. That said, I can't use load and unload events for this iframe, and I have to bind a click event listener to its contents.
So I came up with an idea to emulate load event. I will add javascript to the page that is loaded in an iframe and it executes iframe parent function when document is ready, the function then can bind the event listener to the new iframe contents.
But how can I unbind it, so I don't get any memory leaks? I tried adding an event listener on unload in the loaded page, but strangely, the unload event runs after the next page is already loaded, so the contents which have an event listener are already gone.
So basically there's no way I can off() the iframe contents before they disappear from the DOM. I have to off() them when they are gone, how can I do that?
Edit:
I think I got it solved. Just store the contents in a variable. It seems like memory is not leaking anymore.
var iframeContents;
this.iframeLoadEmulation = function () {
if (typeof iframeContents !=='undefined') {
console.log('unbinding old content');
iframeContents.off();
iframeContents=null;
}
iframeContents=$('#customize-preview').find('iframe').contents();
iframeContents.on('click', function(){ console.log('click'); });
}
Did I get that right? Is it a good code or is there a better way to do it?
I want to fire a event just when my chrome extension starts. How do I achieve this? Is there a event listener that triggers when extension starts?
for example:-
chrome.runtime.onInstalled.addListener(function(){
console.log('i will run once!');
});
Similar to this but not on installed but on start and it should only fire once during the extension's run time which is when it starts.
You could use an onload event in your background page and put the code that you want to be executed on extension "start-up" in there.
Example (inside background.js):
window.onload = function() {
console.log("Extension has started...");
};
That message will be logged (once) when:
Extension is installed
Chrome is started (and extension is enabled)
Extension is enabled from disabled state
Do you mean "onStartup" event?
chrome.runtime.onStartup.addListener(function callback)
See Google documentation here
Just place any code to background.js and it will execute when extension starts
console.log("extension starts");
I need to run some JQuery code after the page completes loading but although it's working on desktop browsers it's not firing the event on Safari Mobile.
This is the code:
$(window).load(function() {
//Alert('event was fired');
});
I'm also using JQuery Mobile ... don't know if it has something to do with the problem.
This script will only fire on the initial page load, as all subsequent page transitions are AJAX based and will not fire a document ready or window load event.
The closest match, given your requirements is the pagechange event, provided by JQM. This fires after page has been loaded into the DOM and the transition animation has completed.
$(document).live('pagechange',function(){
//your logic
});
Just a simple question, for the jQuery event. Are the .load(), .ready() and .unload() run in order when the DOM is loaded? The answer seems yes when I see the jQuery Documentation.
<script type="text/javascript">
$(window).load(function () {
// run code
initializeCode();
});
$(document).ready(function() {
//run code that MUST be after initialize
});
$(window).unload(function() {
Cleanup();
});
</script>
However, the code inside the .ready() is execute before the initializeCode(); is execute, so I feel really strange. And now I have to place my code inside the .onload() method and just after the initializeCode(); line, which means to be inside the .ready() block.
Could someone explain me more about this, as I am new to jQuery?
NOTE: .load() & .unload() have been deprecated
$(window).load();
Will execute after the page along with all its contents are done loading. This means that all images, CSS (and content defined by CSS like custom fonts and images), scripts, etc. are all loaded. This happens event fires when your browser's "Stop" -icon becomes gray, so to speak. This is very useful to detect when the document along with all its contents are loaded.
$(document).ready();
This on the other hand will fire as soon as the web browser is capable of running your JavaScript, which happens after the parser is done with the DOM. This is useful if you want to execute JavaScript as soon as possible.
$(window).unload();
This event will be fired when you are navigating off the page. That could be Refresh/F5, pressing the previous page button, navigating to another website or closing the entire tab/window.
To sum up, ready() will be fired before load(), and unload() will be the last to be fired.
window load will wait for all resources to be loaded.
document ready waits for the document to be initialized.
unload well, waits till the document is being unloaded.
the order is: document ready, window load, ... ... ... ... window unload.
always use document ready unless you need to wait for your images to load.
shorthand for document ready:
$(function(){
// yay!
});
If both "document.ready" variants are used they will both fire, in the order of appearance
$(function(){
alert('shorthand document.ready');
});
//try changing places
$(document).ready(function(){
alert('document.ready');
});
Also, I noticed one more difference between .load and .ready. I am opening a child window and I am performing some work when child window opens. .load is called only first time when I open the window and if I don't close the window then .load will not be called again. however, .ready is called every time irrespective of close the child window or not.