How to catch "Pause" or restart "event" using phonegap build? - javascript

Hi I am making a JQM and PhoneGap app. I would like to catch events like "pause","restart" or resume. Do you know how to do this? I read docs, but there are no clues how to do it in javascript code for phonegap build.
Thanks.

In the documentation for the events, they give a full example as well as a short example, which I'll reproduce here:
document.addEventListener("pause", onPause, false);
function onPause() {
// Handle the pause event
}
Just like in normal JavaScript, you can attach to events using the addEventListener method on any node. In the case of PhoneGap, their device events are triggered on the document object.
If I understand you correctly and JQM means jQuery Mobile: In jQuery, it's possible to add handlers for arbitrary events by using:
$(document).on('pause', onPause);
(This uses the jQuery 1.7 syntax, but I believe that's a requirement for jQuery Mobile).

Related

Can I use jQuery .trigger() with event listeners added with addEventListener()?

In my (javascript, jQuery) code, I use two ways of firing events
jQuery('body').trigger('crazy-trigger-event');
jQuery("body").get(0).dispatchEvent(new CustomEvent("crazy-dispatch-event"));
In the snippet here:
http://jsfiddle.net/jts9jhbt/3/
I have registered for custom events using both jQuery .on() and the DOM .addEventListener() methods.
Then I fire the events using both jQuery .trigger() and DOM .dispatchEvent() methods.
It seems like the listeners registered using .on() receive events fired both ways.
But the listeners registered with .addEventListener() only receive events fired using .dispatchEvent().
My use case is that I have a mix of legacy code and jQuery code, and it seems like it's safest to use .dispatchEvent() so that it's compatible with both.
So is there some change to the code I can make so that listeners registered with .addEventListener() can recieve events from .trigger() ?
Simple Answer
No, you can't.
Explanation
The main reason is that jQuery needs to work across multiple browsers and ...
"[...] jQuery's event system is a layer on top of the DOM event system."
Eventhough there are exceptions, there is no efficient way for jQuery to know which events are supported by the browser currently due to the lack of a getEventListeners method.
The developers think that the creation of a solution
"[...] isn't possible to do without breaking existing code or causing performance issues."
If that sounds like a challenge to anybody, you are free to prove them wrong by posting your solution.
The detailed explanation can be found in Dave Methvin's answers to jQuery's issue #2476.

typeahead.js iOS Safari vs Standalone Web App Differences

I understand that typeahead.js does not support mobile yet.
Even though it works in mobile browsers (mobile Safari), does anyone have an idea as to why it might not work once the form is viewed through a 'standalone' version of the web page?
The problem that is occurring is that when I try to 'click/touch' the suggestion dropdown, it does not fill the input with that entry in the standalone version, where as the safari version does work.
Is this type of behavior documented anywhere or known for iOS?
Thanks.
Addition: I added a jquery delegated click listener to .tt-suggestion to show an alert, which works in mobile safari, but not in the standalone version (I think the delegation event is not attaching).
$(document).on('click', '.tt-suggestion', function(e) {
alert('clicked');
});
I realized I was also using the FastClick library, which messes up the delay between dropdowns and the selected option.
To work around it, bind a dom mutation listener and add the needsclick class to each <p> class under each <div class="tt-suggestion">:
$('.tt-dropdown-menu').bind('DOMNodeInserted', function(e) {
$(e.target).find('.tt-suggestion').children('p').addClass('needsclick');
});
You might also be able to try using a listener:
$('input.typeahead').change(function(e) {
$(this).closest('.tt-dropdown-menu').find('.tt-suggestion').children('p').addClass('needsclick');
});
Or using an event delegator:
$('.tt-dropdown-menu').click(function(e) {
$(e.target).children('p').addClass('needsclick');
});
Note: functions are untested, they are based off memory.

Is there a Javascript "tap" event library that uses event delegation?

Ideally I can do $(document.body).on("tap", "#myElement", this.eventHandler);
But jQuery hasn't done that yet.
I see so many libraries -- https://github.com/bebraw/jswiki/wiki/Touch. There's a long list on that page.
They all seem to use old fashioned event listening. Such as, $("#element").touchLibraryThingy(); $("#element").bind("tap"). Equivalent to addEventListener.
That's great for an ID (Sorta), but when I have 50 list items that all have events on them, I don't want someone on an old Android to have 50 event listeners. For performance reasons!
Does anyone know of a library that uses event delegation that is finished?
This stackoverflow question is similar but doesn't come to truth -- Extend jQuery's .on() to work with mobile touch events
Looks like the blob mentioned in the post Extend jQuery's .on() to work with mobile touch events actually does the trick... almost.
Link to library! https://github.com/jvduf/jquery-mobile-events/blob/master/jquery.mobile.events.js
The gotcha
"tap" on desktop doesn't prevent default it seems. I had odd scrolling behavior and choppy menu animation in my web app.
To fix this I created a global property inside my app's namespace:
var R = window.R = window.R || {};
R.touchEvent = ('ontouchstart' in window') ? "tap" : "click";
window.$body = $(document.body);
Then all my event listeners do this:
$body.on(R.touchEvent, ".myHellaLongListItems", this.eventHandler);
Done! Now we all can have a really nice mobile website.
Better yet, now with jQuery Mobile custom builder, you can only select their mobile events and get the latest touch code, which has improvements over the example above.
http://jquerymobile.com/download-builder/

Javascript / Jquery Problem with - playStateChange , Mediaplayer object IE9 ... trying to make Jquery bind() work on this event ...Read On

Ok now the problem is here ....
I first was trying to rule out whether to use a flash player an html5 player or a mediaplayer for this client ..... HTML5 seems to be offering implementation which is plugin free so i decided to opt out on Flash .... and was considering the HTML5 route ... all fine ... did a nice player which was also cross browser and took good care of the codecs but oops ... realised html5 was not able to stream ASX ... so it was back to the old windows mediaplayer route .... I had no real choice....
I put a javascript function which is just an alert and should be triggered whenever the mediaplayer changes state (say from play you pause it .... )
function WMP_status()
{
alert("state Changed");
}
I embedded a mediaplayer object on an html page and i created an alias in javascript to access that object programatically and gain control over it via javascript ......Like so ....
var WMP=document.getElementById("mediaplayer");
Then it was the turn of capturing the state of the mediaplayer ... so I required some form of event ... so I registered the event like so ....and worked fine...
WMP.attachEvent("playStateChange", WMP_status);
// Note ... WMP.detachEvent("playStateChange", WMP_status); ... doesn't always detach events...
I that in IE the problem of events not detaching still persisted (go figure) but to my surprise I realised that as of ie9 .... the addEventListener should have been also included as part of the javascript support so i tried the following line which should apparently stand for the above but no joy .....
WMP.addEventListener("playStateChange", WMP_status , false);
I maybe thought that addEventListener was not still properly implemented in IE9 so I tried to use the JQuery bind() method like so .... but still no joy ....
$(WMP).bind("playStateChange", WMP_status);
I tried also these 2 variants
(a) still no joy ....
$(WMP).bind("playStateChange", "WMP_status");
(b) still no joy .....
$(WMP).bind("playStateChange", function(){WMP_status()});
I tried these to eliminate all sorts of possibilities ... there was no info on the jquery site whether i could put in a function name or not ... so i tried putting in an anonymous one as well....
Anyways ... I'd really prefer to use the Jquery mechanism for event handling especially because of it's much more cross browser ... can anyone please help me on this one? I also went this route of dynamically attaching events because I will be adding / removing elements via jquery ... and remove() would also detach events conveniently ...
Many Thanks
Al
According to this site binding to wmp-plugin with a javascript library like jQuery won't work because of the missing on prefix (would read "onPlayStateChange") which is normally prefixing all event-names.
Libraries like jQuery take that rule in account ... and actually register to an non-existent event.
If that is true then you need to stay with attachEvent

Is there a built in way to make custom events in JavaScript natively?

I was playing around with JavaScript a little while ago, and it irritated me that I couldn't create my own event.
I've seen Framework's with this built in (jQuery, MooTools, Prototype. Dojo doesn't which is weird because it seems to do everything and your laundry) and I actually built my own system for creating and firing custom events.
It just feels like there should be a native way to do it. Does anyone know how to do this/if you even can?
var dragEvent = document.createEvent("Event");
dragEvent.initEvent("dragged", true, true);
el.dispatchEvent(dragEvent);
For official specs, see DOM Level 2 Events. See also createEvent(), initEvent() / initMouseEvent() / initUIEvent(), and dispatchEvent() at MDC.
I use this technique to create custom drag and resize events for communication on this sample page.

Categories

Resources