bobmonteverde/grid-test.html

## grid-test.html
<!doctype html>
<html>

  <head>
    <title>Grid - show hidden text example</title>

    <style>

      table {
        border-collapse: collapse;
        table-layout: fixed;
        width: 520px;
        margin: 40px;
      }

      tr:hover td {
        /*
        background-color: #ddf;
        */
      }

      th {
        border: 1px solid #fff;
        background-color: #ddd;
      }

      tr {
        height: 16px;
        overflow: hidden;
      }

      td {
        border: 1px solid #bbb;
        padding: 3px 5px;
        height: 16px;
        width: 120px;
        text-overflow:ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

    </style>

  </head>

  <body>


    <table id="table1">

      <thead>
        <tr>
          <th><span>Column 1</span></th>
          <th><span>Column 2</span></th>
          <th><span>Column 3</span></th>
          <th><span>Column 4</span></th>
        </tr>
      </thead>


      <tbody>

        <tr>
          <td><span>cell 1</span></td>
          <td><span>cell 2</span></td>
          <td><span>cell 3</span></td>
          <td><span>cell 4</span></td>
        </tr>

        <tr>
          <td><span>cell 1 with extra content</span></td>
          <td><span>cell 2 with even more extra content</span></td>
          <td><span>cell 3 enough extra content that it must either be hidden or flow into multiple lines</span></td>
          <td><span>cell 4 yet again, som extra space that will likely be clipped</span></td>
        </tr>

        <tr>
          <td><span>cell 1</span></td>
          <td><span>cell 2</span></td>
          <td><span>cell 3</span></td>
          <td><span>cell 4</span></td>
        </tr>

      </tbody>

<!--
      <tfoot>
        <tr>
          <td><span>foot 1</span></td>
          <td><span>foot 2</span></td>
          <td><span>foot 3</span></td>
          <td><span>foot 4</span></td>
        </tr>
      </tfoot>
-->

    </table>


    <!--
    <table id="table2">

      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>


      <tbody>

        <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
        </tr>

        <tr>
          <td>cell 1 with extra content</td>
          <td>cell 2 with even more extra content</td>
          <td>cell 3 enough extra content that it must either be hidden or flow into multiple lines</td>
          <td>cell 4 yet again, som extra space that will likely be clipped</td>
        </tr>

        <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
        </tr>

      </tbody>


      <tfoot>
        <tr>
          <td>foot 1</td>
          <td>foot 2</td>
          <td>foot 3</td>
          <td>foot 4</td>
        </tr>
      </tfoot>

    </table>
    -->


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script>

      (function($){
        $.fn.getStyleObject = function(){
            var dom = this.get(0);
            var style;
            var returns = {};
            if(window.getComputedStyle){
                var camelize = function(a,b){
                    return b.toUpperCase();
                }
                style = window.getComputedStyle(dom, null);
                for(var i=0;i<style.length;i++){
                    var prop = style[i];
                    var camel = prop.replace(/\-([a-z])/g, camelize);
                    var val = style.getPropertyValue(prop);
                    returns[camel] = val;
                }
                return returns;
            }
            if(dom.currentStyle){
                style = dom.currentStyle;
                for(var prop in style){
                    returns[prop] = style[prop];
                }
                return returns;
            }
            return this.css();
        }
      })(jQuery);


      function  log()  { console.log.apply(console, arguments); };
      function ilog(m) { log(m); };


      $('#table1').on('mouseenter', 'tbody td', function() {
        var $this = $(this),
            $span = $this.children('span'),
            offset =  $this.offset();

        //log(window.getComputedStyle(this));
        //log($this.getStyleObject());


        //don't do anything if there is no overflow
        if ($span.height() <= $this.height() && $span.width() <= $this.width()) return;

        var pause = setTimeout(function() {

          $('.tableHover').remove(); //cleanup


          var $hover = $('<div class="tableHover">')
                         .css($this.getStyleObject())
                         .css({
                             position: 'absolute',
                             left: offset.left,
                             top: offset.top,
                             border: '1px solid #999',
                             backgroundColor: '#fff'
                           })
                         .appendTo('body')
                         .animate({
                             width: $span.width(),
                             height: $span.height(),
                           }, 200)
                         .on('mouseleave', function() { $(this).remove() });

           $hover.append($span.clone());

         }, 500);

         $this.on('mouseleave', function() { clearTimeout(pause) });

      });


    </script>

  </body>
</html>
	<!doctype html>
	<html>

	<head>
	<title>Grid - show hidden text example</title>

	<style>

	table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 520px;
	margin: 40px;
	}

	tr:hover td {
	/*
	background-color: #ddf;
	*/
	}

	th {
	border: 1px solid #fff;
	background-color: #ddd;
	}

	tr {
	height: 16px;
	overflow: hidden;
	}

	td {
	border: 1px solid #bbb;
	padding: 3px 5px;
	height: 16px;
	width: 120px;
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
	}

	</style>

	</head>

	<body>




	<table id="table1">

	<thead>
	<tr>
	<th><span>Column 1</span></th>
	<th><span>Column 2</span></th>
	<th><span>Column 3</span></th>
	<th><span>Column 4</span></th>
	</tr>
	</thead>


	<tbody>

	<tr>
	<td><span>cell 1</span></td>
	<td><span>cell 2</span></td>
	<td><span>cell 3</span></td>
	<td><span>cell 4</span></td>
	</tr>

	<tr>
	<td><span>cell 1 with extra content</span></td>
	<td><span>cell 2 with even more extra content</span></td>
	<td><span>cell 3 enough extra content that it must either be hidden or flow into multiple lines</span></td>
	<td><span>cell 4 yet again, som extra space that will likely be clipped</span></td>
	</tr>

	<tr>
	<td><span>cell 1</span></td>
	<td><span>cell 2</span></td>
	<td><span>cell 3</span></td>
	<td><span>cell 4</span></td>
	</tr>

	</tbody>

	<!--
	<tfoot>
	<tr>
	<td><span>foot 1</span></td>
	<td><span>foot 2</span></td>
	<td><span>foot 3</span></td>
	<td><span>foot 4</span></td>
	</tr>
	</tfoot>
	-->

	</table>






	<!--
	<table id="table2">

	<thead>
	<tr>
	<th>Column 1</th>
	<th>Column 2</th>
	<th>Column 3</th>
	<th>Column 4</th>
	</tr>
	</thead>


	<tbody>

	<tr>
	<td>cell 1</td>
	<td>cell 2</td>
	<td>cell 3</td>
	<td>cell 4</td>
	</tr>

	<tr>
	<td>cell 1 with extra content</td>
	<td>cell 2 with even more extra content</td>
	<td>cell 3 enough extra content that it must either be hidden or flow into multiple lines</td>
	<td>cell 4 yet again, som extra space that will likely be clipped</td>
	</tr>

	<tr>
	<td>cell 1</td>
	<td>cell 2</td>
	<td>cell 3</td>
	<td>cell 4</td>
	</tr>

	</tbody>


	<tfoot>
	<tr>
	<td>foot 1</td>
	<td>foot 2</td>
	<td>foot 3</td>
	<td>foot 4</td>
	</tr>
	</tfoot>

	</table>
	-->








	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<script>

	(function($){
	$.fn.getStyleObject = function(){
	var dom = this.get(0);
	var style;
	var returns = {};
	if(window.getComputedStyle){
	var camelize = function(a,b){
	return b.toUpperCase();
	}
	style = window.getComputedStyle(dom, null);
	for(var i=0;i<style.length;i++){
	var prop = style[i];
	var camel = prop.replace(/\-([a-z])/g, camelize);
	var val = style.getPropertyValue(prop);
	returns[camel] = val;
	}
	return returns;
	}
	if(dom.currentStyle){
	style = dom.currentStyle;
	for(var prop in style){
	returns[prop] = style[prop];
	}
	return returns;
	}
	return this.css();
	}
	})(jQuery);




	function log() { console.log.apply(console, arguments); };
	function ilog(m) { log(m); };






	$('#table1').on('mouseenter', 'tbody td', function() {
	var $this = $(this),
	$span = $this.children('span'),
	offset = $this.offset();

	//log(window.getComputedStyle(this));
	//log($this.getStyleObject());


	//don't do anything if there is no overflow
	if ($span.height() <= $this.height() && $span.width() <= $this.width()) return;

	var pause = setTimeout(function() {

	$('.tableHover').remove(); //cleanup


	var $hover = $('<div class="tableHover">')
	.css($this.getStyleObject())
	.css({
	position: 'absolute',
	left: offset.left,
	top: offset.top,
	border: '1px solid #999',
	backgroundColor: '#fff'
	})
	.appendTo('body')
	.animate({
	width: $span.width(),
	height: $span.height(),
	}, 200)
	.on('mouseleave', function() { $(this).remove() });

	$hover.append($span.clone());

	}, 500);

	$this.on('mouseleave', function() { clearTimeout(pause) });

	});


	</script>

	</body>
	</html>