PDA

View Full Version : simple mouseover close popup page?



cobler
03-30-2007, 12:01 AM
I'd like to have a link in a popup page to close it on mouseover from a simple one line code without getting the MS "alert" : "do you want to close this page - Yes - No?"

The nearest to what I want is the very simple:

<a href=""onMouseover="parent.location='mywhatever.html'">

This works but 'returns' to a NEW page: 'mywhatever.html'
as a popup on top of the parent 'mywhatever.html' page with the original 'mywhatever.html' underneath!

Dont want that - got to then close that popup 'mywhatever.html' page.

Is there a like simple code to place as a link on the popup page to just close the popup but without the MS alert?


Thanks in advance for answers

jscheuer1
03-30-2007, 05:45 AM
Javascript cannot close a window that wasn't opened using javascript. There is a trick that gets around that but, it shouldn't be necessary. Just open your page with javascript and then you can easily close it with javascript:

open_closer.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<a href="closer.htm" onclick="window.open(this.href);return false;">open closer</a>
</body>
</html>

closer.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<a href="#" onmouseover="self.close();">Close</a>
</body>
</html>

cobler
03-30-2007, 10:56 PM
Many many thanks, John, for advice and codes - your close code works fine with the popup opening code: <a href="closer.htm" onclick="window.open(this.href);return false;">open closer</a>

Is there any chance of working in a 'mouseout' into this to close the popup without going to the popup? I've cobbled a code which does this but its a little bit longer than this short opening code you gave me for opening a popup.

So, sure, I could use that, but whereas your popup opening code can be repeated with different URLS for different popups, the code I've cobbled opens on 'mouseover' one named URL popup and then closes this same one named URL popup on 'mouseout'. The popup URL name is within the code and not merely in the link for opening the popup.

So I couldn't use it to have on the same page two links to two popups which could be opened on 'mouseover' and closed on 'mouseout' without going to the popups to do this.

Is there a short way out for this?

jscheuer1
03-31-2007, 08:06 AM
Can't do it unless you have a way to open the pop up onmouseover that will not trigger the pop up blocker.

cobler
04-01-2007, 01:35 AM
Thanks again John for answer and saving me time from trying to do the impossible.

But would you have interest and time to modify the following code to give popups which I can site by giving "from top" & "from left" values. I cant get through to author - after 'chasing' - her sites always end in my computer freezing up!! The code gives facility for any number of popups to be launched on mouseover and CLOSED on mouseout, but the popups are always centered or in a fixed position. And with the latter some dont show up and the center ones can be a problem with larger popups.

Any chance some entries could be changed to stop the centering and allow siting by "top" & "left" values?

The name is Smart Popups by Nannette Thacker - <!-- Web Site: http://www.shiningstar.net -->

the code is:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var version4 = (navigator.appVersion.charAt(0) == "4");
var popupHandle;
function closePopup() {
if(popupHandle != null && !popupHandle.closed) popupHandle.close();
}
function displayPopup(position,url,name,height,width,evnt) {
// position=1 POPUP: makes screen display up and/or left, down and/or right
// depending on where cursor falls and size of window to open
// position=2 CENTER: makes screen fall in center
var properties = "toolbar = 0, location = 0, height = " + height;
properties = properties + ", width=" + width;
var leftprop, topprop, screenX, screenY, cursorX, cursorY, padAmt;
if(navigator.appName == "Microsoft Internet Explorer") {
screenY = document.body.offsetHeight;
screenX = window.screen.availWidth;
}
else {
screenY = window.outerHeight
screenX = window.outerWidth
}
if(position == 1) { // if POPUP not CENTER
cursorX = evnt.screenX;
cursorY = evnt.screenY;
padAmtX = 10;
padAmtY = 10;
if((cursorY + height + padAmtY) > screenY) {
// make sizes a negative number to move left/up
padAmtY = (-30) + (height * -1);
// if up or to left, make 30 as padding amount
}
if((cursorX + width + padAmtX) > screenX) {
padAmtX = (-30) + (width * -1);
// if up or to left, make 30 as padding amount
}
if(navigator.appName == "Microsoft Internet Explorer") {
leftprop = cursorX + padAmtX;
topprop = cursorY + padAmtY;
}
else {
leftprop = (cursorX - pageXOffset + padAmtX);
topprop = (cursorY - pageYOffset + padAmtY);
}
}
else{
leftvar = (screenX - width) / 2;
rightvar = (screenY - height) / 2;
if(navigator.appName == "Microsoft Internet Explorer") {
leftprop = leftvar;
topprop = rightvar;
}
else {
leftprop = (leftvar - pageXOffset);
topprop = (rightvar - pageYOffset);
}
}
if(evnt != null) {
properties = properties + ", left = " + leftprop;
properties = properties + ", top = " + topprop;
}
closePopup();
popupHandle = open(url,name,properties);
}
// End -->
</script>

