I was assigned a task to make a script which will generate a pop-up window when the mouse cursor goes over the current opened browser tab.
Something like this demo : http://demo.exitmonitor.com/ but here the pop-up appears always when the mouse leaves the top part of the web page.
I need to generate this window exactly when the mouse is over my current active browser tab.
Is it possible to do this with javascript?
I believe you need mouseleave event:
<script>
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window, "load", function (e) {
addEvent(document, "mouseleave", function (e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
//.... do_this
}
});
});
</script>
I assume by "tab" you mean the area highlighted in red:
In all modern browsers a website cannot access anything out of its window, except for APIs explicitly provided to it.
Therefore, there is not way for you to even access the tab bar with just JavaScript.
Whether or not there is at all a way to get access to the tab bar depends on the browser, but it will (most certainly) require a browser addon.
In Chrome, for example, this was not at all possible back in 2010 and it looks like nothing has changed there.
In Firefox however, an addon can actually do this.
Assuming you know how to attach a script to browser.xul, I'm leaving out install.rdf, chrome.manifest and overlay.xul, so here's only the relevant JavaScript:
(function()
{
// Wait for the browser to settle
top.addEventListener('load', function load(event)
{
// It only needs to do that once
top.removeEventListener('load', load);
// Get notified about every page that loads
top.gBrowser.addEventListener('DOMContentLoaded', function(event)
{
// Get the current tab
var tab = top.gBrowser.mCurrentTab;
// Check if we already annoyified it
if(tab.annoyingOrange === undefined)
{
// If not, let's do that!
tab.annoyingOrange = 'Plumpkin';
// Add a mouseover event to it
top.gBrowser.mCurrentTab.addEventListener('mouseover', function(ev)
{
// Since we do that to all tabs, we need to check here if we're still the selected tab
if(ev.target == top.gBrowser.mCurrentTab)
{
// And now we can get onto everybody's nerves!
alert('Hey apple!!!');
}
});
}
});
});
})();
Tested with Firefox 37.0.1 on Windows.
[ Download .xpi ] (Protip: Unzip for source)
But if your browser does not support it, you are out of luck and there is nothing you can do!
Anyway, this is a very bad thing to do and it annoys people to no end!
This should never, never ever be done in a production or even beta environment!
This works with modern jquery versions 1.8.1 + Popup will show when user clicks above the current window as if they were going to switch tabs or perform some other action. It only pops once so it's less intrusive and it's all customizable message wise and style.
html
<div id='confirm'>
<div class='message'></div>
<button class='yes'>OK</button>
</div>
css
#confirm {display:none; top:50%; left:50%; transform:translate(-50%, -50%); background:#595959; position:fixed; width:650px; height:auto; padding:40px; text-align:center; box-shadow:0px 0px 22px -2px rgba(0,0,0,0.5); z-index:1000;}
#confirm button {width:100%; height:70px; color:#fff; background:#595959; display:inline-block; border:1px solid #fff; text-align:center; font-size:12pt; letter-spacing:2px; margin-top:40px; bottom:10px; cursor:pointer; opacity:0.5; transition:0.9s;}
#confirm button:hover {opacity:1;}
#confirm .message {color:#fff;}
js
var mouseX = 0;
var mouseY = 0;
var popupCounter = 0;
document.addEventListener("mousemove", function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
});
$(document).mouseleave(function (msg, myYes) {
if (mouseY < 100) {
if (popupCounter < 1) {
msg = "There's something in your basket, are you sure you want to leave?";
var confirmBox = $("#confirm");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes").unbind().click(function() {
confirmBox.hide();
});
confirmBox.find(".yes").click(myYes);
confirmBox.show();
}
popupCounter ++;
}
});
Use MouseEvent.clientX and MouseEvent.clientY to track where the mouse is on the document, and then put the popup there using absolute positioning:
//The popup:
var span = document.createElement("span");
span.style.position = "absolute";
span.textContent = "I'm a popup!";
//When the page loads, the popup will be in the top-left corner
//because we can't know where the mouse is on the page load.
document.body.insertBefore(span, document.body.firstChild);
//The event:
document.addEventListener("mousemove", function(e) {
//Position the span according to its dimensions and where the mouse is.
span.style.marginLeft = e.clientX-span.clientWidth/2+"px";
span.style.marginTop = e.clientY-span.clientHeight/2+"px";
});