Skip to content

Instantly share code, notes, and snippets.

@joshvermaire

joshvermaire/scroll.html

Created May 20, 2014 18:46
Show Gist options
  • Save joshvermaire/ea2c4f4bdf439b9c3c2e to your computer and use it in GitHub Desktop.
Save joshvermaire/ea2c4f4bdf439b9c3c2e to your computer and use it in GitHub Desktop.
Download ZIP
Carousel Demo
Raw
scroll.html
<html>
<head>
<title></title>
</head>
<body>
<div id='click' style='position: fixed; right: 50px; height: 50px; top: 50px; z-index: 2;'>Click Me</div>
<div id='container' style='height:200px;overflow-x:scroll; overflow-y:hidden;'>
<div class="scroll" style='height: 200px;'></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var $click = $('#click');
var documentWidth = document.body.clientWidth;
var divWidth = 0;
var $scroll = $('.scroll');
var $scrollParent = $scroll.parent();
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
$('body').on('click', '#click', function() {
$scroll.append('<div style="height: 200px; width: 100px; background: ' + getRandomColor() + '; float:left;"></div>')
divWidth += 100;
if (divWidth > documentWidth) {
$scroll.width(divWidth);
$scrollParent.animate({scrollLeft: divWidth})
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment