ansaurus

Question

Answer 1

+1 A:

If you make the TDs position:relative You can add a hidden div with position:absolute to each TD that will appear on hover.

td { position:relative; }
.hidden_div { position:absolute; left:-9999em; }
td:hover .hidden_div { left:auto; top: 100%; }  /*adjust top*/

This will need a hack for ie6 though if you want to support that.

Galen 2010-09-23 20:06:36

Answer 2

+1 A:

You could use jQuery .hover()

And the jQueryUI position utility to put the divs where you want them.

Below is an example. You can do this many different ways. I think the important thing is it appears the position() method doesn't work until the element is visible. At least that's what I experienced.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"&gt;&lt;/script&gt;
<style type="text/css">
    * {font-family:Calibri}
    .data {width:100px;border:1px solid #000;display:none}
    .cell {width:200px;border:1px solid #ddd}
</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: 'right center',
                    of: $td,
                    collision: 'none'
                });
            },
            function () {
                var divId = '#div-' + this.id.split('-')[1];
                $(divId).hide();
            }
        );
    });
    </script>
</head>
<body>
    <table width="200" cellspacing="3" cellpadding="2">
        <tr><td id="td-1" class="cell">Data</td></tr>
        <tr><td id="td-2" class="cell">Data</td></tr>
        <tr><td id="td-3" class="cell">Data</td></tr>
        <tr><td id="td-4" class="cell">Data</td></tr>
        <tr><td id="td-5" class="cell">Data</td></tr>
        <tr><td id="td-6" class="cell">Data</td></tr>
    </table>
    <div id="div-1" class="data">div-1</div>
    <div id="div-2" class="data">div-2</div>
    <div id="div-3" class="data">div-3</div>
    <div id="div-4" class="data">div-4</div>
    <div id="div-5" class="data">div-5</div>
    <div id="div-6" class="data">div-6</div> 
</body>
</html>

fehays 2010-09-23 20:45:17

This code, although conceptually correct, is horribly inefficient and could definitely do with some clean up.

Yi Jiang 2010-09-23 23:19:43

@Yi, i wouldn't call it horrible for purposes of an example. Not to mention I don't have the details of what the poster's markup and data really look like. The idea was to show an example of the position feature not code it for them.

fehays 2010-09-23 23:44:49

the code works fine.

zod 2010-09-26 23:56:54

But in my screen there are different tds in one row. soi want to show the div over the td. thats is the main issue. in th given exampleshow hide of the div is working. But that is not exactly am looking for. div should display over particular td on mouseover

zod 2010-09-26 23:59:28

You can do that. Take a look at the docs for the position utility. You just need to set the "my" and "at" correctly

fehays 2010-09-27 07:32:26

http://www.yourhtmlsource.com/examples/positioning2.html I was looking for something like this . this is css. now i have to do the jquery for dyanamic divs

zod 2010-09-27 17:21:55

Answer 3

A:

CSS:

table td div { display:none; }
table tr:hover td div { display:block; }

HTML

<table>
    <tr><td><a id=1>abc</a><div>div1</div></td></tr>
    <tr><td><a id=1>cde</a><div>div2</div></td></tr>
    <tr><td><a id=1>fgh</a><div>div3</div></td></tr>
    <tr><td><a id=1>hij</a><div>div4</div></td></tr>
    <tr><td><a id=1>klm</a><div>div5</div></td></tr>
</table>

You can change display:block to display:inline

Jeaffrey Gilbert 2010-09-23 23:08:09

ansaurus

tags:

views:

answers:

Show div on mouse over of dynamic td

related questions