Infinite scroll javascript not running - javascript

I'm trying to add infinite scroll functionality to a page using code given in this question, Check if a user has scrolled to the bottom, but nothing happens when I scroll to the bottom of the page. Here is the code so you don't have to follow the link:
<script type="text/javascript">
alert("popup!");
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("bottom!");
}
});
</script>
I added in the first alert to check if it was simply my browser blocking alerts, but it displays fine. The server also has JQuery 1.7.2 min installed and the page is masonry correctly, so I don't think it is an installation problem.

After your reply to my comment, you said you are getting
In the console tab I'm getting Uncaught ReferenceError: $ is not defined
I'm guessing then, that you havent included jQuery in the header of your page (this needs to be in the <head> of each page)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
This will tell you if JQuery has sucessfully loaded on your page
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
Original comment:
try putting console.log($(window).height()+"<-current sctoll | target->"+($(document).height() - 100)) in that loop, open it in chrome and right click -> element inspector, open the console tab, that will tell you what the values are each loop, should help you diagnose the problem. If you don't get any traces, the event is not firing

Perhaps the scroll event is firing properly with the syntax you have there, try this:
$(window).on('scroll', function () {
if ($(window).height() + $(window).scrollTop() >= $(document).height() - 100) {
alert('do stuff');
}
});

Related

Javascript Changing Css Elements

I was following this tutorial, trying to get my sites navigation bar to stick to the top of the page when it reaches the top of the page. I couldn't get it to work with the way they had it set up, so I tried to set it up in a different way and still can't get it to work. I put this code at the end of my body tag to try and make this work (the navigation bar has a css id of "navbar"):
jQuery
if ($document).scrolltop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("navbar").css("position","static");
}
Is there something I am missing?
Thanks in advance,
Bradon
Edit:
I want to thank everyone for the quick replies, and apologize as I am both new to javascript and stackoverflow. I have tried to implement some of the solutions suggested and here is what I have now:
<script type="text/javascript">
var navbar = $("#navbar");
navbar.on("scroll", function(e){
if (navbar.scrollTop() <= 0){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
}
});
</script>
I still can't get it to work properly.
Edit 2:
I would like to thank everybody for their help, I couldn't have figured it out without you guys. Here is the code I used if anybody should ever need it:
<script type="text/javascript">
var navbar = jQuery("#navbar");
jQuery(document).on("scroll", function(e){
if (jQuery(document).scrollTop() > 280){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
navbar.css("top", "auto");
}
});
</script>
this script assumes the thing you want stuck to the top has a class of "navbar". My problem was that wordpress wasn't accepting $ in jquery so I replaced it with jQuery. Thank-you once again everybody!
There is a bigger issue in that your scrolltop check is happening only once, while the page is loading. In the original tutorial, the code that checks the scrolltop is set to execute everytime a scroll event occurs:
wrap = $('#wrap');
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});
The "wrap.on('scroll')" part is very critical because this will cause the "scrolltop" value check to be triggered whenever the div is scrolled.
I believe the syntax is wrong. Missing parenthesis on document.scrollTop and also missing the # sign on navbar.
<script type="text/javascript">
if ( $(document).scrollTop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("#navbar").css("position","static");
}
</script>

Javascript Conflict with PHP

I am not sure what is causing the issue with my mobile menu system here.
I have two pages with an identical function to condense the nav systems into a mobile menu (below)
<script type="text/javascript">
$(document).ready(function() {
$('.main_nav nav ul').clone().appendTo('.top_menu');
$('.sec_nav nav ul').clone().appendTo('.top_menu');
$('.bottom-links ul').clone().appendTo('.top_menu');
$('.footer-links ul').clone().appendTo('.top_menu');
$('.rfi_nav').clone().appendTo('.m_form');
// For Menu-----------------
$('.menu, .m_close, .rfi_nav label.title').click(function(e) {
$('body').toggleClass('m_open');
});
// For Menu On window resize------------------
function checkwindowSize() {
var windowSize = $(window).width();
if(windowSize > 320 && windowSize < 1023) {
//$('body').toggleClass('open');
}
else{
$('body').removeClass('m_open');
}
}
checkwindowSize();
$(window).resize(function(){ checkwindowSize() });
// For BT Select DropDown-----------------
$('select').selectpicker();
// For content Scroll bar-----------------
(function($){
$(window).load(function(){
$(".scroll").mCustomScrollbar({
scrollButtons:{enable:true,scrollType:"continuous",scrollSpeed:40,scrollAmount:40},
advanced:{updateOnBrowserResize:true, updateOnContentResize:true, autoExpandHorizontalScroll:true, autoScrollOnFocus:true }
});
});
})(jQuery);
// BT Accordian------------
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-plus glyphicon-minus');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
});
</script>
My script works perfectly on my homepage (http://dev.oru.edu) but my internal pages (http://dev.oru.edu/generic-hf.php and http://dev.oru.edu/generic-hfs.php) seem to be conflicting somewhere and I cannot detect where or why.
Can someone please help me identify what is causing the conflict resulting in my mobile menus not loading? I am not familiar with JavaScript so I am fumbling around and don't want to mess the code up from the original developer since it is still working on the homepage.
The furthest I have been able to detect is that the problem is not restricted to only mobile devices but desktop browsers as well when scaled to mobile sizes. At first I thought it may be relevant to the device type but the issue is persistent with the desktop browsers as well.
Looking at the error console is very telling:
Many of your scripts depend on JQuery being loaded before they run. You're loading JQuery, but doing it asynchronously:
<script async type="text/javascript" src="js/1.11.3.jquery.min.js"></script>
Your scripts are then immediately calling window.$ and window.jQuery which haven't been loaded yet.
Remove the async attribute and it should work.
I had an "async" on my primary jquery library which was causing the function to not load the library properly.

Infinite scroll return multiple results in IE

I created a simple infinite scrolling for my website which shows more images when scrolling at the bottom. It works great with Chrome but when I test it on Internet Explorer the loader shows results multiple times. I don't know where is the error.
Here is my jQuery code:
$(document).ready(function(e){
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() == $(document).height()){
var pictureCount = $(".Picture-1A").length;
$.get('ajax/home-pagination.php', {off_set:pictureCount}, function(data){
$("#homeContent").append(data);
});
}
});
});
I send the off_set to the php page which will return the data with the new pictures and append it to the end of the page
this should work:
first implement the cdn of debounce to your page
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
then
in your scroll function, add the debounce function like this:
$(window).scroll($.debounce(100, function(){ /* function */ }));
Hope this works for you too. :)

I just want a simple load data (div) on scroll function

I've been looking around for a simple load data on scroll before the bottom of page.
I'm looking for one just like what revolt dot tv have implemented on their home page.
I found one http://jsfiddle.net/YM5dp/270/
function loadMore()
{
console.log("More loaded");
$("body").append(".div");
$(window).bind('scroll', bindScroll);
}
function bindScroll(){
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).unbind('scroll');
loadMore();
}
}
$(window).scroll(bindScroll);
but I cant seem to implement it on my site
i'am not sure why my div isn't being triggered.
My homepage continuous to load all divs at once. http://img.studio-heads.net/
Try this:
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
I saw you page. I guess you are calling a jquery function before the jquery library is being loaded. Please add the jquery library before the script call.
Uncaught ReferenceError: $ is not defined
Means that $ isnt initialized and hence jquery is not loaded.

jquery page resize not working

Hey guys I'm just starting out with JQuery so I'm an utter noob, but I've been following the codecademy tutorial and am trying to implement a page resize function to fit into a resized browser. However nothing is working inside the script tags with jquery inside - even alerts aren't happening. The first script runs fine and says hi, but neither of the other two alerts work, nor any of the Jquery stuff. I'm not sure if it makes a difference, but there are two soundcloud widgets on the page as well, one which is a programmable widget.
<script type="text/javascript">alert("Hi");</script>
<script type="text/javascript">
alert("Hello");
$(document).ready(function() {
alert("Jquery");
$(window).resize(function() {
if ($(window).width() < 1020) {
$('#page').css("width", "500px");
}
)};
});
</script>
Apart from figuring out why nothing happens, I'd also like to know if this resize thing works.
You got syntax error : window.resize should close with }); not )};
And be sure you called jQuery first.
By the way : why don't you simply use Media Queries ?
#media screen and (max-width: 1020px) {
#page {
width: 500px;
}
}
Without seeing the head section of your page, it sounds like you do not have the jquery library loaded. You must include a reference to the library, you can download it to your server of reference it by including <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> on your page (before any calls to $)
If your script isn't doing anything, almost certainly you have a syntax error somewhere within your <script> tag that is causing the code to be invalid and fail to run.
In this situation, your problem is that you haven't closed your resize call / function parameter properly:
$(window).resize(function() {
if ($(window).width() < 1020) {
$('#page').css("width", "500px");
}
)};
should be
$(window).resize(function() {
if ($(window).width() < 1020) {
$('#page').css("width", "500px");
}
});
Note that the parentheses and curly braces at the end of the function must be closed in exactly the opposite order as they were opened at the start.
If you are sure that you have included the jquery library
*try this code:*
<script>
$(function () {
var oldY = document.documentElement.clientWidth;
if (oldY <= 1020) {
$('#page').css({'width', '500px'});
}
});
</script>
First correct the syntax by changing )} into }). Than make sure you are including the jquery.js file before using jQuery code. Something like:
<html><head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>//jQuery Code here</script>
</head>
<body>
<script>//jQuery Code here</script>
</body></html>
Maybe open the console and check the javascript error messages (i.e. Ctrl + Shift + I in Chrome/Firefox others might be different). Also enter $ === jQuery into the console and see to which it is evaluated (should be true if jQuery is bound to $).
It is a common shortcut in jQuery to use $( function() { ... } )); for document.ready see jQuery API
If you are using other JavaScript libs that might overwrite the $ use
jQuery( document ).ready(function( $ ) {
// Code using $ as usual goes here.
});
to ensure $ is bound to jQuery.

Categories

Resources