All geek questions in one place

Has anyone used / created fisheye table columns?

Has anyone ever given a fisheye column to a table column? I am talking about the expanding effect of table columns when you hover over them. I would like to see some code if someone tried this.

EDIT: ... or harmonic effect

+3
source share
8 answers

This is not for the table, but here is the effect:

http://safalra.com/web-design/javascript/mac-style-dock/

+4
source

Although this is not a table-based solution, it is a quick proof of concept that I hacked with jQuery to check if I can use the column-based accordion effect. Maybe this can give you 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>
+2

javascript, ,

<!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>
+1

, :

  • CSS- TD
  • MouseIn MouseOut
  • "fisheye"
  • mouseout .

: , ... , , , , css .

0

, . , . , "".

0

This is a kind of ugly effect, but only works with CSS: you can use JS to make it 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>
0
source

the code below uses css to make the cell wider: hover and jquery to switch (display) additional content in this cell ... and switch it again (hide) when you no longer vibrate the cell.

http://jsfiddle.net/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 HTML table:

<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>
0
source

Source: https://habr.com/ru/post/1698162/

More articles:


All Articles