I have a notifications setup which perodically retrieves notifications from a database via an AJAX call.
If notifications are new, then I want to add a jQuery UI "highlight" effect to the notification containing element.
There are lots of these for different notification types.
as the notifications are loaded in, the elements containing the notification data is giving a new class "flashAlert" where required. The function below is then triggered.
function startAlert() { // this function makes alerts flash
setInterval(function () {
$('.flashAlert').effect("highlight", {}, 2500);
}, 2500);
};
This works, however, if the class "flashAlert" is removed from the element (done by a 'clear notifications' function), the effect is still applied.
I know that I could call clearInterval in my "clear notifications" function, but then I have to set up a separate Interval function for every notification rather than a single function like this.
I've seen other questions on here with users finding difficulties having the effect working on elements which are added by jQuery, but nothing about removing the effect!
Doing a page reload clears it, but that's not what I want!
function startAlert(){
$('.flashAlert').effect("highlight", {}, 2500, startAlert);
}
And when you want it to stop in your clear notifications, simply do:
$('.flashAlert').removeClass("flashalert").stop();
Related
I have a requirement where I want to perform an action inside the electron app only when it is in foreground.
It is an electron-react application. On mounting of a component, I want to schedule a periodic task which only runs when the app is in focus or is being used by the user. And pause the task when the app goes in background.
How can we detect the Electron app being in foreground?
You can use the isFocused method from BrowserWindow. To get your own BrowserWindow, you can do this :
remote.BrowserWindow.getAllWindows();
This will return all your app's windows. So to get the first / primary window, you could deconstruct the array like this :
const [yourBrowserWindow] = remote.BrowserWindow.getAllWindows();
console.log(yourBrowserWindow.isFocused());
You can use the focus / blur events on your BrowserWindow to be notified when the app is focused / unfocused.
mainWindow = new BrowserWindow({})
mainWindow.on('focus', () => {
console.log('window got focus')
})
mainWindow.on('blur', () => {
console.log('window blur')
})
You may want to update the component's state within these event handlers or use any other method to keep track of the current focus status.
This assumes that you have a single application window. If you have multiple, you'll need to extend the check to cover all of your windows.
In a page's domready event I'm setting an event listener for a button that sets a Background Sync event in a page on my website (when offline), but even if the service worker has been loaded already on previous page visits, this line of code never resolves the promise, its status stays "Pending" indefinitely.
navigator.serviceWorker.ready.then(function (sw) {
$('#elt').on('click', function () {
sw.sync.register('contact-form-submission');
Since I know the sync event won't need to be set until after a form is completed, I tried wrapping this code in a setTimeout() of 3 seconds, which worked! My question is why this might be, I haven't been able to find anyone else indicating the .ready event wouldn't be available when the page is first loaded. Insight appreciated.
so I'm working on an application that uses webview to display data. At the moment i'm trying to get data from, and send data to the webview. It seems that getting data from the webview works fine, but sending data back to the webview forms the problem.
I use fireEvents and Eventlisteners to communicat. It looks somethhing like this:
webview : index.html
// declared at the beginning of the html file
Ti.App.addEventListener('sendToWebview', function(data) {
alert('alert in webview');
});
// fires when button is pushed
function onClick(){
Ti.App.fireEvent('sendToTi', { "someDataToTi" });
}
app.js
Ti.App.addEventListener('sendToTi', function(data) {
alert('alert in Ti');
Ti.App.fireEvent('sendToWebview', { "someDataToWebview" });
});
What works is the sendToTi event. here i always get the alert. What doesn't seem to work all the time is the sendToWebview event. The weird thing is that is sometimes seem to work, other times not and even when I go back to the code that worked, it seems to not work anymore.
What am I doing wrong? is there a way to make it work?
Your 'sendToTi' is correct. But you can't send events to the WebView in that way.
To execute JavaScript (which is sending events) in your WebView you can use
webview.evalJS('someJSFunction(with, parameters, for, instance);');
webview.evalJS('alert("Hello World!");');
There is no need of EventListeners (especially no app-wide event listeners).
I have a literal JS object that create and plays my playlist.
In the HTML page I have a list with all my tracks.
When I click on some track all works fine but when I click in one track and wait the end of track, the next track not play.
this is the part of my code:
playSound : function(track){
console.log("Play this song");
DG_PLAYER.TrackPlaying = track;
soundManager.destroySound('MySoundID');
DG_PLAYER.Sound = soundManager.createSound({
id:'MySoundID',
url:track.sound,
autoLoad: true,
autoPlay: true,
onload: function() { console.log('sound loaded!', this); },
onfinish: function(){
console.log('end song');
var nextSong = DG_PLAYER.getNextSong();
DG_PLAYER.playSound(nextSong);
},
onfailure : function(){console.log('some error')},
whileloading : function(){console.log('i m loading');},
whileplaying : function(){console.log('i m playing');}
});
},
If I change the line on onfinish event like this :
setTimeOut(function(){DG_PLAYER.playSound(nextSong);},2000) it works fine.
Some one can help me ?
One other things, when the first song finish and call Play for next Song the track is not loaded (no message back from onload event).
Thanks, and sorry for my bad English.
A.
OK ,
I try to add "flashVersion: 9" on setup and this fix the problem but on IE 8 I have un action script message now.
From SoundManager2's Revision History:
Flash Player 11.6.602.171, released by Adobe on 02/26/2013, introduced an issue with SM2's default Flash 8 (flashVersion: 8) API-based JS/Flash interaction, where SM2 methods called from callbacks such as onfinish() would not work. This primarily broke methods used for playing sounds in sequence, serially loading a series of sounds and so on. (See discussion for more.)
Note that this does not affect cases where soundManager.setup({ flashVersion: 9}) is being used; however, SM2 does use flashVersion: 8 by default.
Specifically, Flash-initiated events (such as a sound finishing) make Flash -> JS calls to the SM2 API, which subsequently call user-specified event handlers. If the user-specified SM2 onfinish() handler immediately calls a SM2 method like play() that makes a JS -> Flash call, this call either silently fails or is blocked. Other JS + Flash libraries that use similar callback patterns may also be affected, if their SWF is built targeting the Flash 8 API.
Suspecting a timing or recursion/stack issue, it was found that introducing a setTimeout(callback, 0) to user-specified SM2 callbacks like onfinish() restored sequential/playlist functionality.
Flash Player 11.6.602.180, relased by Adobe on 3/12/2013, exhibits the same behaviour. To avoid additional hacks, SM2 applies this to all Flash 8-based API callbacks regardless of what version of Flash Player is installed. No regressions are anticipated as a result of this change.
Alternately, this issue can be avoided by using soundManager.setup({ flashVersion: 9 }) as the Flash 9-based API does not appear to have this problem.
I'm trying to to write a javascript app that use the [SoundManager 2][1] api and aim to run in
all desktop and mobile browsers. On the iPad platform, Soundmanager is using the HTML5 audio api since there is on flash support. Now, when I'm trying to play two audio files back to back, both loaded in response to a click event, a [HTML5::stalled][2] event is occasionally raised. How do I set an event handler to catch the stalled event?
Since sound objects in my app are created on the fly and I don't know how to access directly to tags that are created by SoundManager, I tried to use a delegate to handle the stalled event:
document.delegate('audio', 'stalled', function (event) {...});
It doesn't work. the event did not raised in respond to stalled. (I had an alert in my handler).
Also tried to use [Sound::onsuspend()][3] to listen for stalled, but onsuspend pops out
on the end of sound::play(). How can we distinguish between stalled and other events that may raise the audio::suspend? Is there any other way to access the tags that SoundManager must create in order to play HTML audio?
I solved it with the following solution. This is not documented and found by reverse engineering.
It is all about accessing the html audio object, which is availalbe under _a.
currentSound = soundManager.createSound({..});
currentSound._a.addEventListener('stalled', function() {
if (!self.currentSound) return;
var audio = this;
audio.load();
audio.play();
});
The body of the method is based on this post about html5 stalled callback in safari
I can suggest a different "fix" I use with an html5 using platform (samsung smart TV):
var mySound = soundManager.createSound({..});
mySound.load();
setTimeout(function() {
if (mySound.readyState == 1) {
// this object is probably stalled
}
}, 1500);
This works since in html5, unlike flash, the 'readystate' property jumps from '0' to '3' almost instantanously, skipping '1'. ('cause if the track started buffering it's playable...).
Hope this works for you as well.