Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Open link in a new window

Thoughts and ideas

6:30 pm on May 6, 2010 (gmt 0)

10+ Year Member

Greetings all

I'm having a small problem with the open link in a new window command. It's sort of a concept thing.

I want the visitor to be able to go to a new page without leaving the current page by opening the new page in a new window. And the code below works fine for that.

Click this link to view
<a href="page_two.htm" target="_blank">
Page two

And the problem is, the new window is the same size as the current window and it covers the current window up.

When the new window opens, I want the visitor to know that a new window has opened and not think that the current window has gone to a new page.

One thought I have is to have the new window open at a slightly smaller size than the current window (maybe 20% smaller) so the visitor can see the current window behind the new one.

But I don't know how to do it.

Or you may have a better idea.

What I want is, when a visitor clicks on the link to go to a new page, to have the new page open in a new window in such a way that the visitor knows that a new window has opened and that the current page is still there.


6:42 pm on May 6, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

You can use the JavaScript window.open() method to open a new window at a specific pixel size and position. It's really the same thing as a pop-up window, but you make it bigger than the usual pop-up.

Keep the target="_blank" attribute so that visitors with no JavaScript still can get to the content on the new page.
2:28 am on May 7, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Kudos for at least caring. :-) I have one client who is so worried about people leaving his "home page" that in spite of my vigorous protests, every link on his site is a new window. He also wants them "as big as possible" and insists on _blank. But refuses to use Javascript. It makes my eyes bleed.

If you have a limited set of links, use it as below with the array. This will leave your (X)HTML clean and lean, as shown. Otherwise, just do

<a id="link1" href="link.html" target="_blank" onclick="return newWin(this.href);">link</a>

The return is important, it's what stops it from navigating to the link in href.

In the head, or better yet, as external JS,

<script type="text/javascript">
window.onload=function() { attachBehaviors(); };
function attachBehaviors() {
// ID's of the links
var newWins = Array (
// etc
for (j=0;j<newWins.length;j++) {
if (document.getElementById(newWins[j])) {
document.getElementById(newWins[j]).onclick=function() { return newWin(this.href); }
function newWin(url) {
// adjust width and height to taste
var w = 600;
var h = 800;
if ((screen.height) && (h > screen.height)) { h = screen.height-25; }
var day = new Date();
var id=day.getTime();
var params = 'toolbar,location,status,menubar,scrollbars,resizable,';
params += 'width='+w+',height='+h+',top=0,left=0';
return false;

In the body, the only thing important here are the ID's,

<li><a id="link1" href="https://www.google.com" target="_blank">Link 1</a></li>
<li><a id="link2" href="https://www.yahoo.com" target="_blank">Link 2</a></li>
<li><a id="link3" href="https://www.webmasterworld.com" target="_blank">Link 3</a></li>

I used HTTPS so the software doesn't bury the URL's in that link widget thingy generated by the last revision of this board . . .
3:19 pm on May 8, 2010 (gmt 0)

10+ Year Member

Thanks tedster and rocknbil

I've got everything fixed the way I want it now and the only thing left to do is write the rest of the content. I've got a lot of content done already.

It's a big job but it's coming along nicely.

Thanks again. When the cool people are in town, you're definitely in that group.