No replies
jdicss
Offline
newbie
Burlington, MA
Last seen: 15 years 44 weeks ago
Burlington, MA
Joined: 2004-11-24
Posts: 4
Points: 0

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.

Tags: