Has anyone ever given table columns the "fisheye" effect? Im talking about an expanding effect of the table columns when hovering the mouse over them. I'd love to see some code if anyone has tried this.
EDIT: ...or an accordian effect
Has anyone ever given table columns the "fisheye" effect? Im talking about an expanding effect of the table columns when hovering the mouse over them. I'd love to see some code if anyone has tried this.
EDIT: ...or an accordian effect
Share Improve this question edited Oct 11, 2008 at 4:03 dittonamed asked Oct 11, 2008 at 1:16 dittonameddittonamed 9302 gold badges9 silver badges17 bronze badges8 Answers
Reset to default 4It's not for a table, but here is the effect:
http://safalra./web-design/javascript/mac-style-dock/
While not a table-based solution, this is a quick proof-of-concept I whipped up using JQuery just to see if I could do a column based accordion effect. Maybe it can give you some inspiration...
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table > div:even").addClass("row");
$("#table > div:odd").addClass("altrow");
$("#table > div > div").addClass("normal");
$("div[class*='col']").hover(
function () {
var myclass = $(this).attr("class");
$("div[class*='col']").css("width","20px");
$("div[class*='"+myclass+"']").css("width","80px").css("overflow","auto");
},
function () {
$("div[class*='col']").css("width","40px").css("overflow","hidden");
}
)
});
</script>
<style type="text/css">
.row{
background-color: #eee;
float:left;
}
.altrow{
background-color: #fff;
float:left;
}
.normal{
width: 40px;
overflow: hidden;
float:left;
padding :3px;
text-align:center;
}
</style>
</head>
<body>
<div id="table">
<div>
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
<br style="clear:both" />
<div>
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
<br style="clear:both" />
<div>
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
</div>
</body>
</html>
no javascript is necessary this took me only a few minutes to work out
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<style type="text/css">
td {
border: thin black solid;
width: 3em;
height: 3em;
}
td:hover {
background-color: red;
width: 5em;
/*height: 5em;*/
/*unment the above if you also want to zoom the rows*/
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Maybe Magic Table is what you're looking for: http://www.grvisualisation.50webs./examples.html
Columns are a whole lot trickier than rows, however I'd do like this:
- Apply a unique CSS class to each TD per column
- Attach a MouseIn and MouseOut event
- Select all elements with the columns class name, and apply a second "fisheye" class
- On mouseout, remove the class.
EDIT: I misunderstood fisheye to be more like zebra striping with highlights...To do a fisheye on the columns would be tricky, do same process as I listed above, but apply an animation to each cell instead of a new css class.
I think Jonathan is on the right track. You'd need methods to find all cells in a column, as well as adjoining columns and rows. I think you could get a decent effect with just three levels of "zoom."
This is kind of ugly effect but works only with CSS's :hover you can use some JS to make it look smoother:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
table{
width: 150px;
height: 150px;
}
tr{
height: 20px;
}
tr:hover{
height: 30px;
}
td{
width: 20px;
border: 1px solid black;
text-align:center;
}
td:hover{
width: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
the code below uses css to make cell wider on :hover, and jquery to toggle (display) additional content in the given cell... and toggle it again (hide) when you are no longer hovering the cell.
http://jsfiddle/berteh/QDhcR/12/
CSS:
td {
border: thin black solid;
width: 3em;
}
td:hover {
background-color: YellowGreen;
max-width: 5em;
font-size: 130%;
}
Javascript:
$(document).ready(function() {
$('td').hover(function () {
$(this).find('.desc').toggle(300);
});
});
works on a simple table HTML:
<table>
<tr>
<th>row1</th>
<td>1<div class="desc">descZ</div></td>
<td>2<div class="desc">descU</div></td>
<td>3<div class="desc">descI</div></td>
<td>4<div class="desc">descO</div></td>
</tr>
<tr>
<th>row2</th>
<td>1<div class="desc">descZ</div></td>
<td>2<div class="desc">descU</div></td>
<td>3<div class="desc">descI</div></td>
<td>4<div class="desc">descO</div></td>
</tr>
</table>