Hi Paul,
I think I know what the problem is that's causing the audio control bar to appear when i tap the results of a search, it does not appear when I tap existing app content.
I have a jQuery function that executes on document ready and this deals with all taps in the app. Now when I run the search function this copy/ pastes the selected elements in the app to the search page and as these search results weren't there on document ready no click handler is assigned to them and so a tap causes the app to use the web engine. Sound reasonable?
I've been digging around on SO and found several similar problems (assigning a click handler to dynamic html) which said I should use .on() and assign the click event to the body tag - or any parent element, there were several examples shown. I have tried, along with a friend who's much better at js than me, and we haven't been able to get it to work yet, but I think/ hope we're on the right track.
Below is the doc ready function as it currently exists, if you could suggest how I should implement .on () I'd really appreciate some guidance on this, here's a link to one of the recommended solutions on SO http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements?rq=1 . I should add that when I tried the audio control bar appeared on all taps so clearly i did something wrong...again. Thanks for any assistance you can provide. ~Tony
The code below also resets the background color, checks for a tap or swipe and also checks for a double tap.
jQuery(function($){
var highlight = 'yellow', origcolor = 'transparent', curSnd = null,
istouch = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch);
function playstop(e){
e.preventDefault();
var $this = $(this);
if(curSnd && curSnd.sound){
if(this === curSnd.tag){
curSnd.sound.stop();
return;
}
curSnd.sound.stop();
}
$this.stop(true, true).css({backgroundColor: highlight});
var filename = this.href.substring(this.href.lastIndexOf('/')), myMedia = new Media(
this.href,
function() {
myMedia && myMedia.release();
curSnd = myMedia = null;
$this.stop(true, true).animate({backgroundColor: origcolor}, 500);
},
function(e) {
myMedia && myMedia.release();
curSnd = myMedia = null;
$this.stop(true, true).animate({backgroundColor: origcolor}, 500);
window.console && console.log ("Audio play error - " + filename + "\ncode: " + e.code + "\nmessage: " + e.message);
}
);
curSnd = {tag: this, sound: myMedia};
curSnd.sound.play();
} // End playstop
$('.spanish').click(function(e){e.preventDefault();}).each(function(i, snd){
//$('body').on('click', '.spanish', function(i){
if(istouch){
var $snd = $(snd);
//var $snd = $(i.currentTarget);
snd.addEventListener('touchstart', function(e){$snd.data({tstart: new Date().getTime(), tx: e.pageX, ty: e.pageY});}, false);
//i.currentTarget.addEventListener('touchstart', function(e){$snd.data({tstart: new Date().getTime(), tx: e.pageX, ty: e.pageY});}, false);
//i.currentTarget.addEventListener('touchend', function(e){
snd.addEventListener('touchend', function(e){
var ds = $snd.data('tstart');
if(!ds){return;}
var vx = Math.abs(e.pageX - $snd.data('tx')), vy = Math.abs(e.pageY - $snd.data('ty'));
if(vx < 20 && vy < 20 && new Date().getTime() - ds < 400){
//playstop.apply(i.currentTarget, );
playstop.apply(snd, );
$snd.data({tstart: null, tx: null, ty: null});
}
}, false);
}
});
});
