A Personal Blog
Degradeable Popups
Apparently this technique is new to a few people, as I received a couple of emails about it yesterday. Before I get into this, let me say I’m not sure how well it behaves with all browsers, so if it isn’t working for you, let me know and I’m sure we can find a workaround!
Basically it’s about popup windows. I know it’s evil to do something like:
<a href=”javascript:popFunc (‘hello.html’);”>popup</a>
And it’s equally evil to do:
<a href=”#” onClick=”popFunc (‘hello.html’);”>popup</a>
They are useless to browsers without JavaScript. Also, though, the link is useless to search engines. So, I figured out a way to make both work (degradeable popups).
Here’s the final code (which you can see in action by going to the ensight home page and clicking on my author name):
<a href=”mypage.html” onClick=”popFunc (‘hello.html’); return false;”>popup</a>
Basically there are 3 parts to this. The first is the same function we’ve been calling all along, popFunc (if you aren’t sure how to make popup windows, check out Builder.com’s Popup Window Maker).
The second, is that instead of our href being either a “#” or the javascript call itself, it’s a webpage which is relevant to the link you are opening. In my case, I directed it to my personal web page. In your case, you may open what would have gone in the popup window. It’s really up to you.
The third is the “return false”. In most browsers (ie: I haven’t tested it in all); this will cancel the href, as long as JavaScript is enabled. So, the order of the way things happen is:
1. user clicks link
2. link is about to open, but gets cancelled by “return false”
3. main JS code gets executed instead
So, what you get is a popup window for people who have JS, but for those who don’t, and for Search Engines, they go to the page you specify in the href.
I think it’s nifty, though it may need work :)
| Print article | This entry was posted by Jeremy Wright on July 8, 2003 at 10:41 am, and is filed under Techy Stuff. Follow any responses to this post through RSS 2.0. Responses are currently closed, but you can trackback from your own site. |
Comments are closed.
about 8 years ago
I have a slightly simpler method. Really slight, but you don’t have to type the url twice. Try this out:
Now the page opens in a new window and is search engine friendly without having to type the url in the popFunc.
about 8 years ago
Yes, byt in his example, it opens a separate page using the popFunc() and if the DOM is not supported opens the href. Slight difference there.
Aaron
about 8 years ago
Both are nice, if you’re looking to open the same URL (which some people might). Great solution cade :)
J