About popup window move

[punithapary]

Hi,
In website i am having popup window.Whenever refreshiung the page popup window will come Its working now and i want to move that popup window based on the mouse movement can anyone give some sample code for this

thanks in advance

[Airshow]

Punithapary,

What type of "popup window" is it? A genuine browser window created with window.open() or an absolutely positioned HTML block element (typically div)?

To my best knowledge you can't do what you want with a browser window - the user must drag it by its title bar in the normal way.

An absolutely positioned div can be made to follow the mouse, but please first advise which type of popup you are using.

Airshow

[Atli]

Imagine how annoying it would be if websites could not only pop up windows, but have them chase the mouse around :S

[Airshow]

Good point Atli (Clement by any chance? :D ).

[itsjareds]

It is possible to move windows.

http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/moveToExample.htm

[Airshow]

Well spotted that man. If I ever knew, then I had certainly forgotten.

And now I find in my little reference book, further methods for resizing (I'm not saying what they are).

I tried them. And my first reaction ......... aaaaaaaaaaaaaagh!

In IE6 at least, it can get very confused. If you resize or move a maximised window, it thinks it's still maximised and won't always let you get hold of it by the title bar even though it may be half way down the page. Attempting to maximise an apparantly restored window can cause it to change position without resizing. And a window can be driven off screen! Nasty.

But fortunately :

• There's a minimum size beyond which a window cannot be resized (50x50 from a dim-distant memory).
• User can still Close with Alt-F4 or with right-click on the taskbar.

Conclusion - use rarely and responsibly.

Airshow

[itsjareds]

One major consequence of this is for users who have multiple tabs open and go across a site that plays with their windows. They are forced to end the program and lose tabs and login sessions.

[Airshow]

Ouch!!!!

I hadn't considered tabbed browsers. Do they have a setting "disallow window move/resize"? (I can't check without switching on a different computer) If not, then maybe they should.

Airshow

[itsjareds]

Nope, and the reason I know this is from experience, sadly :$

I was testing it on my own local file probably a year ago when I tried making the window go in a circle around the border of the monitor, and I couldn't stop it. Ended up closing my 10 tabs, a few of which I needed.

Experience comes from good judgment, and good judgment comes from bad judgment.

--

As far as there being a setting to disable it, nope.

[Airshow]

Nicely said.

I came close to crashing IE6 when I tested earlier, before I remembered the taskbar.

Airshow

[Atli]

Ok. I suggest somebody delete this thread before the word spreads!

Seriously tho, I'm going to have to look into this... if only to know how to prevent it.

I came close to crashing IE6 when I tested earlier[...]

What doesn't :twisted:

[itsjareds]

I still don't believe that a user should ever have to resort to closing their browser, even if they aren't using tabs.

Atli, tell us if you find anything about disabling it :D. I've been disabling JavaScript before I go to any "iffy" site for this reason.

[almostbob]

A guaranteed way to get blacklisted
popups are offensive
popups are a security risk
popups are blocked by default, by almost everyone
popups that follow the mouse are more offensive

learn about layers

[Atli]

Atli, tell us if you find anything about disabling it :D. I've been disabling JavaScript before I go to any "iffy" site for this reason.

Firefox with the NoScript addon.
Very handy if you don't trust the websites your visiting, or if you don't want to be bombarded with 20 HD flash adds on every page :-P

Actually, Firefox gives you the option to allow/disallow Moving or Resizing of Windows in the Advanced Javascript options.
So does Opera.

Chrome has very few options, none of the Javascript related (not even to disable it).
And of course IE doesn't have this option.

[itsjareds]

Actually, Firefox gives you the option to allow/disallow Moving or Resizing of Windows in the Advanced Javascript options.

Heh, I never noticed that button. Disabled now, and that long with unchecking "Disable Context Menus". I hate when sites don't let me right click.

[creativeweb]

onclick script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Page</title>
<style>
#popup{
font-family: Monaco;
font-size: 11pt;
width: 200px;
background-color: #E2EBED;
border: 1px dotted #000;
padding: 2px;
height: 100px;
position: absolute;
cursor: hand;
cursor: pointer;
display: none;
}
</style>
<script type="text/javascript">
<!--
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}  
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}  
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
return true
}
//-->

function movepop() {

}

function showpop() {
document.getElementById("popup").style.display = "inline";
document.getElementById("popup").style.left = 20 + tempX + "px";
document.getElementById("popup").style.top = 20 + tempY + "px";

document.getElementById('popup').onmouseover=movepop;
}

function hidepop() {
document.getElementById("popup").style.display = "none";
}
</script>
</head>
<body onmousedown="showpop()" onmouseup="hidepop()">
<div id="popup" onmouseover="movepop()" onmouseout="">
<h3>Menu</h3>
Testing.
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Page</title>
<style>
#popup{
font-family: Monaco;
font-size: 11pt;
width: 200px;
background-color: #E2EBED;
border: 1px dotted #000;
padding: 2px;
height: 100px;
position: absolute;
cursor: hand;
cursor: pointer;
display: none;
}
</style>
<script type="text/javascript">
<!--
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}  
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}  
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
return true
}
//-->

function movepop() {

}

function showpop() {
document.getElementById("popup").style.display = "inline";
document.getElementById("popup").style.left = 20 + tempX + "px";
document.getElementById("popup").style.top = 20 + tempY + "px";

document.getElementById('popup').onmouseover=movepop;
}

function hidepop() {
document.getElementById("popup").style.display = "none";
}
</script>
</head>
<body onmousedown="showpop()" onmouseup="hidepop()">
<div id="popup" <strong class="highlight">onmouseover</strong>="movepop()" onmouseout="">
<h3>Menu</h3>
Testing.
</div>
</body>
</html>