CODEWITHSUNDEEP
javascriptjqueryajax
Zulfiqar Tariq
Zulfiqar Tariq

Reputation: 394

custom scrolling effect not working in safari and firefix but working perfectly in chrome?

<head>
<script>
function yHandler(){



    // Watch video for line by line explanation of the code
    // http://www.youtube.com/watch?v=eziREnZPml4
    var wrap = document.getElementById('wrap');
    var contentHeight = wrap.offsetHeight;
    var yOffset = window.pageYOffset; 
    var y = yOffset + window.innerHeight;
    var flag=0;

    if(y >= contentHeight){
        $(function() {
            var count=0;

    $.ajax({

        type: "GET",
        dataType: "jsonp",
        cache: false,
        url:myurl,
        success: function(data) {

            //var nexturl=data.pagination.next_url;
            //alert(data.pagination.next_url);
              for (var i = 0; i <5; i++) {
                wrap.innerHTML += '<div class="newData"><img src="'+data.data[i].images.low_resolution.url+'"/></div>';
                count++;
                //if(data.pagination.next_url="") flag++;
            //  alert(count);
                if(count>4){
            myurl=data.pagination.next_url;
                //alert(myurl);

                count=0;    
                }
              // alert(data.data[i].images.low_resolution.url);
            }
        }
    });
});
    }
    var status = document.getElementById('status');
    status.innerHTML = contentHeight+" | "+y;
}
var myurl="https://api.instagram.comxxxxxxxxxx";
window.onscroll = yHandler;
</script>
</script>
<style type="text/css">
div#status{position:fixed; font-size:24px;}
div#wrap{width:800px; margin:0px auto;}
div.newData{height:1000px; background:#09F; margin:10px 0px;}
</style>
</head>
<body>
<div id="status">0 | 0</div>
<div id="wrap"><img src="abc.jpg" height="1000"  /></div>
<div id="pics"></div>
</body>

This code is working perfectly on google chrome and it is loading new pictures when ever user hit bottom of page. but the problem is it is not working in firefox as it call yhandler even if user has not hit bottom of page. any ideas.

Upvotes: 0

Views: 65

Answers (1)

Pandiarajan
Pandiarajan

Reputation: 126

You can use jQuery to bind the mousewheel events.

//Firefox

$("body").bind('DOMMouseScroll', function(e){
    if(e.originalEvent.detail){
        yHandler();
    }
});

//IE, Opera, Safari

$("body").bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta){
         yHandler();
     }
});

Upvotes: 1

Related Questions