I am using popup windows on one of my forums where I need to display a lot of information links:
http://textware.com/board/itmainforum/index.html
You can see them on the row that startw with Forum Tips, Marianne Kleen... When the mouse passes on each of these cells, a popup window is displayed and this allows having a lot of links conveniently accessible in a compact place.
The technique used combines css with a minimal amount of javascript. The style sheet is at http://fitaly.com/board/allforums.css and the javascript at http://textware.com/topic/extra/it-articles.js
In essence, the popups are created by the following:
<style> <!-- #allarticles { position:absolute; } #post, #marianne, #marie, #sharon, #jon, #patty, #jean, #more, #system {top:15px; position:absolute; color:black; background:white; z-index:4; visibility:hidden; border:solid #bb0000 0.5pt; width:500px;} #post { width:575px; } #marianne { width:700px; } #jean { width:650px; } #marie { width:600px; } #more { width:680px; } #system { width:600px; } --> </style>
This defines each of them, initially hidden, and their width. The contents themselves are defined by iframes, which is quite important as I want to be able to manage easily the contents of the popup pages as they evolve:
<div id="allarticles"> <div id="post"> <iframe src="http://textware.com/topic/it/post.htm" height="400" width="100%" scrolling="yes" marginwidth="2" marginheight="2" frameborder="0"></iframe></div> <div id="marianne"> <iframe src="http://textware.com/topic/it/marianne.htm" height="490" width="100%" scrolling="yes" marginwidth="2" marginheight="2" frameborder="0"></iframe></div> <div id="marie"> <iframe src="http://textware.com/topic/it/marie.htm" height="330" width="100%" scrolling="yes" marginwidth="2" marginheight="2" frameborder="0"></iframe></div> <div id="sharon"> <iframe src="http://textware.com/topic/it/sharon.htm" height="300" width="100%" scrolling="yes" marginwidth="2" marginheight="2" frameborder="0"></iframe></div> <div id="jon"> <iframe src="http://textware.com/topic/it/jon.htm" height="370" width="100%" scrolling="yes" marginwidth="2" marginheight="2" frameborder="0"></iframe></div> <div id="patty"> <iframe src="http://textware.com/topic/it/patty.htm" height="305" width="100%" scrolling="yes" marginwidth="2" marginheight="2" frameborder="0"></iframe></div> <div id="jean"> <iframe src="http://textware.com/topic/it/jean.htm" height="420" width="100%" scrolling="yes" marginwidth="2" marginheight="2" frameborder="0"></iframe></div> <div id="more"> <iframe src="http://textware.com/topic/it/more.htm" height="400" width="100%" scrolling="yes" marginwidth="2" marginheight="2" frameborder="0"></iframe></div> <div id="system"> <iframe src="http://textware.com/topic/it/system.htm" height="260" width="100%" scrolling="yes" marginwidth="2" marginheight="2" frameborder="0"></iframe></div> </div>
Displaying popups is done in the table definition with calls to the functions See (...) and Close (...) as follows:
<table class="double" width=100% cellspacing=1> <tr> <td class="beige"><a href="javascript:;;" onMouseover="See('post');" onClick="Done();">Forum<br> Tips</a></td> <td class="pales"><a href="javascript:;;" onMouseover="See('marianne');" onClick="Done();">Marianne <br>Kleen</a></td> <td class="beige"><a href="javascript:;;" onMouseover="See('marie');" onClick="Done();">Marie <br>Roberts</a></td> ... <td class="pales"><a href="javascript:;;" onMouseover="Done()" >Close <br>Articles</a></td> </tr> </table>
Finally, the Javascript is quite simple. I am showing here the See () function:
function SetVisible(Name) { division = findDOM(Name,1); division.visibility = 'visible'; } ... function See (Name) { Done (); SetVisible(Name); active_div = findDOM(Name, 1); switch (Name) { case 'post': active_div.left = 60; break; case 'marianne': active_div.left = 80; break; case 'marie': active_div.left = 90; break; case 'sharon': active_div.left = 100; break; case 'jon': active_div.left = 110; break; case 'patty': active_div.left = 120; break; case 'jean': active_div.left = 80; break; case 'more': active_div.left =50; break; case 'system': active_div.left = 120; break; default: active_div.left = 100; } active_div.top = -8; }
This works quite well and meets my objective of being very easy to maintain.
Where I am fishing for ideas is on ways to avoid the only drawback of the solution: When you pass over the table some popup appears and it is sometimes cumbersome to dismiss it. There is a special cell "Close Articles" to dismiss the current popup and they are also dismissed by going on the side or on the top.
Ideally, I would like popups to appear only when you stop at least for a second, which would nean that none opens if you do a fast move to one of the links of the forum.
Suggestions are welcome.