Pop-up div with clickable links
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>
Re: Pop-up div with clickable links
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.
:wave:
Re: Pop-up div with clickable links
That is a lot cleaner than what I came up with.
Thanks
Re: Pop-up div with clickable links
Quote:
Originally Posted by
MarkT
That is a lot cleaner than what I came up with.
Thanks
Glad to hear that it helped :wave:
