We Keep Coding

Setting the Top Icon in the Windows 10 Action Center from a Microsoft Edge Notification

I'm having trouble setting the top icon of a notification sent from a Web site in Microsoft Edge. For this scenario, this code is a good example:
Notification.requestPermission(function (permission)
{
if (permission == "granted")
{
new Notification("Test", {});
}
});
Please try executing this code from https://stackoverflow.com. You might be prompted to give permission, after which you should see this in your Windows 10 Action Center:
Notice the icon to the left of "stackoverflow.com." It's the favicon or at least an icon that looks just like it. But on other sites I operate, I can't reliably populate that icon.
For example, I operate https://mav3riq.tv. When I run the above code on that site, notice the icon in the Action Center is some kind of default blue icon even though the correct favicon is populated on the site's tab in Microsoft Edge:
Tab:
Notification:
Can someone tell me how to populate the top icon reliably? Thank you.

As per the documentation, This method was updated.
Below is the new syntax.
Notification.requestPermission().then(function(permission) { ... });
Example:
Notification.requestPermission().then(function(result) {
if (result === 'denied') {
console.log('Permission wasn\'t granted. Allow a retry.');
return;
}
if (result === 'default') {
console.log('The permission request was dismissed.');
return;
}
// Do something with the granted permission.
});
Reference:
Notification.requestPermission()
Using the Notifications API
I suggest you to use the new syntax and again try to make a test. It may help you to solve your issue.

I again try to make a test with your code and I find that I am able to set the top icon for most of the site for Action Center from Edge.
Below is my testing result.
But for that site it shows that blue icon.
I think that Action Center is fetching this icon from site and it is possible that some site are not available with this icons. So in that case it show the default blue icon.

How can I detect exit intent on a mobile browser?

I'm working on a solution to detect exit intent on safari mobile. (or any mobile browser for that matter)
On desktop I can track curser movement and when the user breaks the plane of the webpage I can initiate a pop up. See http://www.quicksprout.com/about/ as an example. Move your curser up to the back button on the browser and as soon as your curser breaks the webpage a pop up will appear. How can I solve this in a mobile environment?
Is there any way to detect when someone clicks the Safari address bar and before the favorites screen appears I can launch a pop up then?
Thank you in advance for the help.

I know this is over a year later, but maybe my answer might still help someone in the future.
On some of my sites, I found that mobile exit intent often consists of a slight upward scroll before the user hits their back button. For example, users often scroll down the page quite a bit while consuming content, but when they're ready to leave they might scroll upwards slightly (say 5-10% of the page height), and then they'll go hit the back button or close the tab.
I use that knowledge to pop up a newsletter sign up form on some of my content sites, and it actually works well without annoying the user. So if I ever detect that a user scrolled down at least 50% of my page, then back up by at least 5%, I hit them with a popup since I think they liked my content but are ready to exit the page. I wrote some simple Javascript that actually lets me detect such behavior at https://github.com/shahzam/DialogTriggerJS
Not sure if that's the exact answer you're looking for, but hope that helps a bit!

I just came back from a long trip around the web with the same goal in mind however as of now - you really are not able to detect if a user clicks on the address.
However I found out that you can look for patterns that users are making before they are ready to leave your website or abandon shopping cart. Here is show how we solved this and made mobile exit intent work on all mobile devices in case if the user quickly scrolls back up the page since that can be a sign that shows that the user has lost interest in our content and might want to leave.
Detecting if the user is on a mobile device.
This part is rather simple - we use Javascript to check if the event is "touchstart" and if so, we are adding a class to our body tag:
jQuery(document).on('touchstart', function(){
$(body).addClass('on-mobile-device');
});
Detecting the scroll direction, scroll speed and displaying Exit Intent popup:
function myScrollSpeedFunction(){
if( jQuery('body').hasClass('on-mobile-device') ){
if(my_scroll() < -200){
//Your code here to display Exit Intent popup
console.log('Must show mobile Exit Intent popup')
}
}
}
var my_scroll = (function(){ //Function that checks the speed of scrolling
var last_position, new_position, timer, delta, delay = 50;
function clear() {
last_position = null;
delta = 0;
}
clear();
return function(){
new_position = window.scrollY;
if ( last_position != null ){
delta = new_position - last_position;
}
last_position = new_position;
clearTimeout(timer);
timer = setTimeout(clear, delay);
return delta;
};
})();
jQuery(document).on('scroll', myScrollSpeedFunction );
This is basically it. This way you are not interrupting the user's flow since the user has already finished looking at the content and going up very quickly and we can present him with a message.
What we have done ourselves besides this code is to make sure our Exit Intent popup is displayed only in case if the user has got a product in his shopping cart since we are suggesting to save the users shopping cart and remind about his abandoned cart via email.
You can test it out on our product page here: https://www.cartbounty.com, just remember to add a product to the shopping cart before you test drive it on your mobile device.

At least on mobile safari, you're looking for the window.onpagehide function. This event will fire immediately after the page is hidden.
Here is a snippet showing this code in action:
<!DOCTYPE html>
<html>
<head>
<script> window.onpagehide = function(e) { alert("Don't go! I'm lonely!"); }</script>
</head>
<body>
</body>
</html>
Unfortunately, it looks like if you want an event to fire before the page is hidden, you're out of luck, because mobile Safari halts execution of everything on the page when the user clicks on the address bar. This means that you cannot, for example, monitor the page height to see if the user is typing on the keyboard (as they would be if they clicked the address bar).

Some simple code to detect exit intent on a mobile device.
It detects exit intent through the speed of the user's upwards scroll.
It delays 10 seconds before enabling. You probably should make it about 30 seconds if you only want to show your exit intent popup to people who are really interested in your content.
setTimeout(() => {
document.addEventListener("scroll", scrollSpeed);
}, 10000);
scrollSpeed = () => {
lastPosition = window.scrollY;
setTimeout(() => {
newPosition = window.scrollY;
}, 100);
currentSpeed = newPosition - lastPosition;
console.log(currentSpeed);
if (currentSpeed > 160) {
console.log("Exit intent popup triggered");
document.removeEventListener("scroll", scrollSpeed);
}
};

how to detect chrome camera access dialog is open

how i can detect google chrome camera access dialog open or not I can detect what user choose allow or deny but can't detect dialog is open or not I need show a little tip under it for that I need detect open it or not ... I open it by default but if user choose deny second time it's not open

I don't believe that there's actually a way to detect if the dialog is open, but you might be able to infer that it's open. Show your tip each time you call getUserMedia(), and hide it on the callback or any other user interaction with your page (assumption being they denied video access if they're doing other stuff on the page)...
$("#tooltip").show();
navigator.webkitGetUserMedia({"video":true}, function(stream) {
$("#tooltip").hide();
// Do your thing.
});
You could also put a delay on showing the tip so it's only shown if the video stream callback doesn't happen for a specified period of time:
var tipTimeout = setTimeout(function() {
$("#tooltip").show();
}, 1000);
navigator.webkitGetUserMedia({"video":true}, function(stream) {
clearTimeout(tipTimeout);
$("#tooltip").hide();
// Do your thing.
});
Hope this helps!

How can i prevent leaflet from dragging the map to fit marker popups?

