milov.nl

Interaction design • webdevelopment • web art • photography

August 2001

Please don't spawn popup-windows like this:
<a href="javascript:window.open('foo.html');">

or this:
<a href="#" onclick="window.open('foo.html');">

rather, use:
<a href="foo.html" onclick="window.open(this.href);return false;">

benefits:
- statusbar still indicates where you're going
- non-js users (and search-engines) still end up at the correct page
- current page doesn't jump to top (faux-anchor '#' evil)
- shift- and right-click options still open the correct page

Update:
Apparently using return false; in the href can mess up some browser's popup-blocking, so watch out if you care about that (haven't noticed it myself, but then again, I almost never use popups). [via]



Marza wrote on 2001/08/14:
Goede tip, meteen gewijzigd. Ik stoorde me al aan het niet met de rechtermuisknop kunnen klikken.


David wrote on 2001/08/14:
Dit zocht ik. Bedankt!


pup wrote on 2001/08/14:
excellent tip. i was looking for a nice backwards compatible way of doing this.


Jim wrote on 2001/12/28:
great tip, i too was looking for something that would work with js turned off.


Joe Clark wrote on 2001/12/30:
Yeah, except you have to duplicate mouse functions with keyboard functions for accessibility. It's onkeyDown, I think, but I'm not an expert at this. Keep all the onClick stuff-- just add the keyboard support.


Norse wrote on 2002/01/02:
Het niet ik been zocht dit ik ik de met wheerholdenit.


charles wrote on 2002/01/04:
How do I also add the no-address/ noscroll and other elements to that tag?


matt wrote on 2002/02/17:
If you're just opening a new window with out specifying any properties (window size etc.) then you should really be using TARGET="_blank" instead of an onClick. That way even people with javascript turned of will get a new window.


zachariah wrote on 2002/03/21:
matt - target="_blank" is not vaild xhtml which is the current verion of html


Tim Scarfe wrote on 2002/06/16:
Great Tip.

I don't like inline behaviour in the HTML element of my documents though, How about making it have a class of "pop", and then having a seperate script run through the document at the end picking up all the elements and assigning the events?

De-gradable coding, isn't it so cool :)


kesor wrote on 2002/08/31:
the return false; thingy doesnt quite work in opera (tested with 6.04).

I tried to expand text, like this :

<p>this is some text <a href="" onclick="moretext.style.display='inline'; return false;">more text</a></p>
<p id="moretext">this is some more text</p>

It works great in explorer, but doesnt work in opera and mozilla.

I guess its the return false that is not working.


sh0rtie wrote on 2002/09/04:
try
<a href="" onclick="document.getElementById('moretext').style.display='inline';return false">blah</a>


sh0rtie wrote on 2002/09/04:
try
<a href="" onclick="document.getElementById('moretext').style.display='inline';return false">blah</a>


sh0rtie wrote on 2002/09/04:
try
<a href="" onclick="document.getElementById('moretext').style.display='inline';return false">blah</a>


sh0rtie wrote on 2002/09/04:
try
<a href="" onclick="document.getElementById('moretext').style.display='inline';return false">blah</a>


sh0rtie wrote on 2002/09/04:
try
<a href="" onclick="document.getElementById('moretext').style.display='inline';return false">blah</a>


sh0rtie wrote on 2002/09/04:
try
<a href="" onclick="document.getElementById('moretext').style.display='inline';return false">blah</a>


sh0rtie wrote on 2002/09/04:
try
<a href="" onclick="document.getElementById('moretext').style.display='inline';return false">blah</a>


sh0rtie wrote on 2002/09/04:
try
<a href="" onclick="document.getElementById('moretext').style.display='inline';return false">blah</a>


sh0rtie wrote on 2002/09/04:
holy multiple posting batman

sorry about that , blame mozilla , i only hit submit once :/


MidgetSniper wrote on 2002/09/19:
Thank you for the info. I've been trying for 3 days now to get the page to stop refreshing everytime I wanted to post a comment. I'm in process of building this site and that was a tremendous help.


Akello wrote on 2002/12/23:
me@127.0.0.1's way doesn't work either :(


gfdh wrote on 2003/02/20:
ghgf


FitzChivalry wrote on 2003/09/17:
I'm so glad that googling on "href onclick" led me to this site!


hadlock wrote on 2003/10/12:
hi how do you open this pop-up in a set size window?


Gobalopper wrote on 2003/11/02:
Try this hadlock:

<a href="yourlink.html" onclick="window.open(this.href,'blah','height=250,width=300,top=50,left=50,scrollbars=yes,titlebar=true'); return false;">link text</a>


Ich wrote on 2003/12/30:
Fuck you


nyexotic wrote on 2004/01/29:
I want to make a pop up for my website with a picture as soon as they open my site & another when people turn on their computer. If someone can e-mail me a script that would be awesome. thanks.....


earl-ku wrote on 2004/02/09:
thanks thanks thanks


Jay wrote on 2004/03/10:
Great tip. Exactly what I needed. Thanks!


wooki wrote on 2004/04/03:
what. when people turn on their computer?


fargo wrote on 2004/05/11:
Does not seem to work for me (tested in Mozilla Firefox and Opera 6.12). It opens the new window but also the current window jumps to the url present between the quotes in href="".


milov wrote on 2004/05/11:
Really? Even with the "return false;" at the end?


Symen wrote on 2004/12/01:
>fargo

It works in my firefox, opera and ie. You must have made a typo..

But anyway, good article milovrs!


sandra wrote on 2005/07/01:
Thanks gobalopper! this helped me great!!


Joy wrote on 2005/09/22:
How can I use window.open(this.href...
with frames? I have the <a href="offer.html".. in a frame and when i click it, offer.html is open in the self frame and not in a popup window.


seema wrote on 2005/09/27:
<p>this is some text <a href="" onclick="moretext.style.display='inline'; return false;">more text</a></p>
<p id="moretext">this is some more text</p>

It works great in explorer, but doesnt work in opera and mozilla.

I guess its the return false that is not working.


Milo wrote on 2005/09/27:
Nope, you just need to access moretext via the getElementById-function, like so:

onclick="document.getElementById('moretext').style.display='inline'; return false;"

This should work in IE, Mozilla and Opera.


eapen wrote on 2005/10/25:
doesnt work for me either in firefox. it probably has to do with one of my extensions, but its a pain to go through each one.


mayglee wrote on 2005/11/11:
how to make a popup onclick with style, with background image and so on?

good page, thanx


riccardo wrote on 2005/11/12:
how about the same thing with forms?


eSKape wrote on 2006/02/09:
#36 Joy
I guess the only way to open links in another frame is to use targets. But target is okay, they are XHTML.. but not Strict. Maybe you are not using the right DTD? You are using framesets, so you should use XHTML Frameset.
As http://www.w3schools.com/tags/tag_a.asp say,


eSKape wrote on 2006/02/09:
.. (continuing) ..
As url say, target is allowed in Transitional and Frameset, but not in Strict.


Alex wrote on 2006/02/26:
.^..^.
<0><0>
..<>
((SWEET))


RskpsVVMSlXGDP wrote on 2008/06/05:
tickets_5.txt;2;2


someOne wrote on 2009/01/08:
like i didnt know that allready :/


Imu wrote on 2009/11/10:
This is great, I use this to open 40 000 porn pop-ups at all my clients computers. Thank you!