JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!--http://stackoverflow.com/questions/19648862/how-can-i-fix-the-endless-scroll-so-it-can-do-endless-infinite-scroll-->
<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>

CSS

#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;
}

JavaScript

function myAJAXfun(page) {
    var searchTerm = $("#search").val(); // get the user-entered search term
    //alert(searchTerm);
    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 perpage = 5;
    currentpage = page;
    console.log("currentpage in func " + currentpage);
    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) {
            if (data.stat != "fail") {
                console.log(data);
                $("#photos").empty();
                $.each(data.photos.photo, function (i, photo) {
                    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>";
                    console.log(photoHTML);
                    $("#photos").append(photoHTML).fadeIn(200);
                });

            }

        }
    });

}


$(document).ready(function () {
    $("#submit").click(function (event) {
        myAJAXfun();

    });

    $("#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 -...