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
A:
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.
FlySwat
2008-10-11 01:59:38
A:
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."
Andrew Hedges
2008-10-11 07:53:37
+2
A:
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>
Wayne
2008-10-11 08:38:43
A:
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.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/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>
AquilaX
2008-10-13 06:04:32
+1
A:
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.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/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;*/
/*uncomment 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>
GameFreak
2008-10-14 20:18:37