Skip to content

Instantly share code, notes, and snippets.

@glumn

glumn/index.html

Created December 4, 2014 17:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save glumn/ab42dfa276cd595273f0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save glumn/ab42dfa276cd595273f0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/mousewheel/3.1.9/jquery.mousewheel.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
header {
position: relative;
height: 30px;
border-top: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
border-right: 1px solid #DBDBDB;
background-color: #F2F2F2;
-webkit-box-shadow: inset 0px -8px 8px -4px rgba(0, 0, 0, 0.05);
white-space: nowrap;
overflow: hidden;
}
header .tab-container {
position: absolute;
overflow: hidden;
padding: 0 10px;
}
header .tab {
display: inline-block;
position: relative;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #FAFAFA;
border-right: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
z-index: 0;
font-weight: 600;
color: #909090;
cursor: pointer;
}
header .tab:before,
header .tab:after {
position: absolute;
top: 4px;
width: 10px;
height: 31px;
content: " ";
background-color: #FAFAFA;
z-index: -1;
-webkit-box-shadow: inset 0px -8px 8px -4px rgba(0, 0, 0, 0.05);
}
header .tab:before {
transform: rotate(22deg);
left: 0;
margin-left: -7px;
border-left: 1px solid;
border-color: #C0C0C0;
}
header .tab:after {
transform: rotate(-22deg);
right: 0;
margin-right: -7px;
border-right: 1px solid;
border-color: #C0C0C0;
}
header .tab.active {
color: #b51233;
background-color: white;
-webkit-box-shadow: 8px 0 8px -4px rgba(0, 0, 0, 0.05), -8px 0 8px -4px rgba(0, 0, 0, 0.05);
z-index: 10;
}
header .tab.active:after,
header .tab.active:before {
background-color: white;
border-color: #C0C0C0;
}
header .tab:not(.active) {
-webkit-box-shadow: inset 0px -8px 8px -4px rgba(0, 0, 0, 0.05);
}
header .tab:not(.active):after,
header .tab:not(.active):before {
-webkit-box-shadow: inset 0px -14px 8px -4px rgba(0, 0, 0, 0.05);
}
body {
padding: 0 50px;
}
table {
width: 100%;
height: 200px;
border: 1px solid #DBDBDB;
background-color: #F2F2F2;
font-family: 'Verdana';
}
</style>
</head>
<body>
<header>
<div class="tab-container">
<div class="tab ">
<span>1</span>
</div>
<div class="tab ">
<span>2</span>
</div>
<div class="tab active">
<span>3</span>
</div>
<div class="tab">
<span>4</span>
</div>
<div class="tab">
<span>5</span>
</div>
<div class="tab">
<span>6</span>
</div>
<div class="tab">
<span>7</span>
</div>
<div class="tab">
<span>8</span>
</div>
</div>
</header>
<table>
</table>
<script id="jsbin-javascript">
var initClicTableTabs = function() {
var previousScrollLeft = 0;
// -----------------
// MOUSEWHEEL EVENT
// -----------------
$("header").on("mousewheel", function(event) {
var newScrollLeft;
var maxScroll = -1 * ($(".tab-container", this).outerWidth() - $(this).outerWidth());
if(event.deltaY > 0) {
newScrollLeft = Math.max(0, previousScrollLeft - 50);
$(".tab-container", this).css("left", -1 * Math.max(maxScroll,newScrollLeft));
}
else {
newScrollLeft = Math.min(-1 * maxScroll,previousScrollLeft + 50);
$(".tab-container", this).css("left", -1 * newScrollLeft);
}
previousScrollLeft = newScrollLeft;
});
// Clic on Tab
$("header").on("click", ".tab", function() {
$(".tab.active", $("header")).removeClass("active");
$(this).addClass('active');
});
};
initClicTableTabs();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<script src="//cdn.jsdelivr.net/mousewheel/3.1.9/jquery.mousewheel.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>
<div class="tab-container">
<div class="tab ">
<span>1</span>
</div>
<div class="tab ">
<span>2</span>
</div>
<div class="tab active">
<span>3</span>
</div>
<div class="tab">
<span>4</span>
</div>
<div class="tab">
<span>5</span>
</div>
<div class="tab">
<span>6</span>
</div>
<div class="tab">
<span>7</span>
</div>
<div class="tab">
<span>8</span>
</div>
</div>
</header>
<table>
</table>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">
@textBaseColor: #101010;
@textBaseColor50: lighten(@textBaseColor, 50%);
@mainColor: #b51233;
@headerInnerShadow: inset 0px -8px 8px -4px rgba(0,0,0,.05);
header {
position:relative;
height:30px;
border-top: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
border-right: 1px solid #DBDBDB;
background-color: #F2F2F2;
-webkit-box-shadow: @headerInnerShadow;
white-space: nowrap;
overflow:hidden;
.tab-container {
position:absolute;
overflow: hidden;
padding: 0 10px;
}
.tab {
display:inline-block;
position:relative;
width:200px;
height:30px;
line-height:30px;
text-align:center;
background-color: #FAFAFA;
border-right:1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
z-index:0;
font-weight:600;
color: @textBaseColor50;
cursor:pointer;
//------------
// BORDERS
//------------
&:before, &:after {
position: absolute;
top:4px;
width: 10px;
height:31px;
content: " ";
background-color: #FAFAFA;
z-index:-1;
-webkit-box-shadow: @headerInnerShadow;
}
&:before {
transform: rotate(22deg);
left: 0;
margin-left:-7px;
border-left: 1px solid;
border-color: #C0C0C0;
}
&:after {
transform: rotate(-22deg);
right:0;
margin-right:-7px;
border-right: 1px solid;
border-color:#C0C0C0;
}
// --------------
// ACTIVE STATE
// --------------
&.active {
color: @mainColor;
background-color: white;
-webkit-box-shadow:8px 0 8px -4px rgba(0,0,0,.05), -8px 0 8px -4px rgba(0,0,0,.05);
&:after, &:before {
background-color:white;
border-color: #C0C0C0;
}
z-index:10;
}
&:not(.active) {
-webkit-box-shadow: @headerInnerShadow;
&:after, &:before {
-webkit-box-shadow: inset 0px -14px 8px -4px rgba(0,0,0,.05);
}
}
}
}
body {
padding: 0 50px;
}
table {
width:100%;
height:200px;
border: 1px solid #DBDBDB;
background-color: #F2F2F2;
font-family: 'Verdana';
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var initClicTableTabs = function() {
var previousScrollLeft = 0;
// -----------------
// MOUSEWHEEL EVENT
// -----------------
$("header").on("mousewheel", function(event) {
var newScrollLeft;
var maxScroll = -1 * ($(".tab-container", this).outerWidth() - $(this).outerWidth());
if(event.deltaY > 0) {
newScrollLeft = Math.max(0, previousScrollLeft - 50);
$(".tab-container", this).css("left", -1 * Math.max(maxScroll,newScrollLeft));
}
else {
newScrollLeft = Math.min(-1 * maxScroll,previousScrollLeft + 50);
$(".tab-container", this).css("left", -1 * newScrollLeft);
}
previousScrollLeft = newScrollLeft;
});
// Clic on Tab
$("header").on("click", ".tab", function() {
$(".tab.active", $("header")).removeClass("active");
$(this).addClass('active');
});
};
initClicTableTabs();
</script></body>
</html>
Raw
jsbin.lacod.css
header {
position: relative;
height: 30px;
border-top: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
border-right: 1px solid #DBDBDB;
background-color: #F2F2F2;
-webkit-box-shadow: inset 0px -8px 8px -4px rgba(0, 0, 0, 0.05);
white-space: nowrap;
overflow: hidden;
}
header .tab-container {
position: absolute;
overflow: hidden;
padding: 0 10px;
}
header .tab {
display: inline-block;
position: relative;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #FAFAFA;
border-right: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
z-index: 0;
font-weight: 600;
color: #909090;
cursor: pointer;
}
header .tab:before,
header .tab:after {
position: absolute;
top: 4px;
width: 10px;
height: 31px;
content: " ";
background-color: #FAFAFA;
z-index: -1;
-webkit-box-shadow: inset 0px -8px 8px -4px rgba(0, 0, 0, 0.05);
}
header .tab:before {
transform: rotate(22deg);
left: 0;
margin-left: -7px;
border-left: 1px solid;
border-color: #C0C0C0;
}
header .tab:after {
transform: rotate(-22deg);
right: 0;
margin-right: -7px;
border-right: 1px solid;
border-color: #C0C0C0;
}
header .tab.active {
color: #b51233;
background-color: white;
-webkit-box-shadow: 8px 0 8px -4px rgba(0, 0, 0, 0.05), -8px 0 8px -4px rgba(0, 0, 0, 0.05);
z-index: 10;
}
header .tab.active:after,
header .tab.active:before {
background-color: white;
border-color: #C0C0C0;
}
header .tab:not(.active) {
-webkit-box-shadow: inset 0px -8px 8px -4px rgba(0, 0, 0, 0.05);
}
header .tab:not(.active):after,
header .tab:not(.active):before {
-webkit-box-shadow: inset 0px -14px 8px -4px rgba(0, 0, 0, 0.05);
}
body {
padding: 0 50px;
}
table {
width: 100%;
height: 200px;
border: 1px solid #DBDBDB;
background-color: #F2F2F2;
font-family: 'Verdana';
}
Raw
jsbin.lacod.js
var initClicTableTabs = function() {
var previousScrollLeft = 0;
// -----------------
// MOUSEWHEEL EVENT
// -----------------
$("header").on("mousewheel", function(event) {
var newScrollLeft;
var maxScroll = -1 * ($(".tab-container", this).outerWidth() - $(this).outerWidth());
if(event.deltaY > 0) {
newScrollLeft = Math.max(0, previousScrollLeft - 50);
$(".tab-container", this).css("left", -1 * Math.max(maxScroll,newScrollLeft));
}
else {
newScrollLeft = Math.min(-1 * maxScroll,previousScrollLeft + 50);
$(".tab-container", this).css("left", -1 * newScrollLeft);
}
previousScrollLeft = newScrollLeft;
});
// Clic on Tab
$("header").on("click", ".tab", function() {
$(".tab.active", $("header")).removeClass("active");
$(this).addClass('active');
});
};
initClicTableTabs();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment