DataSlider | Fixed First Column

by pradipktiwari

HTML

<a class="showhidesidebar" href="javascript:void();"><strong>Show/Hide Sidebar</strong></a>
<div class="main-container clearfix">
  <div class="left-sidebar"> left </div>
  <div class="content-container clearfix">
    <div id="dataContainer" class="contentmain clearfix">
      <div class="data-left">
        <div class="datahead">Pellentesque</div>
        <div class="datacontent">
          <div class="datarow">Pradip<br />
            Pradip<br />
            PK</div>
          <div class="datarow">Pradip Kumar</div>
          <div class="datarow">Pradip</div>
          <div class="datarow">Pradip Kumar</div>
          <div class="datarow">Pradip</div>
          <div class="datarow">Pradip Kumar</div>
          <div class="datarow">Pradip</div>
          <div class="datarow">Pradip Kumar</div>
          <div class="datarow">Pradip</div>
          <div class="datarow">Pradip Kumar</div>
        </div>
      </div>
      <div class="data-right">
        <div id="DataSlider">
          <ul>
            <li>
              <div class="datahead">Pellentesque First</div>
              <div class="datacontent">
                <div class="datarow">Pradip</div>
                <div class="datarow">Pradip Kumar</div>
                <div class="datarow">Pradip</div>
                <div class="datarow">Pradip Kumar</div>
                <div class="datarow">Pradip</div>
                <div class="datarow">Pradip Kumar</div>
                <div class="datarow">Pradip</div>
                <div class="datarow">Pradip Kumar</div>
                <div class="datarow">Pradip</div>
                <div class="datarow">Pradip Kumar</div>
              </div>
            </li>
            <li>
              <div class="datahead">Pellentesque <br />
                PK</div>
              <div class="datacontent">
                <div class="datarow">Pradip</div>
                <div class="datarow">Pellentesque habitant morbi tristique senectus et netus et malesuada...

CSS

body {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:1.4;
}
.clearfix:before, .clearfix:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
}
.clear {
	clear:both;
	height:0;
	margin:0;
	display:block;
	padding:0;
	font-size:0;
	line-height:0;
}
.main-container {
	padding:50px;
}
.left-sidebar {
	width:200px;
	float:left;
	background:#933;
}
.content-container {
	width:100%;
	float:left;
	margin-left:-200px;
}
.content-container .contentmain {
	margin-left:200px;
}
.no-leftsidebar .left-sidebar {
	display:none;
}
.no-leftsidebar .content-container {
	margin-left:0;
	float:none;
	clear:both;
}
.no-leftsidebar .content-container .contentmain {
	margin-left:0;
}
.data-left {
	width:170px;
	float:left;
	position:relative;
	z-index:1;
}
.data-right {
	width:100%;
	float:left;
	margin-left:-170px;
}
.data-right #DataSlider {
	margin-left:170px;
}
#dataContainer {
	position:relative;
	border:1px solid #6A6A6A;
}
.datahead, .datarow {
	padding:5px 20px 5px 5px;
}
.datahead {
	background:#6A6A6A;
	color:#fff;
	font-weight:bold;
}
.data-left .datahead {
	background:#2B2B2B;
}
.datarow.odd {
	background:#EAEAEA;
}
.data-left .datarow {
	background:#edf5ff;
}
.data-left .datarow.odd {
	background:#d0e6ff;
}
#DataSlider {
	position:relative;
}
#DataSlider .mask {
	position:relative;
	overflow:hidden;
}
#DataSlider ul, #DataSlider li {
	margin:0;
	padding:0;
	list-style:none;
}
#DataSlider ul {
	overflow:hidden;
	position:absolute;
}
#DataSlider li {
	float:left;
	border-left:1px solid #fff;
}
#DataSlider ol.pagination-links {
	display:none;
	visibility:hidden;
}
#DataSlider a.prev, #DataSlider a.next {
	display:block;
	position:absolute;
	top:-22px;
	width:40px;
	height:20px;
	background:#900;
	opacity:.4;
	text-decoration:none;
	text-align:center;
	color:#fff;
	line-height:20px;
}
#DataSlider a.prev {
	left:1px;
}
#DataSlider a.next...

JavaScript

/*
 * jQuery Carousel Plugin v1.0
 * http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin
 *
 * Copyright (c) 2010 Richard Scarrott
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Requires jQuery v1.4+
 *
 */

// prototypal inheritance
if (typeof Object.create !== 'function') {
	Object.create = function (o) {
		function F() {}
		F.prototype = o;
		return new F();
	};
}

(function($) {
	// ie alias
	var headache = $.browser.msie && $.browser.version.substr(0,1)<9;

	// carousel
	var Carousel = {
		settings: {
			itemsPerPage: 1,
			itemsPerTransition: 1,
			noOfRows: 1,
			pagination: true,
			nextPrevLinks: true,
			speed: 'normal',
			easing: 'swing'
		},
		init: function(el, options) {
			if (!el.length) {return false;}
			this.options = $.extend({}, this.settings, options);
			this.itemIndex = 0;	
			this.container = el;
			this.runner = this.container.find('ul');
			this.items = this.runner.children('li');
			this.noOfItems = this.items.length;
			this.setRunnerWidth();
			if (this.noOfItems <= this.options.itemsPerPage) {return false;} // bail if there are too few items to paginate
			this.insertMask();
			this.noOfPages = Math.ceil((this.noOfItems - this.options.itemsPerPage) / this.options.itemsPerTransition) + 1;
			if (this.options.pagination) {this.insertPagination();}
			if (this.options.nextPrevLinks) {this.insertNextPrevLinks();}
			this.updateBtnStyles();
		},
		insertMask: function() {
			this.runner.wrap('<div class="mask" />');
			this.mask = this.container.find('div.mask');

			// set mask height so items can be of varying height
			var maskHeight = this.runner.outerHeight(true);
			this.mask = this.container.find('div.mask');
			this.mask.height(maskHeight);
		},
		setRunnerWidth: function() {
			this.noOfItems = Math.round(this.noOfItems / this.options.noOfRows);
			var width =  this.items.outerWidth(true) *...