Which event is trigger when one window is hover on another window? - javascript

i have very strange requirement like there are two browser window .
i want to close second window when i dragged this window on first window.
first Is this possible ?
Second If yes then On which event ?
So i can do my desire work at that event.
Right now i have written this code
$(document).on('mouseover', function () {
console.log('done');
});
SO i can get this event when i dargged another window on first window but this event also not happening because at the drag time dragged window active, this window is not active.
Any help is appreciated.
Thanks

You have to check both windows' dimension and position. The snippet below will not work here as StackOverflow blocks pop up windows, so try it somewhere else.
var a;
var b;
function openA(){
a = window.open("","w1","width=250,height=150,top=0");
a.document.title = "A";
}
function openB(){
b = window.open("","w2","width=250,height=150,top=200,left=400");
b.document.title = "B";
}
setInterval(function(){
// If both window is not closed
if (a && !a.closed && b && !b.closed){
// If both window overlaps
if (
a.screenX + a.outerWidth > b.screenX &&
a.screenX < b.screenX + b.outerWidth &&
a.screenY + a.outerHeight > b.screenY &&
a.screenY < b.screenY + b.outerWidth
){
b.close();
}
}
},1000);
<button onclick="openA()">Open window A</button>
<button onclick="openB()">Open window B</button>

As you have not shared any code about child windows and as per comments i can suggest you this:
var cwin = window.open() creates a child window.
Now you can use to get the X position of your window.
You can use setInterval() to check the position of that window.
Then you can check if the X position is in between the width of parent window.
Here you can trigger $(cwin.parent.document).trigger('mouseover') close it by cwin.close();

Related

centering a feedback.js popup window [duplicate]

This question already has answers here:
Center a popup window on screen?
(19 answers)
Closed 5 years ago.
I found the following JavaScript code many years ago (between 8 and 10 years ago, I think) though I can't remember where or when. I use it to make popup windows with answers for a Jeopardy review game for my French students. I dabble a little bit but I don't know very much beyond the absolute basics about coding (I do know how to change the background color in this code and the window size, for example). I would like to have the popup window be centered in the middle of the page rather than opening in the upper left of the window.
I've seen code bits in response to other questions (Center a popup window on screen? for example) that look like they should make that happen but when I've tried adding them in different places to my existing code it always makes the feedback window no longer open. I don't know enough about coding to know what of that code I need or where to put it. I have tried pulling the VAR lines and adding them to the existing code but as I have said, it disables the popup window completely.
Can someone help me tell me if it is possible to modify this code to center the popup window in the middle of the page or if I should try to find a different code to make that happen?
Thank you for your help.
Shannon
Here is the code that I have:
function feedback(message) {
var browser = navigator.appName;
var browserVersion = navigator.appVersion;
if ((browser.indexOf ("Netscape") >= 0) || (browser.indexOf ("Explorer") >= 0)) {
// This function opens a new window with the message text.
// The window will disappear when it loses focus.
msgWindow=window.open('','msgWindow','toolbar=no,location=no,directories=no, status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no,width=210,height=180');
msgWindow.document.open();
msgWindow.focus();
msgWindow.document.write("<HEAD><TITLE>message</TITLE>");
msgWindow.document.write("</HEAD>");
msgWindow.document.write
("<BODY BGCOLOR='#FAE080' onblur='window.close()'>");
msgWindow.document.write
("<P><CENTER><FONT SIZE=+1><B>" + message + "</FONT></B></P></CENTER>");
msgWindow.document.write("</BODY>");
msgWindow.document.close();
} else { // Not Netscape or Internet Explorer
alert(message);
}
} // end of JavaScript Function feedback
It is not working here in code snippet but you can check this fiddle Check this
function myFunction() {
var pageURL="http://google.com";
var w = 500;
var h = 500;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
window.open("https://www.google.com",'','width=' + w +', height='+h +',top='+top+',left='+left);
}
<button onclick="myFunction()">Click Here</button>
Your modified Code Will be like this Check updated Fiddle
function feedback(message) {
var browser = navigator.appName;
var browserVersion = navigator.appVersion;
if ((browser.indexOf ("Netscape") >= 0) || (browser.indexOf ("Explorer") >= 0)) {
// This function opens a new window with the message text.
// The window will disappear when it loses focus.
var w = 210;
var h = 190;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var msgWindow=window.open("",'','width=' + w +', height='+h +',top='+top+',left='+left);
msgWindow.document.open();
msgWindow.focus();
msgWindow.document.write("<HEAD><TITLE>message</TITLE>");
msgWindow.document.write("</HEAD>");
msgWindow.document.write("<BODY BGCOLOR='#FAE080' onblur='window.close()'>");
msgWindow.document.write("<P><CENTER><FONT SIZE=+1><B>" + message + "</FONT></B></P></CENTER>");
msgWindow.document.write("</BODY>");
msgWindow.document.close();
} else { // Not Netscape or Internet Explorer
alert(message);
}
} // end of JavaScript Function feedback

