Pop-up div with clickable links

**MarkT** · Jul 31st, 2012, 11:42 AM

Okay, be gentle. I'm pretty new to jQuery.

What I'm doing is pulling data from a database and displaying it in a table. In the table, a td cell may have zero or up to about 20 record depending on how they are grouped. One or two record will display fine in the td but more than that and it get pretty crowded. Each one on the records in the table will be hyperlinked to details about the record. What I would like to do is if the td will have more than 2 records in it then instead of listing all the records in the cell have a div popup and display the list of records. So far I can do that.

My problem is I want to place links in the pop up div and be able to access the links. With the code I'm playing with I can show the pop up div but as soon as I mouse over the div it disappears. How can I make it so when I move from the td tag to the div, the div will stick around so I can click a link inside it.

I hope my code here helps explain what I'm after.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>     
	<title></title> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script> 
	<style type="text/css">     
		* {font-family:Calibri}     
		.data {width:100px;border:1px solid #000;display:none}     
		.cell {width:200px;border:1px solid #ddd} 
		.redlink {background-color:#CC0000;}
		.greenlink {background-color:#00CC00;}
		.bluelink {background-color:#0000CC;}
		.redlink a {color:#FFFFFF;}
		.greenlink a {color:#000000;}
		.bluelink a {color:#FFFFFF;}
	</style> 
	<script type="text/javascript">     
		$(function () {         
			$(".cell").hover(             
				function () {                 
					var $td = $(this);                 
					var divId = '#div-' + this.id.split('-')[1];                 
					//show it first or it doesn't position right                 
					$(divId).show();                                 
					$(divId).position({                     
						my: 'left center',                     
						at: 'center  center',                     
						of: $td,                     
						collision: 'fit'
					});             
				},            
				function () {                 
					var divId = '#div-' + this.id.split('-')[1];                 
					$(divId).hide();             
				}         
			);     
		});     
	</script> 
</head> 
	<body>     
		<table cellspacing="3" cellpadding="2">         
			<tr>
				<td id="td-1" class="cell">More Data</td>
				<td id="td-2" class="cell"><a href="#">Data</a></td>        
				<td id="td-3" class="cell"><a href="#">Data</a></td>
				<td id="td-4" class="cell"><a href="#">Data</a></td>        
				<td id="td-5" class="cell"><a href="#">Data</a></td>
			</tr>         
			         
			<tr>
				<td id="td-6" class="cell"><a href="#">Data</a></td>        
				<td id="td-7" class="cell"><a href="#">Data</a></td>
				<td id="td-8" class="cell">More Data</td>         
				<td id="td-9" class="cell"><a href="#">Data</a></td>         
				<td id="td-10" class="cell"><a href="#">Data</a></td>
			</tr>     
		</table>     
		<div id="div-1" class="data">
			<div class="redlink"><a href="#">Link 1</a></div>
			<div class="greenlink"><a href="#">Link 2</a></div>
			<div class="bluelink"><a href="#">Link 3</a></div>
		</div>       
		<div id="div-8" class="data">
			<div class="redlink"><a href="#">Link 4</a></div>
			<div class="greenlink"><a href="#">Link 5</a></div>
			<div class="bluelink"><a href="#">Link 6</a></div>
		</div>          
	</body> 
</html>

**akhileshbc** · Aug 1st, 2012, 10:04 AM

Check it now: http://jsfiddle.net/WEsGZ/

What I have done is, added a "position" attribute for the "data" class with the value "absolute". And also, moved the div for each of popups to their respective "td"s.

**MarkT** · Aug 1st, 2012, 10:49 AM

That is a lot cleaner than what I came up with.

Thanks

**akhileshbc** · Aug 1st, 2012, 10:51 AM

Originally Posted by MarkT

That is a lot cleaner than what I came up with.

Thanks

Glad to hear that it helped

Thread: Pop-up div with clickable links

Thread Tools

Display

Pop-up div with clickable links

Re: Pop-up div with clickable links

Re: Pop-up div with clickable links

Re: Pop-up div with clickable links

Posting Permissions