1
\$\begingroup\$

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>
Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.