I'm working with desktop notifications everything works fine here is the code I'm using:
function notifyMe(title,icon,body,tag) {
var notification = new Notification(title, {
icon: icon,
body: body,
tag: tag
});
setTimeout(function(){
notification.close();
},6000);
}
Now what I want is how I can close the notification without showing a notification for example if a notification is appearing , how can I close it from another function or something like that. because I want to work with pagevisibility when tab is hidden it will show notification and when tab is visible I want to hide the notification.
Related
I am creating an online exam platform, so I don't want the user to navigate and close the browser. I have used an onblur event and visibility api. Both have limitations.
For example, onblur triggers even when the window is open and the user clicks on empty space in toolbar of the computer. The visibility api only works if the browser window is minimized. It's not applicable if it is overlapped by another window.
$(window).blur(function() {
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
alert('blur');
} else {
console.log("Browser tab is visible")
}
});
})
I have the following JS code that helps signing out a session from an ASPX page so a 'log out' record can be stored in a database. The code works when the site is opened with IE11, EDGE, and Chrome. Using those three browsers the user gets the popup asking if staying on the site or leaving the site. When it comes to be tested in Firefox, at least version 54, it just does not work. Nothings pops up.
Code is:
//We want to capture when a user logs out from the system - this is a way to force the browser to log out the session
window.onbeforeunload = closingCode;
function closingCode() {
// when user clicks the 'X' from the browser, will be prompted to leave or to stay
//clicking any of the options will trigger an event that will capture when the session was logged out and saved in the db
var button = document.getElementById('btnLogout');
button.click();
return "You are closing or refreshing this site. Clicking 'Stay on this page' will log out your session. Clicking 'Leave this page' will close your window.";
//return null;
}
//this will prevent the popup to appear everytime user navigates between pages/links
$(document).ready(function () {
$('a[rel!=ext]').click(function () {
window.onbeforeunload = null;
});
$('form').submit(function () {
window.onbeforeunload = null;
});
});
I have included desktop notification in my project. Along with notification an icon should be displayed. My code seems to be correct.But the icon is not displayed in the notification.
if i am adding the complete URL like 'www.site.com/image/not.png' it may display in chrome , but not in firefox .
Here is the code
var options = {
body: 'Test Notification',
icon: "not.png",
dir : "ltr"
};
How can I get the icon to display properly within the notification?
I have created an extension successfully and I am using an alert in extension.js to show the final message to the user when he clicks on the context menu but I want a customized popup window dialog box created using js and html instead of javascript alert.
Please help how can I do that. My extension works for the links on the webpages . when right button is clicked it shows the context menu and when clicked it throws the alert but I want to show a nice popup for the message.
The key is understanding the scopes in which your code is running. The context menu runs in the background scope and does not have direct access to the DOM of the active page. Hence, to implement a solution you must pass information from the background scope to the extension's page scope, and in that scope create the custom popup OR use Crossrider's notification plugin.
The following example demonstrates the implementation using the notification plugin:
extension.js:
appAPI.ready(function($) {
// Handler to receive messages
appAPI.message.addListener(function(msg) {
if (msg.type === 'show-notification')
showNotification(msg.notification);
});
function showNotification(data) {
// You can replace the notifier with your own custom code
appAPI.notifier.show({
'name':'my-notification-name',
'title':data.title,
'body':data.body,
'link':'http://example.com',
'theme':'default',
'position':'top-right',
'close':true,
'sticky':false,
'width':'400px',
'closeWhenClicked':true
});
}
});
Important: Do not forget to add the notification plugin to the extension.
background.js:
appAPI.ready(function($) {
appAPI.contextMenu.add(
"CustomMI",
"Custom menu item",
function (data) {
// Send message to active tab when context menu item selected
appAPI.message.toActiveTab({
type: 'show-notification',
notification: {
title: 'Context Menu Item',
body: '<b>Veiwing page</b>: '+data.pageUrl
}
});
}, ["all"]
);
});
[Disclosure: I am a Crossrider employee]
http://developer.chrome.com/extensions/notifications.html
I need to close the notification window after X seconds only if user's mouse is not over the notification window being displayed.
var notification = webkitNotifications.createNotification(
'icon.png',
'Notification titile',
'Notification body text'
);
notification.show();
// TODO: Close notification window only if user's mouse is not over it
setTimeout(function() { notification.cancel() }, 10000);
I haven't touched Chrome extensions for a while but the last time I did, you could use a HTML file as content for the notification.
So what I'd do is:
If you can close the notification with JavaScript inside the notification, then just use the normal onmouseover/onmouseout to store in a boolean if the mouse is on the notification or not and launch the time out from within the notification as soon as it gets loaded.
If you can't do the same thing but have the notification talk to the background page to make it close the notification.