Grid styling

by StriplingWarrior

HTML

<link rel="stylesheet" href="http://localhost:52752/Static/Css/Legacy.css">
<link rel="stylesheet" href="http://localhost:52752/Static/Theme/Blue/Blue.css">
<script src="http://localhost:52752/Static/Script/toolkit.js"></script>
<p>testing</p>
<table class="tnl-grid-table">
        <colgroup>
        
            <col style="width:15px;">               
        
            <col style="width:32px;">               
        
            <col style="width:20px;">               
        
            <col>               
        
            <col>               
        
            <col>               
        
            <col>               
        
            <col>               
        
            <col style="width:200px;">               
        
            <col style="width:200px;">               
        
            <col style="width:185px;">               
        
        </colgroup>
        <thead>
        
            <tr>
                            
                <th scope="col">
                    
                </th>
                            
                <th scope="col">
                    <span>Action</span>
                </th>
                            
                <th scope="col">
                    <div>
                        <div data-colname="ObjectId" class="tnl-sort">
                            <a title="Sort by Transaction #" href="#" class="tnl-icon-link tnl-icon-link-active tnl-icon"><span class="ui-icon-triangle-2-n-s ui-icon"></span></a>
                        </div>
                        <span>Transaction #</span>
                        <div data-dataset-filter-json="[]" data-coldisplayname="Transaction #" data-colname="ObjectId" data-filter-data-type="Integer" class="tnl-filter">
                            <a title="Filter by Transaction #" href="#" class="tnl-icon-link tnl-icon-link-active tnl-icon"><span class="ui-icon-gear ui-icon"></span></a>
                        </div>
                   ...

CSS

.tnl-grid-table > thead > tr > th {position:relative; vertical-align: bottom; }
.tnl-grid-table > thead > tr > th > span {width: 100%; overflow: hidden;}
.tnl-grid-table > thead > tr > th > div {
    position: relative; padding: 0;
}
.tnl-sort, .tnl-filter {
    opacity: 1;
    /*background: none repeat scroll 0 0 #D7EBF9;*/
    width: 14px; height: 14px;
    top: -12px;
    padding: 0;
    position:absolute;
    text-align: left;
}
.tnl-sort > a, .tnl-filter > a {
    padding: 0;
    vertical-align: top;
}
.tnl-sort > a > span.ui-icon, .tnl-filter > a > span.ui-icon{
    left: 0;
    top: 0;
    margin-left: -1px;
    margin-top: -2px;
}
.tnl-sort {
    right: 16px;
}
.tnl-filter {
    right: 0;
    padding-right:2px;
}

JavaScript

$('.tnl-sort, .tnl-filter').each(function() {
    var sf = $(this);
    var th = $(this).closest('th');
    var layers = 0;
    var adjustFade = function() {
        sf.stop()
            .fadeTo('fast',
                    1);
    };
    sf.mouseenter(function(){$(this).addClass('ui-state-hover');});
    sf.mouseleave(function(){$(this).removeClass('ui-state-hover');});
    sf.add(th).mouseenter(function(e){
        layers += 1;
        adjustFade();
    }).mouseleave(function(e){
        layers -= 1;
        adjustFade();
    })            
});
/*$('.tnl-grid-table > thead > tr > th')
    .mouseenter(
      function(e){
          console.log('entering', e.target);
          $(this).find('.tnl-sort, .tnl-filter')
              .stop()
              .fadeTo('fast', $(e.target).is('.tnl-sort, .tnl-filter') ? 1 : .6);
      })
    .mouseleave(
      function(e){
          console.log('out', e.target)
          $(this).find('.tnl-sort, .tnl-filter')
              .stop()
              .fadeTo('fast', .3);
      });
    
                                 */