node-webkit - moving second window to a second or specific screen

This post provided answer to move a main window to second screen. If an app has two windows. How do I move second window to second screen or a specific screen? Any help will be greatly appreciated. Thanks.
Found solution here https://github.com/RSATom/WebChimera/issues/105. Code for second window
var gui = require('nw.gui');
gui.Screen.Init();
win = gui.Window.get();
if (win.x < gui.Screen.screens[gui.Screen.screens.length -1].work_area.x) win.x = gui.Screen.screens[gui.Screen.screens.length -1].work_area.x + win.x;
var screenCB = {
onDisplayAdded : function(screen) {
win = gui.Window.get();
if (win.x < screen.work_area.x) win.x = screen.work_area.x + win.x;
}
};
gui.Screen.on('displayAdded', screenCB.onDisplayAdded);

Detect when a div is touching top jquery

I am trying to detect when a div is at the top of the page with Jquery/Javascript. Anyone any idea's where I might start?
You can listen to the scroll event using jQuery, and every time it changes, get the offset value of the div and compare it with 0.
I would use a function like this:
function elementAtViewportTop(elem) {
if(!elem || typeof elem !== "object") return false;
if(elem instanceof jQuery) elem = elem[0];
var elemClientRect = elem.getBoundingClientRect();
return (elemClientRect.top <= 0 && elemClientRect.top > -(elemClientRect.height));
}
elem.getBoundingClientRect().top will be zero if the element reaches the top of the window (getBoundingClientRect()).
When you add an event listener for scroll to the window and call that function every time on your element, it will work fine:
Demo

How to access content of a tab from firefox addon

