homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

Links to (likely) small amounts of content
Link to popup, new page, or expand a hidden div?

5+ Year Member

Msg#: 3432947 posted 5:25 am on Aug 27, 2007 (gmt 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?




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

Msg#: 3432947 posted 5:43 am on Aug 27, 2007 (gmt 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


WebmasterWorld Senior Member 10+ Year Member

Msg#: 3432947 posted 3:13 am on Aug 31, 2007 (gmt 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>

Global Options:
 top home search open messages active posts  

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved