In Chrome, things work OK (multiple notifications display at the same time). But in Firefox when there are multiple notifications NONE get displayed. Please see fiddle for a demo:
http://jsfiddle.net/e6ps2/3/
Scenario: I have a loop that reads through an array of things to be displayed as notifications.
I started off using Notify.js a nice javascript wrapper to the notifications api. And I thought the problem may be related to that. Then I tried using the api directly and the problem persisted.
So I would like to layer the notifications on top of each other if possible (which is how it should happen - and does happen in Chrome). But a possible fallback is to queue the notifications and using notify.js notifyClose() callback function to open the next notification in the queue - but have no idea how to do this.
if (Notify.isSupported()) {
//Notify wrapper Notifications
if (Notify.needsPermission()) Notify.requestPermission();
//var j = 1; //uncomment this for single notification
var j = 2;
for (var i=0;i<j;i++) {
var my_notification = new Notify('Hello World ' + i, {
body: 'Some message here ' + i,
tag: "notify_" + i
});
//uncomment below to show the notify plugin html5 notifications and then comment out the bare bones one
//my_notification.show();
//HTML5 bare nones Notifications
var notification = new Notification("Hi there! " + i, {
body: 'Some message here ' + i,
tag: "Hello_"+ i
});
}
} else {alert("not supported"); }
Hope this all makes sense.
Thanks
For first issue... If permission hasn't been given, you need to give a callback to fire when requesting permission. Moving the send code into a function, allow it to be called standalone, or as the callback
if (Notify.needsPermission()) {
Notify.requestPermission(queueNotifications);
} else {
queueNotifications();
}
Regarding the queueing... I've had a similar issue and Firefox's implementation is poor compared to Chromes. Nevertheless, notifications can be queued using the following method:
create timeinterval variable
using the Notification onshow event, set a timeout with the interval to hide the notification
move the sending of the notification into a separate function that can be called by a timeout inside of the for loop
if (Notify.isSupported()) {
var
showTimeout,
displayTime = 5000,
queueNotifications = function(){
var i,
j = 3;
for (i=0;i<j;i++) {
setTimeout(sendNotifications, displayTime*i, i);
}
},
sendNotifications = function(i){
var
hideTimeout,
onShow = function(){
var $this = this;
hideTimeout = setTimeout(function(){
$this.close();
}, displayTime);
},
my_notification = new Notify('Hello World ' + i, {
body: 'Some message here ' + i,
tag: "notify_" + i
});
my_notification.onShowNotification = onShow;
my_notification.show();
}
if (Notify.needsPermission()) {
Notify.requestPermission(queueNotifications);
} else {
queueNotifications();
}
I've updated your jsfiddle with the working version.
http://jsfiddle.net/e6ps2/5/
Cheers,
Dan
If you set the option 'requireInteraction: true' it will stack your notifications for you, they will not disappear automatically as default but you can use the following to hide them.
setTimeout(notification.close.bind(notification), 5000);
Related
I want to display dynamic information (score) in the window tab of a javascript games running in a browser (chrome) : my goal is to run several instances of the game in different tabs, running in parallel, and to be able to see the current scores in the tab titles. I tried :
document.title = score
... but it works only in the selected tab, the other one are not refreshed until selected (although the games are running well in background).
==> is there a way to force the update of the tab titles... even if not selected ?
I found couple of same questions on the http://stackoverflow.com but they did not work for me.
You can find your solution here: http://www.raymondcamden.com/2010/10/19/Using-JavaScript-to-update-the-browser-window-title-when-the-user-is-away
So, basically that kind of code will work:
var focused = true;
var baseTitle = "";
var chatsMissed = 0;
//I'm the fake function that represents some process. We randomly determine if a new chat happened
function fakeStuff() {
if(Math.random() > 0.5) {
if(!focused) {
chatsMissed++;
window.document.title = baseTitle + " ("+chatsMissed+")";
}
}
}
$(document).ready(function() {
//store the base title
baseTitle = window.document.title;
//When the window is focused...
$(window).focus(function() {
focused = true;
// window.document.title = baseTitle;
//chrome bug: http://heyman.info/2010/oct/7/google-chrome-bug-when-setting-document-title/
setTimeout(function() {
document.title = baseTitle;
}, 100);
chatsMissed = 0;
});
//When the window is blurred...
$(window).blur(function() {
focused = false;
});
//setup a process
window.setInterval('fakeStuff()',2000);
})
Unfortunately JSfiddle do not support title changing. But I tested, and it works.
I have a div
<div id='cards'>
Which I want to fill with images based on some logic. But only when images are first loaded into memory. Otherwise, through onerror I wanna fill in some text..
function pasteCard(card, to){
if (typeof(card) == 'string')
card = [card];
var image = [];
for (var i = 0; i < card.length; i++) {
image[i] = new Image();
image[i].src = '/sprites/open/' + card[i] + '.png';
image[i].onload = function() {
pasteImage(to, image[i]);
}
image[i].onerror = function() {
pasteText(to, card[i]);
}
// alert(card[i]) #1
}
function pasteImage(to, image) {
to.append(image);
}
function pasteText(to, text) {
// alert(card[i]) #2
to.append(text);
}
}
pasteCard(['ABC123', 'DEF456', 'GHI789'], $('#cards'));
But this isn't working.
Problem/weirdness: If only #2 alert is active it returns nothing. But strangely if #1 alert is also active it does kinda work... (but still doesn't load my images, and mostly fails too when other code is involved)
Question: Why is it not working without #1 alert (at least in that jsfiddle)
suggestions?: what should I do?
Onload and onerror events are fired (executed) outside the scope of your function so your variables will be undefined. In the event method you have access to this which is the image object. You can set a data attribute to each image and access that in your error event.
Here is an example:
http://jsfiddle.net/7CfEu/4/
The callbacks are not in the same scope as your image array is - therefor you need to declare a variable then will "connect the scopes" and use it inside the callbacks
also the i variable probably changes until the callback is fired - so by using it inside the callback you will get undefined behavior
for (var i = 0; i < card.length; i++) {
var current_card = card[i];
var current_image = new Image();
current_image.onload = function() {
pasteImage(to, current_image);
}
current_image.onerror = function() {
pasteText(to, current_card);
}
current_image.src = '/sprites/open/' + current_card + '.png';
image[i] = current_image;
}
Fiddle: http://jsfiddle.net/7CfEu/6/
(Also - closing the div tag is never a bad idea)
Just in case anyone ends up here for same reason I did.
Was going crazy because onload and onerror were not firing in the page I was building. Tried copy pasting
var myimage = new Image();
myimage.onload = function() { alert("Success"); };
myimage.onerror = function() { alert("Fail"); };
myimage.src = "mog.gif" //Doesn't exist.
Which was working within codepen and random otherwise blank pages.
Turns out the problem I was having was that I was doing AJAX requests earlier in the page. This involved authorization which in turn involved a call to
setRequestHeader();
This was resulting in a net::ERR_FILE_NOT_FOUND error instead of the expected GET mog.gif 404 (Not Found)
This seemed to prevent proper triggering of events.
Revert with
xhr.setRequestHeader("Authorization", "");
I am using IE in a mobile browser. I add a javascript function to a button that when the User clicks it says 'hello'.
This works.
I then add a timer.
On a desktop browser it works.
it does not work on my mobile browser.
This is my code. (note I Had just tried placing an alert('hi'); in the swapImages() and that did not work either.
var div = document.getElementById('divImage');
var imgCached = document.getElementById('imgCached');
document.execCommand("BackgroundImageCache", false, true);
function OnImgLoaded() {
img1.src = imgCached.src;
}
var interval = 30;
var _timer;
var _index = 0;
function test() {
_timer = setInterval('swapImages()', interval);
}
function swapImages() {
imgCached.onload = OnImgLoaded();
imgCached.src = 'my server url~/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
_index = 0;
clearTimeout(_timer);
}
}
UPDATE!!
I had been runningit on Chrome desktop and not IE. I am mow testing it in IE desktop. I get the same erro so now I can debug.
The error is this line:
img1.src = imgCached.src;
It tells me:
Unable to get property 'src' of undefined or null reference
I have changed the code to:
var imgLive = document.getElementById('imgLive'); (I have renamed the img control)
function OnImgLoaded() {
imgLive.src = imgCached.src;
}
I get the same error.
I look in Source and the control is correctly named..
Thanks
i'm not sure that the following line is valid in your mobile phone:
imgCached.src = 'http://127.0.0.1/Cloud/test/' ...
the timer executes successfully, but the image doesn't get the proper src since the device doesn't run a web server on it (unless you configured one).
and to answer your topic question, yes- you can use javascript timers in mobile browsers just like desktop browsers.
hope that helped.
First of all: Do you ever call the test function, that starts the timer?
Second: Maybe it's really document.execCommand("BackgroundImageCache", false, true), that fails - it may not be enabled in the mobile version of IE that you are using. You can check if it's enabled using the queryCommandEnabled function, see more here: http://msdn.microsoft.com/en-us/library/ie/ms536676(v=vs.85).aspx
I have javascript that opens a list of URLs in their own windows. I can use window.open for each, but the problem is that sometimes, the browser doesn't always open the windows in the order I have asked them to be opened, especially when there is a large number of URLs. The URLs are not in my domain so I can't wait for an onLoad event from the child. Is there any way to determine if the child window is open before I open the next? As a last resort I guess I can create a wait time between each open, but that's more of a hack, slows everything down and while will probably make the correct order more likely, it won't guarantee it. For example:
<script type='text/javascript'>
var urls = new Array();
urls[0] = 'http://www.yahoo.com';
urls[1] = 'http://www.google.com';
urls[2] = 'http://www.facebook.com';
$(document).ready(function() {
for (i=0; i<urls.length; i++) {
window.open(urls[i]);
}
});
</script>
Okay, I figured it out. There is no way to see of a child window in a remote URL is open. That's true. However, if you open a file in your domain who's only job is to alert the parent that it's open, then redirect to the remote URL, that works. Something like this:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript'>
var urls = new Array();
urls[0] = 'http://www.yahoo.com';
urls[1] = 'http://www.google.com';
urls[2] = 'http://www.facebook.com';
urls[3] = 'http://www.linkedin.com';
urls[4] = 'http://www.twitter.com';
$(document).ready(function() {
var interval = null;
function doNext(i) {
if (i < urls.length) {
// console.log("Doing: " + i);
childWin = window.open('tst2.jsp?i=' + i + '&url=' + urls[i]);
interval = setInterval(function() {waitForIt(i);}, 1000);
waitForIt(i);
}
}
function waitForIt(i) {
if (document.getElementById("urls" + i).checked == false) {
// console.log('wait for: ' + i);
} else {
clearInterval(interval);
if (i < urls.length) {
doNext(i+1);
}
}
}
doNext(0);
});
</script>
<input type="checkbox" id="urls0">http://www.yahoo.com<br>
<input type="checkbox" id="urls1">http://www.google.com<br>
<input type="checkbox" id="urls2">http://www.facebook.com<br>
<input type="checkbox" id="urls3">http://www.linkedin.com<br>
<input type="checkbox" id="urls4">http://www.twitter.com<br>
then, in tst2.jsp, something like this:
<script>
opener.document.getElementById("urls" + <%=request.getParameter("i")%>).checked = true;
// console.log("Set variable");
window.location = '<%= request.getParameter("url") %>';
</script>
Also, one note, the number of windows you can open depends on the browser. Firefox can be configured to anything. It looks like Chrome is limited to 20. I'm not sure about IE.
You are probably limited in the number of windows you can open, they are probably being reused after a number of calls.
open() is supposed to be a blocking call, so it always waits until the browser has at least opened a new window before moving on to the next one.
You may try adding a random parameter as the second parameter to open to try to keep the browser from reusing windows if they were assigned default names.
// No guarantee that the name generated is unique, but if that's your only problem
// you should be OK
window.open(urls[i], "name" + new Date() + Math.random() );
I'm trying to make a link tracking script. It should work like Google Analytics only it should make posts to our own server. I'm using jQuery for this. The code i have written so far is the following:
jQuery(document).ready(function() {
var opts;
jQuery.fn.trackAllLinks = function(settings) {
settings = jQuery.extend({}, jQuery.fn.trackAllLinks.defaults, settings);
opts = settings;
function track() {
href = jQuery(this).attr('href');
var trackImage = new Image(1, 1);
trackImage.src = opts.linkredirector + '?eurl=' + jQuery.URLEncode(href) + '&rnd=' + new Date().getTime() + '&title=trackerimage.gif';
trackImage.onload = function() {
trackImage.onload = null;
doNothing();
}
delay(300);
return true;
};
function delay(mseconds) {
var currentTime = new Date();
var endTime = currentTime.getTime() + mseconds;
while (currentTime.getTime() < endTime) {
currentTime = new Date();
}
}
function doNothing() {
}
if(jQuery(this).is("a")) {
jQuery(this).click(track);
}
jQuery(this).find("a").click(track);
};
jQuery.fn.trackAllLinks.defaults = {
linkredirector : '__url_to_post_on__'
};
});
It works fine in all browsers except Safari. When i'm using a mailto link or an anchor it works but when i'm linking to another page it doesn't work. I have been testing a lot of different implementations and i can't get it to work. Any of you have an idea what i'm missing? I have tried to understand how Google Analytics works and as far as i can see it does the same. When i use WireShark to monitor my network i see that the image of Google is being requested but that my image isn't.
greets,
Daan
This is random, but you might try adding a randomized parameter in the query string (both the name & value), like:
Math.random(0, 1000) + '=' + Math.random(0, 1000)
I've had to do that in the past to get Safari to register a dynamically loaded resource.
(I see you have &rnd= already, but maybe try randomizing the name, too?)