Skip to content

Instantly share code, notes, and snippets.

@SimplGy

SimplGy/infiniteBacon-start.html

Last active August 29, 2015 14:20
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 SimplGy/850ca58f33f28f301125 to your computer and use it in GitHub Desktop.
Save SimplGy/850ca58f33f28f301125 to your computer and use it in GitHub Desktop.
Download ZIP
FRP Infinite Scroll with Bacon.js -- Starting File
Raw
infiniteBacon-start.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FRP Infinite Scroll using Bacon.js</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.53/Bacon.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Helvetica, arial, freesans, clean, sans-serif;
}
.phonebook {
position: relative;
/* draw fake row bg colors with css */
background-image: linear-gradient(#f3f3f3 50%, transparent 50%, transparent);
background-size: 60px 60px; /* twice the height of a row, since the pattern spans two rows */
margin: 0;
padding: 0;
list-style: none;
}
.phonebook li {
position: absolute;
height: 30px;
line-height: 30px;
padding: 0 10px;
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<ul id="Phonebook" class="phonebook"></ul>
<script>
(function(){
var totalResults = 10000;
var rowHeight = 30;
var phonebookEl = document.getElementById('Phonebook');
phonebookEl.style.height = totalResults * rowHeight + "px";
// ...
})();
</script>
</body>
</html>
@SimplGy
Copy link
Author

SimplGy commented May 1, 2015

Intro code for the article: http://www.simple.gy/blog/infinite-bacon/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment