Test post after a long time

i want to see the post

Table with fixed header and fixed columns

Usually we need a fixed header when showing big table.
In order to keep track of which column it was you need the header <thead> fixed.

Sometimes you even need the columns fixed in case you have a big horizontal scroll on table, i.e. when you have more than 10-15 columns.

Usually we duplicate the header <thead> and make it position fixed, but that causes irregularities in the header and table columns width.

Here is a solution to that:

jsFiddle Demo

HTML

<div class="tblScroll" id="fixedTable1">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
          <th>Firstname 2</th>
          <th>Lastname 2</th>
          <th>Email 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>          
          <td>John 2</td>
          <td>Doe 2</td>
          <td>john@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
          <td>John 2</td>
          <td>Doe 2</td>
          <td>john@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
          <td>John 2</td>
          <td>Doe 2</td>
          <td>john@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
          <td>John 2</td>
          <td>Doe 2</td>
          <td>john@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
          <td>John 2</td>
          <td>Doe 2</td>
          <td>john@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
          <td>Mary 2</td>
          <td>Moe 2</td>
          <td>mary@example.com 2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <td>July 2</td>
          <td>Dooley 2</td>
          <td>july@example.com 2</td>
        </tr>
      </tbody>
    </table>  
</div> 

CSS

body{padding-bottom:3000px; transform: translateZ(0);
 backface-visibility: hidden;
 perspective: 1000;}

.clearfix:before,
.clearfix:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

.tblScrollWrap {
  overflow:auto;
  max-width:100%;margin-bottom:20px;margin:0;
} 
.tblScroll {overflow:auto;} 
.tblScroll .table {
  max-width:initial;
  min-width:100%;
  width:auto;
  margin-bottom:0;
  border:none;
  
} 
.tblScroll > .table {
  border-collapse: separate;
}
.table td {
   min-width:100px; 
   padding:10px;
}
.table th {
  background:#ccc;
     padding:10px;
}

.tblScroll .table-bordered > tbody > tr > td, .tblScroll .table-bordered > tbody > tr > th, .tblScroll .table-bordered > tfoot > tr > td, .tblScroll .table-bordered > tfoot > tr > th, .tblScroll .table-bordered > thead > tr > td, .tblScroll .table-bordered > thead > tr > th {
  border:none;
  border-right:1px solid #ddd;
  border-bottom:1px solid #ddd;
}
.table td {
  background:#fff;
}
.fxHead, .fxCol {
  position:relative;
  -webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
.fxHead {
  z-index:20;
}
.opacityTransition {
   transition:opacity 200ms ease; 
}
.fxCol {
  z-index:19;
}
.fxHead.fxCol {
  z-index:21;
}
.fxHead, .fxCol {
}

.tblHorScroll {
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  transform:translate(0,-100%);
  -ms-transform:translate(0,-100%);
}
.tblHorWidth{
  height:1px;
}

JS

if("document" in self){if(!("classList" in document.createElement("_"))){(function(j){"use strict";if(!("Element" in j)){return}var a="classList",f="prototype",m=j.Element[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p<o;p++){if(p in this&&this[p]===q){return p}}return -1},n=function(o,p){this.name=o;this.code=DOMException[o];this.message=p},g=function(p,o){if(o===""){throw new n("SYNTAX_ERR","An invalid or illegal string was specified")}if(/\s/.test(o)){throw new n("INVALID_CHARACTER_ERR","String contains an invalid character")}return c.call(p,o)},d=function(s){var r=k.call(s.getAttribute("class")||""),q=r?r.split(/\s+/):[],p=0,o=q.length;for(;p<o;p++){this.push(q[p])}this._updateClassName=function(){s.setAttribute("class",this.toString())}},e=d[f]=[],i=function(){return new d(this)};n[f]=Error[f];e.item=function(o){return this[o]||null};e.contains=function(o){o+="";return g(this,o)!==-1};e.add=function(){var s=arguments,r=0,p=s.length,q,o=false;do{q=s[r]+"";if(g(this,q)===-1){this.push(q);o=true}}while(++r<p);if(o){this._updateClassName()}};e.remove=function(){var t=arguments,s=0,p=t.length,r,o=false,q;do{r=t[s]+"";q=g(this,r);while(q!==-1){this.splice(q,1);o=true;q=g(this,r)}}while(++s<p);if(o){this._updateClassName()}};e.toggle=function(p,q){p+="";var o=this.contains(p),r=o?q!==true&&"remove":q!==false&&"add";if(r){this[r](p)}if(q===true||q===false){return q}else{return !o}};e.toString=function(){return this.join(" ")};if(b.defineProperty){var l={get:i,enumerable:true,configurable:true};try{b.defineProperty(m,a,l)}catch(h){if(h.number===-2146823252){l.enumerable=false;b.defineProperty(m,a,l)}}}else{if(b[f].__defineGetter__){m.__defineGetter__(a,i)}}}(self))}else{(function(){var b=document.createElement("_");b.classList.add("c1","c2");if(!b.classList.contains("c2")){var c=function(e){var d=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(h){var g,f=arguments.length;for(g=0;g<f;g++){h=arguments[g];d.call(this,h)}}};c("add");c("remove")}b.classList.toggle("c3",false);if(b.classList.contains("c3")){var a=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(d,e){if(1 in arguments&&!this.contains(d)===!e){return e}else{return a.call(this,d)}}}b=null}())}}; 



var opts = {
  container: '#fixedTable1',
  header: 'fixed',
  topOffset: 50,
  fixedcolumns: 2,
  sizepolling: 200
}

function fixedTable(opts) {
  var thisTable = {};
  thisTable.preScroll = null;
  thisTable.scrollStopEvents = [];
  thisTable.scrollHorStopEvents = [];
  var defaults = {
    header: 'fixed',
    fixedcolumns:0,
    topOffset: 0
  };

  var init = function() {

    for(x in defaults) {
      if(! opts.hasOwnProperty(x)) {
        opts[x] = defaults[x];
      }
    }

    detectTable();
    if(opts.header.toLowerCase() === 'fixed') {
      initiateFixedHeader();
    }
    if(opts.fixedcolumns > 0) {
      initiateFixedColumns();
    }

    handleTableEvents();
  };

  var handleTableEvents = function() {
    thisTable.container.addEventListener("scroll",syncScroll);
    thisTable.container.addEventListener("scroll",horScrollListener);
    if(typeof thisTable.scrollCont != 'undefined') {
      thisTable.scrollCont.addEventListener("scroll",syncScroll);
    }
  };

  var horScrolldelay = 50;
  var horScrolltimeout = null;
  var horScrollListener = function(e) {
    clearTimeout(horScrolltimeout);
    horScrolltimeout = setTimeout(function(){
      horizontalScrollStopDispatcher();
    },horScrolldelay);
  };
    var syncScroll = function(e) {
      if(thisTable.preScroll != null && thisTable.preScroll != e.target){return;}
      if(thisTable.preScroll == null){
        thisTable.onHorTableScrollStopped(function() {
          thisTable.preScroll = null;
        })
      }
      thisTable.preScroll = e.target;
      var scrollLeft = (typeof e.explicitOriginalTarget != 'undefined')? parseInt(e.explicitOriginalTarget.scrollLeft) : parseInt(e.srcElement.scrollLeft);
      if(e.target == thisTable.container) {
        thisTable.scrollCont.scrollLeft = e.target.scrollLeft;
        positionFixedCols(e.target.scrollLeft);
      }
      if(e.target == thisTable.scrollCont) {
        positionFixedCols(e.target.scrollLeft);
        thisTable.container.scrollLeft = e.target.scrollLeft
      }
    };
    var positionFixedCols = function(scrollLeft) {
      for(var i = 1; i <= opts.fixedcolumns; i++) {
        var colHead = thisTable.container.querySelectorAll('table > thead > tr th:nth-child('+i+')');
        var colBody = thisTable.container.querySelectorAll('table > tbody > tr td:nth-child('+i+')');
        [].forEach.call(colHead,function(element, index, array) {
          element.style.transform = setRule(element.style.transform,'translateX',(scrollLeft+'px'));
          if(! element.classList.contains('fxCol')) {
            element.classList.add('fxCol');
          }
          if(prefix.lowercase == 'ms') {
            element.style.msTransform = setRule(element.style.msTransform,'translateX',(scrollLeft+'px'));
          }
        });

        [].forEach.call(colBody,function(element, index, array) {
         element.style.transform = setRule(element.style.transform,'translateX',(scrollLeft+'px'));
          if(! element.classList.contains('fxCol')) {
            element.classList.add('fxCol');
          }
          if(prefix.lowercase == 'ms') {
            element.style.msTransform = setRule(element.style.msTransform,'translateX',(scrollLeft+'px'));
          }
        });

      }
    };
    var initiateFixedColumns = function() {
      thisTable.scrollCont = document.createElement('div');
      thisTable.scrollCont.className = "tblHorScroll";
      thisTable.scrollWidthCont = document.createElement('div');
      thisTable.scrollWidthCont.className = "tblHorWidth";

      thisTable.scrollWidthCont.style.width = thisTable.table.getBoundingClientRect().width + 'px';

      thisTable.scrollCont.appendChild(thisTable.scrollWidthCont);
      var parCont = thisTable.parentNode;
       thisTable.container.parentNode.insertBefore(thisTable.scrollCont, thisTable.container.nextSibling);
    };

  var isIE = (function() {
      var myNav = navigator.userAgent.toLowerCase();
      if(myNav.indexOf('msie') != -1) {
        var ieVer =  parseInt(myNav.split('msie'))[1];
        if(myNav.indexOf('msie 10') > -1 || myNav.indexOf('msie 9') > -1)  {return true}
      }
      return false;
    })();

    var prefix = (function () {
      var styles = window.getComputedStyle(document.documentElement, ''),
        pre = (Array.prototype.slice
          .call(styles)
          .join('') 
          .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
        )[1],
        dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
      return {
        dom: dom,
        lowercase: pre,
        css: '-' + pre + '-',
        js: pre[0].toUpperCase() + pre.substr(1)
      };
    })();
 
  
  var detectTable = function() {
    if(typeof opts.container == 'undefined' || opts.container.trim() == '') {
      throw "Container missing"; 
    }else {
      thisTable.container = document.querySelector(opts.container);
      if(typeof thisTable.container == "undefined" || thisTable.container === null) {
        throw "Container missing"; 
      }
      thisTable.table = thisTable.container.querySelector('table');
      if(typeof thisTable.table == "undefined" || thisTable.table === null) {
        throw opts.container + " does not contain a table element"; 
      }
      thisTable.thead = thisTable.table.querySelector('thead');
      thisTable.tbody = thisTable.table.querySelector('tbody');
    }
  };

  var setRule = function(rule,prop,val) {
    rule = rule || '';
    var str = rule+'';
    var regex = new RegExp(prop +"\\(.*?\\)","gi");
    if (str.match(regex) != null) {
      str = str.replace(regex,prop+'('+val+')')
    }else {
      str += ' ' + (prop+'('+val+')');
    }
    return str;
  } 

  
  
  thisTable.onWindowScrollStopped = function(fnc) {
    thisTable.scrollStopEvents.push(fnc);
  };

  thisTable.onHorTableScrollStopped = function(fnc) {
    thisTable.scrollHorStopEvents.push(fnc);
  };

  var verticalScrollStopDispatcher = function() {
    for(var i = 0; i <  thisTable.scrollStopEvents.length; i++) {
      thisTable.scrollStopEvents[i].call();
    }
  }
  var horizontalScrollStopDispatcher = function() {
    for(var i = 0; i <  thisTable.scrollHorStopEvents.length; i++) {
      thisTable.scrollHorStopEvents[i].call();
    }
  }

  var scrolldelay = 500;
  var scrolltimeout = null;

  var winScrollListener = function() {
    clearTimeout(scrolltimeout);
    scrolltimeout = setTimeout(function(){
        verticalScrollStopDispatcher();
    },scrolldelay);
  }

  var moveHeader = function(e) {
    var tableY = (typeof thisTable.table.getBoundingClientRect().y != 'undefined')? thisTable.table.getBoundingClientRect().y : thisTable.table.getBoundingClientRect().top;
    var tableHeight = thisTable.table.getBoundingClientRect().height;
    if(tableY < 0) {
      applyHeaderStyles(tableY * -1);
    }
    if(tableY > 0) {
      applyHeaderStyles(0);
    }
    thisTable.prevY = tableY;
  };

  var applyHeaderStyles = function(scrollTop) {
    var headers = thisTable.table.querySelectorAll('thead th');
    [].forEach.call(headers,function(element, index, array) {
      if(isIE) {
        element.style.opacity = 0;
        element.classList.add('opacityTransition');  
      }
      element.style.transform = setRule(element.style.transform,'translateY',( scrollTop+'px'));
      if(! element.classList.contains('fxHead')) {
        element.classList.add('fxHead'); 
      }
      if(prefix.lowercase == 'ms') {
        element.style.msTransform = setRule(element.style.msTransform,'translateY',(scrollTop+'px'));
      }
    });
  };
  var initiateFixedHeader = function() {
    window.addEventListener("scroll",moveHeader);
    window.addEventListener("scroll",winScrollListener);
    if(isIE) {
       thisTable.onWindowScrollStopped(function(){
        var headers = thisTable.table.querySelectorAll('thead th.opacityTransition');
        [].forEach.call(headers,function(element, index, array) {
          
          setTimeout(function(){
            element.style.opacity = 1;
            setTimeout(function(){
              element.classList.remove('opacityTransition');    
            },200);
          },500)
        });
      }); 
    }
  };

  init();

  return {
    destroy : 'empty'
  }

}

var b = fixedTable(opts);

Create a fixed and fluid width two column layout

In order to create a page which will have a fixed side bar and a fluid width container, we need to follow the below mentioned HTML/CSS pattern.

HTML

<div id="container" class="clearfix">
<div class="sidebar">

</div>

<div class="mainarea">

</div>
</div>

CSS

#mainarea {

        overflow: hidden;

}

.clearfix::before, .clearfix::after {

             content: ' 0020';

             display: block;

             overflow: hidden;

             visibility: hidden;

             width: 0;

             height: 0;

}

.clearfix {

1. zoom: 1;

}

.clearfix::before, .clearfix::after {

             content: ' 0020';

        display: block;

             overflow: hidden;

             visibility: hidden;

             width: 0;

             height: 0;

}

.customizer {

1. width: 265px;
2. float: left;
3. background: #444;
4. margin-right: -100%;
5. color: #F7F7F7;
6. position: relative;
7. z-index: 2;
8. padding-bottom: 1000px;
9. margin-bottom: -1000px;

}

.preview_area {

1. width: 100%;
2. float: left;
3. background: white;
4. padding-bottom: 1000px;
5. margin-bottom: -1000px;

}

How to make two column with same height

HTML 

<div id="wrapper">
      <div class="left">
            left <br />left <br />left <br />
      </div>
      <div class="right">
            right<br />left <br />left <br />left <br />left <br />left <br />left <br />
       </div>
       <div class="clear"></div>
</div>

CSS 

*{padding:0px; margin:0px;}
#wrapper{overflow:hidden;}
.left{background:#333;width:250px;float:left;margin-bottom:-2000px;padding-bottom:2000px;} .right{background:red;width:750px;float:left;margin-bottom:-2000px;padding-bottom:2000px;} .clear{clear:both;}

jSlickmenu: jQuery plugin using CSS3

The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3features likes rotation and shadows, this plugin can really lift up your design. It's fairly easy to use, highly customizable and pretty cool (and fun!) to see.


HOW TO USE:
Put this code in <head> tag:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jslickmenu.js"></script>
<link rel="stylesheet" type="text/css" href="css/slickmenu.css"/>

Now, the menu HTML needs to be as follows:

<div id="menu">

   <ul>

      <li><a href="[LINK]">

         <img src="[IMG]" alt="[TITLE]" />

      </a></li>

      <!-- more menu items -->

   </ul>

</div>

Note The alt attribute of the image will be used as title when the user hovers the image.

When that's all set, you can execute the following JavaScript statement to enable the plugin on the just created menu:

$("#menu").jSlickmenu();

OPTIONS:
speed - Any of the jQuery speed values. Speed for the animation when hovering.
fadeopacity - Any of the jQuery opacity values. Opacity of the siblings when hovering.
infomargin - Integer. Margin (in px) for the infobox to appear above the image.
leftmargin - Integer. Margin (in px) for the menu items seperated from each other.
css3rotate - Boolean. Whether the menu items should be rotated using CSS3.
css3shadow - String. The CSS3 box-shadow property.
css3borderradius - Integer. The size of the border radius property.
borderneutral - Integer. Width of the border size in px when the user is not hovering.
borderhover - Integer. Width of the border size in px when the user is hovering.


VIEW DEMO
DOWNLOAD

Horizontal accordion using CSS3 (Cross browser)

Now you can build a horizontal accordion just by using CSS3 transition effects, and filters for IE. We will continue to use ":hover" instead of ":target" pseudo class to cater Internet Explorer and other usability issues.

Accordion Markup

<div class="horizontalaccordion">
<ul>
    <li>
        <h3>Heading 1</h3>
        <div>Content For Panel 1.</div>
    </li>
    <li>
        <h3>Heading 2</h3>
        <div>Content For Panel 2</div>
    </li>
    <li>
        <h3>Heading 3</h3>
        <div>Content For Panel 3.</div>
    </li>
    <li>
        <h3>Heading 4</h3>
        <div>Content For Panel 4</div>
    </li>
</ul>
</div>
Note:
* Each "li" element inside unordered list represents a panel
* Each "h3" element inside a list item represents panel head
* Each "div" element inside a list item represents panel content


Styling Accordion Structure

.horizontalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    height: 300px;
}

.horizontalaccordion>ul>li {
    display:block;
    overflow: hidden;
    float:left;
    margin: 0;
    padding: 0;
    list-style:none;
    width:40px;
    height: 300px;

    /* Decorative CSS */
    background:#f0f0f0;
}

