Welcome to WebmasterWorld Guest from

Forum Moderators: ergophobe

Message Too Old, No Replies

Links to (likely) small amounts of content

Link to popup, new page, or expand a hidden div?

5:25 am on Aug 27, 2007 (gmt 0)

New User

10+ Year Member

joined:Jan 12, 2007
votes: 0

I do a lot of web sites for organizations and candidates that have upcoming events. They are listed on the Upcoming Events page (in a list... no calendar-style grid) and a couple are listed on the sidebar of the home page.

I had been doing popups because there is generally not a lot of info (though not extremely common, it's possible that they have a bit of info), so it seemed not to warrant a full page for a little bit of text.

Of course problems with it include popup blockers and disabling Javascript. So they have usuability problems. And I repent for my sins.

So another option is to just open a new page for that event, even if it is five lines long (perhaps it is worth mentioning that the events are maintained by clients via CMS, so long- and short-winded events play by the same rules).

Then another option could be to open up a hidden div (display:none -> display:block) with the details. This would probably work quite nicely on the Events page, itself, but not the home page sidebar. Perhaps the sidebar would link to the Events page where that one event would be expanded?

Seems like the div option has the least usability issues (if programmed correctly so it degrades nicely), the new page option is not really good for small descriptions (which lowers user trust in subsequent links, thus reducing usability), and popups are sooo 1996.

Am I missing anything? Anything better? Or have I answered my own question?


5:43 am on Aug 27, 2007 (gmt 0)

Senior Member from MY 

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

joined:Apr 1, 2003
votes: 0

The hidden DIV is a good option but it won't support disabled javascript. The only way you will get a system to work with disabed javascript is by having the links open in a new page, or perhaps in an IFRAME.

An IFRAME notification area can work well, you just set your link target to that block and the text appears in there. You can even have a transparent background and set the initial SRC="" to something transparent, and subsequent changes to something with a white background to create the effect of being hidden and revealed (be aware you won't be able to click through it!)

My personal method for your particular problem is:
href="newpage.html" << new page links
onClick="....;return false;" << DIV-based popup for JS enabled folk

That way you don't lose anyone

3:13 am on Aug 31, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
votes: 0

Here's an odd, hacky trick that is basically a flyout menu that relies only on CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
a.info_pop, a.info_pop:visited { display:block; border:1px solid black; background-color:yellow; width:120px; height:16px; overflow:hidden }
a.info_pop:hover { height:auto }
<script type="text/javascript" language="javascript">
function nop() {return}
<li><a href="javascript:nop()" class="info_pop">Pop Me<br>This could be extra info</a></li>
<li><a href="javascript:nop()" class="info_pop">Pop Me<br>This could be extra info</a></li>
<li><a href="javascript:nop()" class="info_pop">Pop Me<br>This could be extra info</a></li>

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members