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>
Featured
Writing your app was the hard part, but it’s not the last part. You still need to sell your app. Here's how to make sure your description puts your app in the best light. |
|
Reply With Quote
Originally Posted by MarkT