.horizontalaccordion>ul>li>h3 {
    display:block;
    float:left;
    margin: 0;
    padding:10px;
    height:19px;
    width:280px;

    /* Decorative CSS */
    border-left:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    background:#cccccc;

    /* CSS3 Transform Rotate & Translate */
    white-space:nowrap;
    -moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */
    -o-transform-origin: 0 100%;
    -webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    -webkit-transform-origin: 0 100%;
    transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    transform-origin: 0 100%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"; /* IE8 */

}

.horizontalaccordion>ul>li>div {
    display:none;
    float:left;
    overflow: auto;
    position:relative;
    top:-40px;
    left:40px;
    *top:0px;       /* IE7 Hack */
    *left:0px;      /* IE7 Hack */
    margin:0;
    width:320px;
    height:280px;
    padding:10px;
}
Note:
*Child Combinators
I have purposely used child combinators to make sure that CSS applies only to the elements used in creating accordion structure and not inherited by elements that are used in accordion content.
*Default State: Panels
Since we are not using ":target" pseudo class, we are not able to specify accordion’s state. That’s why we have to set all panels in collapsed state by default. This is done by setting width of "li" equal to the height (which becomes width after rotation) of "h3" elements (i.e., total width of each panel is equal to the width of its head).
*Panel Head
This is the trickiest part of horizontal accordion. Note that height specified here will become width and width will become height after rotating the panel head. So the total height (which will become width after transform) of "h3" element is calculated by adding height, padding-top, padding-bottom and height of the border (if any).  Transformation is done using CSS3 transform property and filter for Internet Explorer. In addition to rotating the h3 element, we are also adjusting its position using "translate" so that panel’s content area will adjust its position accordingly.
*Panel Content
For panel content "div", you may want to note that overflow is set to "auto". This will add scrolling bar(s) if content doesn’t fit inside the content area. Total width (width + padding-left + padding-right) of the content area is determined by using this formula: accordion-width - (number-of-panels x width-of-panel-head). Also note that we have to keep content panel’s position relative to its head (i.e., "h3" element) and adjust the position here as well. Since Internet Explorer 7’s behavior during transformations is different from other browsers, I have used a little hack to accommodate its position.


Styling Accordion Behavior

.horizontalaccordion>ul>li:hover {

    overflow: hidden;

    width: 380px;

}

.horizontalaccordion:hover>ul>li:hover>div {

    display:block;

}

.horizontalaccordion:hover>ul>li:hover>h3 {

    /* Decorative CSS */

    color:#fff;

    background:#000000;

}

.horizontalaccordion>ul>li>h3:hover {

        cursor:pointer;

}

Note:

*Opening Panel With Hover
In order to add behavior to our accordion – all we need to do is increase width of the Panel ("li" element) when mouse is moved over it. Panel width is determined by using this formula: accordion-width – ((number-of-panels – 1) x width-of-panel-head). We also need to "display" content panel’s as "block" when mouse is moved its head.
*Highlighting Current Panel Head
We have highlighted current or open panel by changing the background property of the "h3" element when mouse moves over "li". It is important to do this on "li:hover" instead of "h3:hover", because you want to highlight panel head even mouse is hovering over its content.
*Changing Mouse Pointer
Since we are not using anchors, we have changed mouse pointer using CSS when mouse hovers over "h3" element.


Adding Transition Effect

transition: width 0.3s ease-in-out;

-moz-transition: width 0.3s ease-in-out;

-webkit-transition: width 0.3s ease-in-out;

-o-transition: width 0.3s ease-in-out;

VIEW DEMO
DOWNLOAD

Difference between pixel and em (px vs em)

Lots of web developer have this question what is the difference between pixel and em unit in CSS. Well it can be simply explained by a simple px to em conversion formula.

1 ÷ parent font size (px) × required pixels = em equivalent

Here is a px to em conversion table:

pxfont-size	emequivalent	* Roundedto 3dp	1pxin ems	Notes
11	0.689	*	0.091
12	0.750		0.083
13	0.814	*	0.077
14	0.875		0.071
15	0.938	*	0.067
16	1.000		0.063	Browser standard default
17	1.064	*	0.059
18	1.125		0.056
19	1.188	*	0.053
20	1.250		0.050
21	1.313	*	0.048
22	1.375		0.046
23	1.438	*	0.044
24	1.500		0.042
25	1.563	*	0.040
26	1.625		0.039
27	1.688	*	0.037
28	1.750		0.036
29	1.813	*	0.035
30	1.875		0.033