Opening new window over original with both visible. 1

gns100 · Oct 5, 2003

I'm trying to solve a trivial problem of opening a new window over the original window where the link to the window was clicked. At the moment, the new window opens but I loose the original window.
I need the original window to be visible (stay open) at the same time as the new (smaller) window. The code for the original link page and the new window are shown below.

Here's the initial page where the link is located.

Code:

<html>
<head>
<title>Click here to show the popup window over this text in the original window</title>
</head>

<body>

<p>Click
<a href=&quot;test_popup_6.html&quot;>
here</a> to show the popup window over this text in the original window, with both visible at the same time.</p>

</body>
</html>

and here's the code for the new window page.

Code:

<html>

<head>
<title>New Page 1</title>
</head>

<body>
<script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;>

popwidth=400;
popheight=450;
leftpos1=420;
toppos=210;
popbackground=&quot;orange&quot;;
textdescription=&quot;TEXT HERE&quot;;
var winattributes='width='+popwidth+',height='+popheight+',resizable=no,left='+leftpos1+',top='+toppos
var bodyattribute=(popbackground.indexOf(&quot;.&quot;)!=-1)? 'background=&quot;'+popbackground+'&quot;' : 'bgcolor=&quot;'+popbackground+'&quot;'
if (typeof jkpopwin==&quot;undefined&quot; || jkpopwin.closed)
jkpopwin=window.open(&quot;&quot;,&quot;&quot;,winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}

jkpopwin.document.open()
jkpopwin.document.write(&quot;<html><title>test</title><head>\n&quot;+  &quot;<script language='Javascript'>\n function cls()\n\{self\.close()\}\n&quot;+ &quot;<\/script><head>\n<body &quot;+bodyattribute+&quot;><center>\n<br><br>&quot;+textdescription+&quot;<BR><BR>&quot;+  &quot;<BUTTON onClick='cls()'>Close Window</BUTTON></center></body></html>&quot;);
//jkpopwin.document.write('<html><title>test</title><head>\n&quot;</head> <body '+bodyattribute+' ><center><br><br>'+textdescription+'<BR><BR><BUTTON onClick=&quot;cls()&quot;>Close Window</BUTTON></center></body></html>')
jkpopwin.document.close()
jkpopwin.focus()
</script>
</body>
</html>

Thanks

Lrnmore · Oct 5, 2003

The reason you are losing your first
window is because the use of the link:

<a href="test_popup_6.html">here</a>

tells the browser to replace it's current page with
the page "test_popup_6.html

I think what may be confusing
you is that your second page's new window script
runs when the page is loaded since the "<script>" is
defined in the "<body>" and there is no function name
assignment.

Try this example, the "new window script" is assigned to a function and called by a link:

<html>

<head>
<title>New Page 1</title>
<script language="JavaScript" type="text/JavaScript">
function nw_win() {
popwidth=400;
popheight=450;
leftpos1=420;
toppos=210;
popbackground="orange";
textdescription="TEXT HERE";
var winattributes='width='+popwidth+',height='+popheight+',resizable=no,left='+leftpos1+',top='+toppos
var bodyattribute=(popbackground.indexOf(".&quot

!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}

jkpopwin.document.open()
jkpopwin.document.write("<html><title>test</title><head>\n"+ "<script language='Javascript'>\n function cls()\n\{self\.close()\}\n"+ "<\/script><head>\n<body "+bodyattribute+"><center>\n<br><br>"+textdescription+"<BR><BR>"+ "<BUTTON onClick='cls()'>Close Window</BUTTON></center></body></html>&quot

;
//jkpopwin.document.write('<html><title>test</title><head>\n"</head> <body '+bodyattribute+' ><center><br><br>'+textdescription+'<BR><BR><BUTTON onClick="cls()">Close Window</BUTTON></center></body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}
</script>

</head>

<body>
<a href="javascript:nw_win();">Click for new window</a>
</body>
</html>

2b||!2b

gns100 · Oct 5, 2003

Your response was helpful, however, for discussion purposes I simplified my problem. Here are more details.

I would like to have a link on the homepage and the same link on two other pages. Whenever the link is clicked, on any of the pages, a new popup window opens, keeping the page from which it was clicked open behind it. The new window is the same regardless of which link is clicked.

From time to time, I will change the content of the popup window. Your solution requires that the link and popup window be in the same page. For my three pages I would then have to maintain three identical versions, one associated with each of the pages.

Is there any to accomplish this without three identical page setups?

Thanks.

Lrnmore · Oct 6, 2003

gns100,

This might be a solution for you,

You can create the page you want as your pop-up
e.g.("minfo.html&quot

Keeping in mind as you design
the page that it is going to be the size you want
your pop-up to be. Then you only have to edit
the "minfo.html" page when you want to make changes.

Then on each of the 3 pages have a link:

<a href="javascript

op_up();">Click</a>

Then on each of the 3 pages that will be using
the pop-up you would define the function that will
open the "minfo.html" as a pop-up window leaving both
pages for the user to see.

As a matter of fact, you can use your original function
with a few changes but this time give the window.open
a url to open; before when we were not opening a url
we were writing out html for the pop-up "on the fly".

Save these 2 pages load "main.html" try the link:

"main.html"
=====================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Page 1</title>
<script language="JavaScript" type="text/JavaScript">
function pop_up() {
popwidth=400;
popheight=450;
leftpos1=420;
toppos=210;
popbackground="orange";
textdescription="TEXT HERE";
var winattributes='width='+popwidth+',height='+popheight+',resizable=no,left='+leftpos1+',top='+toppos
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("minfo.html","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.focus()
}
</script>
</head>
<body>
<a href="javascript

op_up();">Click for new window</a>
</body>
</html>

"minfo.html"
====================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body><center>
<h2>TEST PAGE FOR POP-UP</h2>
In the main.html function you can use<br>
the different variables to change the<br>
position and size of the pop-up.
</body>
</html>

2b||!2b

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Opening new window over original with both visible. 1

gns100

Programmer

Lrnmore

Technical User

gns100

Programmer

Lrnmore

Technical User

Similar threads

Part and Inventory Search

Sponsor