currently we are working on a leaflet-project with gmaps and i´ve got a little problem .
After adding multiple markers (with a popup each) we want to open them all.
To do so, i´m using the following peace of code:
L.Map = L.Map.extend({
openPopup: function(popup) {
// this.closePopup();
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
On pageload everything works as expected.
But here comes the fail scenario:
After pageload the user zooms in and some markers are out of the “view area” of the user.
few seconds later, the website loads new position data (for the markers) using a rest interface.
After position data transmitted, i currently remove all markers and recreate them at the transmitted positions and open them.
And this marker.openPopup() triggers, that the map moves so, that the popup fits in the “view area” of the user.
How can i prevent leaflet to drag the map in this case?

I believe you are referring to the autoPan property? From the API: Set it to false if you don't want the map to do panning animation to fit the opened popup.
http://leafletjs.com/reference.html#popup
So when creating your Popup, just pass in the option autoPan: false

Ajax to make browser Load

1- OPEN FIREBUG, on the console tab
2- OPEN YOUR GMAIL ACCOUNT,
3- when gmail is loaded, click on one of your label (at the left under the draft box)
4- WITH FIREBUG YOU SEE THAT THE PAGE DOES NOT COMLETLY RELAOD SINCE ALL PREVIOUS ACTION STILL THERE FOR THE CURRENT DOCUMENT, BUT THE BROWSER COMPLETLY ACT LIKE THE PAGE HAVE BEEN RELOADED, stop button browser own loading effect, etc...)
5- !!!!! this is it..!!!!
Does some on have a clue on how site like Gmail can make the browser load on ajax call ( I mean show the loading icon and all, history, etc)
I already know what to check for the history navigation but how in the world they can make the browser to act like this was a simple link that load a complete new page.
from what I see with things like firebug Gmail basically retrieve mail information in JSON and than use some Javascript to render it to the user. But how they make the browser load in the while.
In gmail once it is loaded, obviously they ain't load all the data, from all your folder in background, so when you click on some of your folder and the data is not already loaded they make the browser 'load' like if it were loading a complete new page, while they retrieve the information from their server with some ajax call ( in Firefox you see the browser act like when you click on a normal link, loading icon, stop (x) button activated, and all).
Is it clear?
I came up with some 'ugly' code to achieve my goal that work quite nice in FireFox and IE (sadly it seems to not work in Chrome/WebKit and Opera).
I tell the browser to go to a url that it will not be able to reach before the ajax call end, with window.location=. The browser start to load and than when the ajax call sucess I call window.stop() (window.document.execCommand('Stop') for IE) than innerHTML the ajax data in the document
To me its look ugly and since it not work properly in Chrome/Webkit, this is apparently not the way to go.

There are many ways to utilize AJAX.
Gmail needs to load a lot of files/data before something meaningful can be displayed for the users.
E.g. showing the folder tree first doesn't make sense if it's not clickable or not ready for any interactive use.
Hence, what they do is show something lightweight like a loading graphic/progress bar while asynchronously (behind the scene), pull more data from the server until they can populate the page with a full interface for usage.
I don't know how to explain further. Maybe wiki can help: http://en.wikipedia.org/wiki/Ajax_%28programming%29

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
Use one of the methods shown as triggering a browser busy state in the table on the page above.

document.getElementById('iframe').src = "http://www.exemple.com/browser_load.html";

They are using iFrame. By changing the source of the iFrame.

Sitepoint has a book "Build Your Own AJAX Applications" and they show some content (all?) in this tutorial:
http://articles.sitepoint.com/article/build-your-own-ajax-web-apps
They will guide you with your AJAX coding.

Think this is your answer:
http://www.obviously.com/tech_tips/slow_load_technique
Looks like gmail and facebook method (browser is showing page as "loading" with loading icons etc. - it is just simulating, because there is a background ajax request) :)

$(function($){
$('a').attr('onclick','return false;').click(function(){
var title = $(this).attr('title');
var href = $(this).attr('href');
$('title').html(title);
$('#content').load(href+' #content', function(){
history.pushState(null, null, href);
}, function(responseText) {
var title = responseText.match(/<title>([^<]*)/)[1];
document.title = title;
});
});
});
window.onpopstate = function( e ) {
var returnLocation = history.location || document.location;
var returnTitle = history.propertyName || document.title;
$('title').html(returnLocation.title)
$('#content').load(returnLocation.href+ ' #content', function(){
history.pushState(null, null, href);
}, function(responseText) {
var title = responseText.match(/<title>([^<]*)/)[1];
document.title = title;
});
}