I have written a custom endless/infinite scroll, which allows the user to load images as they scroll down.
How can i make this code below modular and easily reusable?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Endless Scroll Flicker feed test 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript">
var perpage = 5;
var currentPage = 1;
$(document).ready(function () {
$("#photos").empty();
$("#submit").click(function (event) {
/**********************/
var searchTerm = $("#search").val(); // get the user-entered search term
var URL2 = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e58bbdc1db64c8f63ff7f7460104aa9d&';
//tags=flower&text=&per_page=5&page=10&format=json
var tags = "&tags=" + searchTerm;
var tagmode = "&tagmode=any";
var jsonFormat = "&format=json";
var ajaxURL = URL2 + "per_page=" + perpage + "&page=" + currentPage + tags + tagmode + jsonFormat;
//var ajaxURL= URL+"?"+tags+tagmode+jsonFormat;
$.ajax({
url: ajaxURL,
dataType: "jsonp",
jsonp: "jsoncallback",
success: function (data) {
// $("#photos").empty();
if (data.stat != "fail") {
console.log(data);
//$("#photos").empty();
// $("figure").empty();
$.each(data.photos.photo, function (i, photo) {
// $("<figure></figure>").hide().append('<img src="http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_q.jpg"/>').appendTo("#photos").fadeIn(2000);
var photoHTML = "";
photoHTML += " <img src='";
photoHTML += "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_q.jpg'";
photoHTML += " title='" + photo.title + "'";
photoHTML += "><br>";
$("#photos").append(photoHTML).fadeIn(200);
});
}
}
});
/**************************/
});
$("#photos").scroll(function () {
//var page=1;
//var scrolloffset=20;
// if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
// if($("#scrollbox").scrollTop() == $(document).height() - $("#scrollbox").height()-20) {
// check if we're at the bottom of the scrollcontainer
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight())
//if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10)
{
// If we're at the bottom, retrieve the next page
currentPage++;
$("#submit").click();
//myAJAXfun();
// scrollalert()
// console.log("page "+currentpage);
}
});
});
</script>
<style type="text/css">
/*
#container{ width:400px; margin:0px auto; padding:40px 0; }
#scrollbox{ width:400px; height:300px; overflow:auto; overflow-x:hidden; border:1px solid #f2f2f2; margin-top:150px;}
#container > p{ background:#eee; color:#666; font-family:Arial, sans-serif; font-size:0.75em; padding:5px; margin:0; text-align:right;}*/
#searchBar {
align:center;
position:fixed;
height:65px;
background-color:#777;
border:1px solid red;
width:100%;
top:0;
}
#photos {
position: absolute;
left: 186px;
top: 105px;
width: 376px;
height:550px;
overflow:auto;
}
</style>
</head>
<body>
<div align="center" id="searchBar">
<div>Enter Search Term</div>
<form>
<input type="text" id=search />
<input type="button" id=submit value="Search" />
<input type="reset" value="Clear" />
</form>
</div>
<div id="photos"></div>
</body>
</html>