How can I make my custom infinte scroll more reusable?

Question 1

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>

Question 2

I would wrap your jquery as a plugin. Here's a boilerplate to help you refactor this.

You could then call your function as $('#photos').myInfinteScroll();

Anywhere you want to access dynamic controls I would then inject these into the plugin as options, so something like:

$(document).ready(function() {
 $('#photos').myInfinteScroll({
 searchTerm:"#search",
 submitClick:"#submit"
 });
});

Allowing you to access these elements inside your plugin thus:

var searchTerm = $(plugin.settings.searchTerm).val();

and anywhere where you needed $('#photos') you'd use:

$element

you could also add some defaults thus:

 var defaults = {
 perpage : 5,
 currentPage : 1
 }

and even override them:

$(document).ready(function() {
 $('#photos').myInfinteScroll({
 searchTerm:"#search",
 submitClick:"#submit",
 perpage:6
 });
});

~~(削除) You could then inject your css so this would make your entire function callabled from inside the plugin and allow you to move it/use it on any elements you wish. (削除ここまで)~~

Forget that, just add the css as a dependency, also Jquery would also (obviously) be a dependency.

user31638user31638 · Answer 1 · 2013-11-05 08:31:23Z

I would wrap your jquery as a plugin. Here's a boilerplate to help you refactor this.

You could then call your function as $('#photos').myInfinteScroll();

Anywhere you want to access dynamic controls I would then inject these into the plugin as options, so something like:

$(document).ready(function() {
 $('#photos').myInfinteScroll({
 searchTerm:"#search",
 submitClick:"#submit"
 });
});

Allowing you to access these elements inside your plugin thus:

var searchTerm = $(plugin.settings.searchTerm).val();

and anywhere where you needed $('#photos') you'd use:

$element

you could also add some defaults thus:

 var defaults = {
 perpage : 5,
 currentPage : 1
 }

and even override them:

$(document).ready(function() {
 $('#photos').myInfinteScroll({
 searchTerm:"#search",
 submitClick:"#submit",
 perpage:6
 });
});

~~(削除) You could then inject your css so this would make your entire function callabled from inside the plugin and allow you to move it/use it on any elements you wish. (削除ここまで)~~

Forget that, just add the css as a dependency, also Jquery would also (obviously) be a dependency.

Stack Exchange Network

How can I make my custom infinte scroll more reusable?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

How can I make my custom infinte scroll more reusable?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions