Skip to content

Instantly share code, notes, and snippets.

@keriati

keriati/scrolling.html

Created August 20, 2012 19:59
Show Gist options
  • Save keriati/3407275 to your computer and use it in GitHub Desktop.
Save keriati/3407275 to your computer and use it in GitHub Desktop.
Download ZIP
Basic scrolling menu example
Raw
scrolling.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.hide {
display: none;
}
</style>
</head>
<body>
<ul id="middleNavigation">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
(function () {
var myNav = $("#middleNavigation"),
count = myNav.children("li").length,
offset = 0,
shown = 3;
if (count > shown) {
myNav.find("li:gt(" + (shown - 1) + ")").addClass('hide');
var prevBtn = $("<div>prev</div>").click(function () {
console.log('prev');
if (offset > 0) {
offset--;
console.log(offset, (offset + shown));
myNav.find('li').addClass('hide').slice(offset, (offset + shown)).removeClass('hide');
}
});
var nextBtn = $("<div>next</div>").click(function () {
if (offset + shown < count) {
offset++
console.log(offset, (offset + shown));
myNav.find('li').addClass('hide').slice(offset, (offset + shown)).removeClass('hide');
}
});
$('body').append(nextBtn);
$('body').prepend(prevBtn);
}
})()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment