Skip to content

Instantly share code, notes, and snippets.

@sunnykgupta

sunnykgupta/jsbin.AyuGeK.css

Created August 29, 2013 11:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sunnykgupta/6376817 to your computer and use it in GitHub Desktop.
Save sunnykgupta/6376817 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.AyuGeK.css
#tabs{
overflow-x: hidden;
overflow-y: hidden;
width:100px;
height:30px;
white-space:nowrap;
background-color:grey;
}
Raw
jsbin.AyuGeK.html
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
});
</script>
</head>
<body>
<span>
<div id="leftBtn" class="btn pull-left btn-info"><</div>
<div id="tabs" class="pull-left">
This is a test message, this should overflow, lets see if it does. This is a test message, this should overflow, lets see if it does. This is a test message, this should overflow, lets see if it does. This is a test message, this should overflow, lets see if it does. This is a test message, this should overflow, lets see if it does.
<!--<ul style="list-style: none;">
<li style="display:inline"><a href="#tabs-1">Nunc tincidunt</a></li>
<li style="display:inline"><a href="#tabs-2">Proin dolor</a></li>
<li style="display:inline"><a href="#tabs-3">Aenean lacinia</a></li>
<li style="display:inline"><a href="#tabs-4">Nunc tincidunt</a></li>
<li style="display:inline"><a href="#tabs-5">Proin dolor</a></li>
<li style="display:inline"><a href="#tabs-6">Aenean lacinia</a></li>
<li style="display:inline"><a href="#tabs-7">Nunc tincidunt</a></li>
<li style="display:inline"><a href="#tabs-8">Proin dolor</a></li>
<li style="display:inline"><a href="#tabs-9">Aenean lacinia</a></li>
<li style="display:inline"><a href="#tabs-10">Nunc tincidunt</a></li>
<li style="display:inline"><a href="#tabs-11">Proin dolor</a></li>
<li style="display:inline"><a href="#tabs-12">Aenean lacinia</a></li>
</ul>-->
</div>
<div id="rightBtn" class="btn-info btn pull-left disabled">></div>
</span>
</body>
</html>
Raw
jsbin.AyuGeK.js
$(function() {
var scrollAmt = 50;
console.log($('#tabs').scrollLeft());
$('#rightBtn').click(function(){
$('#tabs').scrollLeft($('#tabs').scrollLeft() + scrollAmt);
});
$('#leftBtn').click(function(){
$('#tabs').scrollLeft($('#tabs').scrollLeft() - scrollAmt);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment