Alert user to navigate less in browser window - javascript

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")
}
});
})

Related

Open minimised chrome extension window on notification click

How to focus on minimised chrome extension window when chrome notification click
This is my current code. It is not getting click event
chrome.notifications.onClicked.addListener(function(notifId) {
console.log('inside notification click listener', notifId);
chrome.windows.update(winId, { focused: true });
});
I want send notification in chrome extension. when i click the notification it should focus to the chrome extension window
You can use the chrome.windows.getCurrent method to get the ID of the current window, and then use that ID in the chrome.windows.update method to focus the window. Try this
chrome.notifications.onClicked.addListener(function(notifId) {
console.log('inside notification click listener', notifId);
chrome.windows.getCurrent({}, function(window) {
chrome.windows.update(window.id, {focused: true});
});});
This code first gets the current window using chrome.windows.getCurrent, and then updates the focused property of the window to true in the chrome.windows.update method.

How to prevent popup from showing up again once user has dismissed it?

I have a modal that triggers different on mobile vs. desktop. Mobile's popup is triggered by an inactive mouse for more than 10 seconds, and desktop's popup is triggered by the mouse leaving the page (mouseleave). However when I dismiss the modal on both devices, it reappears after the user does the triggered action again. How do I get the popup to only pop up once and not display again once the user dismisses it?
Here is my code:
Dismiss popup by adding class "hidden" on the modal, called #abandon-cart-message:
//Dismiss popup
function dismissModal() {
const dismissSelectors = [
"#abandon-cart-message .evg-btn-dismissal",
"#abandon-cart-message .button-cta",
];
Evergage.cashDom(dismissSelectors.join(",")).on("click", () => {
const dismissPopup = document.querySelector("#abandon-cart-message");
dismissPopup.classList.add("hidden");
});
}
Display popup function for inactive users, used for mobile
//display popup for inactive users
const inactiveUserMessage = () => {
//code for displaying the popup is tool specific so not showing code
console.log("popup displayed");
return dismissModal();
};
Display popup function for users when their mouse leaves the page, used for desktop
function exitUserMessage() {
//code for displaying the popup is tool specific so not showing code
console.log("popup displayed");
return dismissModal();
}
Trigger the actual popup
// Trigger popup for mobile
if (width <= 480) {
document.addEventListener("mousemove", debounce(inactiveUserMessage, 10000), timer);
} else {
// Trigger popup for desktop
document.addEventListener("mouseleave", (e) => {
return exitUserMessage();
});
}
Debounce function, stored as a module from another file and pulled in:
export function debounce(func, timeout, timer) {
return (...args) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(this, args);
}, timeout);
};
}
Any ideas?
I tried to trigger a popup on mobile and desktop with both being triggered by different actions. However they are both reappearing after the user performs the same actions but I only want it to show one time once - if the user dismisses the popup it doesn't show again.
For JavaScript, you can use two ways two ways, Local Storage and Session Storage.
Local Storage
localStorage store during sessions (after closing the browser the data remains)
To use it:
// Get value
const userDismissed = localStorage.get('dismissed');
// Check if is already dismissed
if( userDismissed && userDismissed === 'yes' ){
// Don't trigger
}
And to your dismiss function, define the localStorage
localStorage.setItem('dismissed', 'yes');
In case you need to reset the values
localStorage.clear(); // Remove all
localStorage.removeItem('dismissed'); // Remove just one item
Session Storage
sessionStorage stores during the session is active (it resets when browser is closed)
To use it, it works same way than localStorage above, just use sessionStorage instead.

How can I check if browser tab is active and visible?

I am making website with contests and I want to check, if user's tab in browser is active and visible. For example, if person hides browser window or switches tab with my website, the tab won't be active and I need to know it. Can i do this or something like this?
I know about Firefox visibility API, but it checks only visibility. So, if there are two windows on the screen and one of them is browser window with website, website is visible. But other window can be active and my website will be visible, but not active. It It isn't something that I want
try:
document.addEventListener("visibilitychange", function() {
console.log( document.hidden );
});
window.addEventListener('focus', function() {
console.log("window is active!" );
});
window.addEventListener('blur', function() {
console.warn("window is not active!" );
});
Ok, it seems that I need to use document.hasFocus() (docs) js function. It returns false if tab isn't visible or other window is active, else it returns true

Storage event not triggering on iphone browsers(chrome and safari) until tab is focused

Using ReactJS. creating 2 components to explain the issue.
Sample code:
chrome browser window 1: https://localhost:5000/home
componentDidMount(){
function callme(){
if (event.key == "1000") {
console.log("triggerred from another window");
}
}
window.addEventListener("storage", callme, false);
}
chrome browser window 2: https://localhost:5000/pay
componentDidMount(){
localStorage.setItem("1000","hello");
localStorage.removeItem("1000");
}
problem statement:
1) open chrome browser on iPhone and open first URL(https://localhost:5000/home)
2) open a new window and open second URL(https://localhost:5000/pay)
when the second URL componentDidMount() will update localStorage and storage event on the first window should trigger, which is working in all the browsers on desktop but on mobile browsers.
It only triggers if I focus the window 1 then only the storage event is triggering. Whereas I want the storage event to trigger without focusing the second window.
According to MSDN, storage event always triggers whenever there is an update to the localStorage(same origin)
note: This problem will happen on mobile browsers only.

onscroll() to open a new tab without pop-up alert

I need to open a new tab when a user is scrolling in my website.
The problem is, as far as i understand, that in order for a new tab to open automatically without a pop-up warning from the browsers, the user must first trigger an event in the DOM but apparently onscroll() does not count as one.
Is there a way for me to trigger an even when a user is scrolling in my website that will allow me to open a new tab without the pop-up alert from the browser?
This is currently my code:
window.onscroll = function(ev) {
if(clicked === 1) {
return false;
}
clicked = 1;
var win = window.open('<?php echo $redirect ?>', '_blank');
win.focus();
};
That is native browser functionality and its a good one.
Just imagine if every site could pollute your browser with a number of tabs.
For it to work the user has to accept and allow popups from your domain

Categories