</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<a href="javascript:void(0)" onMouseOver="displayPopup(1,'smartpopuptext.txt','popup1',document.formtest.testheight.value,document.formtest.testwidth.value,(version4 ? event : null))" onMouseOut="closePopup()">POPUP - OFF CENTER</a>


<br><br><a href="javascript:void(0)" onMouseOver="displayPopup(2,'smartpopuptext.txt','popup2',document.formtest.testheight.value,document.formtest.testwidth.value,(version4 ? event : null))" onMouseOut="closePopup()">POPUP-CENTER</a>

END OF CODE

Where smartpopuptext.txt is the URL of the page to popup and where:
document.formtest.testheight.value - and document.formtest.testwidth.value - are replaced by the desired height and width.

If you can find time and interest and its not against coding practice, could you take a look at my request - I say again I have tried to contact the author but each time my efforts ended in frozen computer on visiting the author's sites.

Thanks in any case if you read this - Ad

jscheuer1
04-01-2007, 05:54 AM
That code is old an outdated. It will not prevent the pop up from being blocked. You can only really open a pop up onclick of a link and expect any modern browser not to block it. Even so, some will. Settings can often be overridden as well.

You can specify the left and top position (among other things) when using the window.open() method. Since a pop up is a window though, this position will be relative to the screen, not to the page (often these are about the same thing but not always and can vary widely).

For a good listing of the window.open() method's required and optional specifications see:

http://www.javascripter.net/faq/openinga.htm

cobler
04-03-2007, 10:08 AM
Thanks again, John, for advice - taken.

I got together this code which works well for a mouseover open Link popup and mouseout close Link popup.

At present I can use it to open/close ONLY ONE Link popup per parent page. Can you suggest how it could be, if it could be, used to open/close several Link popeups from one parent page? I would much appreciate if this could be done - have played around with this code, with my profound ignorance of javascriptiing, but without any success!

Here is the code:

<Head><html>
<script language="JavaScript">

function open_new_window(url)
{
new_window = window.open(url,'window_name','toolbar=0,menubar=0,resizable=0,dependent=0,status=0,width=900,height=600,left=55,top=15')
}

function close_window(url)
{
new_window.close(url);
}
</script>
</head>
<body bgcolor="#FFFFFF">

<a href="" onMouseOver="open_new_window('myown.htm')" onMouseOut="close_window()">Link</a> Opens in new Window on mouseover and closes on mouseout

</body>
</html>

With thanks again for all interest and help from you - Ad

cobler
04-03-2007, 10:14 AM
Sorry to have not made my point perfectly clear - when I ask to be able to use that code for opening several links as popups from one page, I mean that I can have the popups open, each one with different features/properties - ie width, height, top, left, etc

Thanks again and apologies for my omission

jscheuer1
04-03-2007, 01:21 PM
Still gets blocked but, if that is alright with you, you can pass parameters to it (example passing URL, name and width):


<html><head>
<script language="JavaScript">

function open_new_window(url,n,w)
{
new_window = window.open(url,n,'toolbar=0,menubar=0,resizable=0,dependent=0,status=0,width='+w+',height=600,left=55,top=15')
}

function close_window(url)
{
new_window.close(url);
}
</script>
</head>
<body bgcolor="#FFFFFF">

<a href="" onMouseOver="open_new_window('myown.htm','bob',500)" onMouseOut="close_window()">Link</a> Opens in new Window on mouseover and closes on mouseout

</body>
</html>

cobler
04-05-2007, 12:15 AM
Just to say, many thanks John, for your interest, time and tuition.

I was able to pass parameters as you said and now have a real simple code (any beginner can use) for any number of open/close link/popup pages from parent page - with size and position as I wish via a choice of onclick/onMouseover/onMouseout tags.

Thanks again - its not flattery to say that this, DynamicDrive forums, has been my best experience yet with web site design forums -

Best wishes, Ad