For the Engineers Association website, people submit newsletters to me as Word or PDF documents and ask me to post them to the website. I thought it would be good to have those open in a separate window since they are not html documents. I searched for the tag that would do that, but quickly found that it requires javascript. Also I found a site that said opening new windows was one of the top ten bad things that web designers can do because if the user wants to open a new window they can do it themselves and opening a new window messes up the Back button since you can’t go back from a new window (you have to close the window).
The function I needed was window.open. I found a function that would do it and then you would call the function (in fact I used that when I made the covered bridge navigator), but I wanted it to all be in the link without a separate function call. By searching for “window.open” and “href” I found the exact same guy’s web page, written 4 years after his original warning to avoid opening a window, saying that for non-web documents it was best to open a new window because when people open a .pdf document they usually close the window to get rid of it and then lose their place and have to start the browser from scratch again (which is exactly what I always do). However he did not provide any code on how to do this. I soon found a really good way to do it by using the HREF to go to the .pdf file, but adding an onClick that would cause a new window to open. Then you have the best of both worlds: when someone mouses over the link they see where they are going, they can even download the file by right-clicking it, and the link still works even if they’ve turned javascript off. But if they have javascript running, it will open a new window when they click it.
The code below opens a new resizable window 700 pixels wide (enough for letter size width) by 500 pixels vertical, without toolbars:
<a href=”newsatl06.pdf” onClick=”window.open(‘newsatl06.pdf’,’mywin’,’left=20,top=20,width=700,height=500,toolbar=0,resizable=1′); return false”>February 2006 Newsletter</a>
You can also see it in action
Well, I’ll be derned!
This method was under your nose… or under your blog. When posting photos on MovableType, you have the option to create a thumbnail that will pop-up into a window. It is a cleaner way to zoom into a photo. I used it here. Link.
I thought it would do that so I went to my blog and clicked on Katie’s x-ray picture, but it didn’t open a new window. That was because I didn’t pick the option to open it in a new window, but I couldn’t think of any entries where I had done that so I just had to find it myself elsewhere.