In my addon I find the tab I want to operate and then try to access the elements of it.
Currently I am finding the tab I need by
var b = this.wm.getMostRecentWindow("navigator:browser");
// qqDPSWD This allows for correct window targeting.
var foundW = null;
var en = this.wm.getEnumerator("navigator:browser");
while (en.hasMoreElements()) {
var w = en.getNext();
if ((w.title && w.title.indexOf(parameters['title_identifier']) != -1) ||
(w.document && w.document.title.indexOf(parameters['title_identifier']) != -1))
{
var doc = w.document;
var temp2 = doc.getElementById("myframe");
foundW = temp2.contentWindow;
}
}
temp2 is null though the tab does have an iframe with id myframe.
I get the object doc as an XUL object but doc.getElementById("myframe") is null. Currently I have an html file opened in the desired tab with the desired iframe residing inside the html page loaded in the main tab. I am able to identify the tab properly but couldn't return the iframe window. How do I do it?
I tried looking at the documentation for browsing between the tabs but couldn't find right answer in https://developer.mozilla.org/en/docs/Working_with_windows_in_chrome_code
Node I am working on https://github.com/sebuilder/se-builder/blob/master/seleniumbuilder/components/command_processor.js#L10103 and want to replace
foundW = w;
with
foundW = w.document.getElementById("myframe").contentWindow
as unlike the open source project where he wants to return the tab window I want to return the iframe window present inside the tab he returns.
You aren't actually going through all tabs, you are just going through the FIREFOX windows (called CHROME windows) (not the browser and its window inside each tab).
In your code. var doc = w.document is the CHROME document of the FIREFOX window (not the browser inside the tab). So w.title of the FIREFOX window will be the title of the currently selected tab (probably followed by ' - Mozilla Fireox' can you verify this for me? im guessing here)
temp2 is null because your frame is in the BROWSER IN TAB window which is the HTML document. So if your tab is currently selected you would get it like this w.gBrowser.selectedTab.linkedBrowser.contentwindow this will be the html window. w.selectedTab is the actual tab element that you click at top, it has a property called linkedBrowser which holds the "HTML" browser which is inside this tab. (i put html
so to fix your code below:
var b = this.wm.getMostRecentWindow("navigator:browser");
// qqDPSWD This allows for correct window targeting.
var foundW = null;
var en = this.wm.getEnumerator("navigator:browser");
while (en.hasMoreElements()) {
var w = en.getNext();
if ((w.title && w.title.indexOf(parameters['title_identifier']) != -1) ||
(w.document && w.document.title.indexOf(parameters['title_identifier']) != -1))
{
var doc = w.gBrowser.selectedTab.linkedBrowser.contentDocument;
var temp2 = doc.getElementById("myframe");
foundW = doc.defaultView; //im not sure what you want foundW to be, the chrome window? or the tab html window? if you want html window or you can do doc.defaultView OR w.gBrowser.selectedTab.linkedBrowser.contentWindow BUT if you want the chrome window it would be w
}
}
HOWEVER your code has a problem, its not going through all tabs in each window, its only going through the currently selected tab.
This is how you would do it for each tab in each window, read the comments carefully, also i took out your ugly if statement lol it was making things sloppy. Just put it back i replaced with /*your if statement*/ for easyiness for me to make example below
var b = this.wm.getMostRecentWindow("navigator:browser");
// qqDPSWD This allows for correct window targeting.
var foundW = null;
var en = this.wm.getEnumerator("navigator:browser");
while (en.hasMoreElements()) {
var w = en.getNext();
//we know for sure that all your windows have gBrowser element because you are getting enumerator for 'navigator:browser', but its not necessary for it to have tabContainer, for example a pop up window with no tabs in it
if (w.gBrowser.tabContainer) {
for (var i = 0; i < w.gBrowser.tabContainer.childNodes.length; i++) { //this itereates through each tab element in the tab bar (so the thingies you click)
var tab = w.gBrowser.tabContainer.childNodes[i];
var tabBrowser = tab.linkedBrowser;
var tabDoc = tabBrowser.contentDocument;
var tabWin = tabDoc.defaultView; //OR you can do tabBrowser.contentWindow
if ( /*if statement here*/ ) {
var temp2 = tabDoc.getElementById("myframe");
foundW = tabWin; //im not sure what you want here so i set it to the html window
w.focus(); //if you want to focus this FIREFOX window which is chrome window do this:
w.gBrowser.selectedTab = tab[i]; //if you want to select this tab then do this
}
}
} else {
//it has no tabContainer so its like a popup window with no tabs so our browser elment is just gBrowser, ill use same var names as above to keep things straight for you
var tabBrowser = w.gBrowser;
var tabDoc = tabBrowser.contentDocument;
var tabWin = tabDoc.defaultView; //OR you can do tabBrowser.contentWindow
if ( /*if statement here*/ ) {
var temp2 = tabDoc.getElementById("myframe");
foundW = tabWin; //im not sure what you want here so i set it to the html window
w.focus(); //if you want to focus this FIREFOX window which is chrome window do this:
//w.gBrowser.selectedTab = tab[i]; //no tabs in this window so if you do w.focus() on line above it will focus this properly
}
}
}

Javascript: open & close new window on image's onMouseOver & onMouseOut, but only if new window onMouseOver = true

thank you all for helping me previously with my Javascripting problems. My current problem is that I need to open & close a new window on an image's onMouseOver & onMouseOut, respectively, but if the new window onMouseOver == true then I don't want the new window to close.
I am sure there is a simple solution, but I can't seem to figure out a way to cancel the image's onMouseOut="closeDetails();" if the user hovers over the New Window. Below is most of the code I am dealing with. Thanks in advance for your help.
<body>
<img name="img1" id="img1" onMouseOver="windowDelay(this);"
onMouseOut="closeDetails();" src="images/127.jpg" height="240" width="166"/>
</body>
<script language="JavaScript" type="text/javascript">
// This opens the movie details pop-up after an
// half second interval.
function windowDelay(thatImg)
{
winOpenTimer = window.setTimeout(function() {openDetails(thatImg);}, 2000);
}
// This is the function that will open the
// new window when the mouse is moved over the image
function openDetails(thatImg)
{
// This creates a new window and uses the hovered image name as the window
// name so that it can be used in the that window's javascript
newWindow = open("", thatImg.name,"width=400,height=500,left=410,top=210");
// open new document
newWindow.document.open();
// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
newWindow.document.write("<html><head><title>Movies</title>");
newWindow.document.write("<script src='myDetails.js' type='text/javascript'>");
newWindow.document.write("</script></head>");
newWindow.document.write("<body bgcolor='white' onload='popUpDetails();'>");
newWindow.document.write("... SOME OTHER HTML....");
newWindow.document.write("</body></html>");
// close the document
newWindow.document.close();
}
// This is the function that will call the
// closeWindow() after 2 seconds
// when the mouse is moved off the image.
function closeDetails()
{
winCloseTimer = window.setTimeout("closeWindow();", 2000);
}
// This function closes the pop-up window
// and turns off the Window Timers
function closeWindow()
{
// If popUpHover == true then I do not want
// the window to close
if(popUpHover == false)
{
clearInterval(winOpenTimer);
clearInterval(winCloseTimer);
newWindow.close();
}
}
function popUpDetails()
{
// This will be used to prevent the Details Window from closing
popUpHover = true;
// Below is some other javascript code...
}
</script>
I would recommend against using a new browser window for this task. Try something like this:
var popup = {
open = function () {
if (this.element == null) {
// create new div element to be our popup and store it in the popup object
this.element = document.createElement('div');
this.element.id = "myPopup";
// you don't need a full html document here. Just the stuff you were putting in the <body> tag before
this.element.innerHTML = "<your>html</here>";
// Some bare minimum styles to make this work as a popup. Would be better in a stylesheet
this.element.style = "position: absolute; top: 50px; right: 50px; width: 300px; height: 300px; background-color: #fff;";
}
// Add it to your <body> tag
document.body.appendChild(this.element);
// call whatever setup functions you were calling before
popUpDetails();
},
close = function () {
// get rid of the popup
document.body.removeChild(this.element);
// any other code you want
}
};
// The element you want to trigger the popup
var hoverOverMe = document.getElementById("hoverOverMe");
// set our popup open and close methods to the proper events
hoverOverMe.onmouseover = popup.open;
hoverOverMe.onmouseout = popup.close;
That should do it. It's much easier to control than a new browser window. You will want to tweak the CSS yourself.
EDIT:
Here are instructions to do this with an actual window. To reiterate, using an actual window is not the best way to accomplish this task. A stylized div tag to look like a window is better because it offers more control, as well as standardized functionality across browsers. However, if you must use a window, here it is:
// You can use many principles from the example above, but I'll give the quick version
var popup;
var hoverOverMe = document.getElementById("hoverOverMe");
hoverOverMe.onmouseover = function () {
popup = window.open("path_to_content", "popup");
};
hoverOverMe.onmouseout = function () {
popup.close();
};
It works, but not very well (IMHO). If the user has their settings such that new windows open in new tabs (as I do), then a tab will open up. Javascript has no control over that. In Firefox, the new tab will open and gain focus, at which point it immediately closes because hoverOverMe had its onmouseout event fired (which obviously closes the window). I imagine you'd have this same problem with an actual window, too.

Categories