asked on

jQuery Scroll Function Removing Content...

I have a page here: this page

You can see all the JS if you want on that page.

Basically what I have in my ready function is a call to a function which displays images. Then I have another .scroll function that runs code when the browser is like 80% of the way to the bottom. When all the code is in place, the page operates just fine IF the scroll bar is at the top when the page is refreshed. If you go to the page, scroll down a bit, and then refresh the page; the scroll bar will be below the top for the page load. WHen this happens, images display then are suddenly all removed and no more get loaded into the page...

When I comment out the scroll function the initial images load just fine and don't go away--even if your scroll bar is way down when you refresh the page. This is what this code looks like:

var record = { key: 1 }; //this is a flag to prevent multiple ajax calls when user scrolls down...
jQuery(document).ready(function(){
	jQuery('textarea').elastic();
	jQuery('textarea').trigger('update');
	display_images(0,record);
/*		$(window).scroll(function() {	
			//this fires when user scrolls down most of the way of the page	
			if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.8){
				var span = $(".last_record:last").text();
				if(span != "STOP"){
					console.log("start scroll:"+span);
					span = parseInt(span);
					display_images(span,record);
				}
			}		
		});	*/					
});

Open in new window

What I need is for the scroll function to be present in the page and not commented out. So I need it to either always set the scroll position to the top on page load (which I've tried and can't get it to work) or make it work no matter where the scroll bar is (preferred solution).

Thanks for the help!

SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Elxn

ASKER

Tom, thanks for your comment.

I didn't change: if ($(window).scrollTop() > 0) {
because i want the function to fire when the scroll bar is 80% of the way down.

But I tried your code for the most part:

$(window).load(function(){
$(window).scroll(function() {	
	//this fires when user scrolls down most of the way of the page	
	if ($(window).scrollTop() > 0) {
		var span = $(".last_record:last").text();
		if(span != "STOP"){
			console.log("start scroll:"+span);
			span = parseInt(span);
			display_images(span,record);
		}
	}		
});	
});

Open in new window

The images still disappear from the page when the scroll bar is not at the top when the page is refreshed.

Any other ideas?

Thanks!

Tom Beck

You misunderstood. The code I suggested would be a window load event handler, completely separate from the document ready handler you already had in the script.

Elxn

ASKER

hmmm. Oh! Okay let me give it a try. Sorry my man!

Tom Beck

However, you should be able to combine them into a single handler like this.

$(window).on('load scroll', function(e){
		if (e.type == 'load') {
			$('textarea').elastic();
			$('textarea').trigger('update');
			display_images(0,record);
		}	
		//this fires when user scrolls down most of the way of the page	
		if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.8){
			var span = $(".last_record:last").text();
			if(span != "STOP"){
				console.log("start scroll:"+span);
				span = parseInt(span);
				display_images(span,record);
			}
		}				
	});

Open in new window

That would check on load and on scroll to see if the window is scrolled >= 80% of the window height. As I implied though, I have not tested on my end.

ASKER CERTIFIED SOLUTION

Elxn

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Elxn

ASKER

Saw your comment... Well to save time i won't try what you suggested since I already got it working. I closed the question before i saw what you wrote last... to late now!

Tom Beck

Can't seem to wrap my head around why that would solve the problem of refreshing a page that is not at zero scrollTop but...if you say it works...that's what matters.

Elxn

ASKER

yeah i don't know exactly why it works either, but my theory is it properly delays the scroll code from firing until after the page has its content ajaxed into it once. I had a hunch that the scroll code and initial image display code were firing at nearly the same time and creating a problem somehow. But yeah it seemed to do the trick. Thanks for all the help!

Tom Beck

Thanks for the points. You can assign the points any way you see fit. You offered them, they are yours to give away. The mods don't care how you do it as long as there's no funny business (like experts teaming up to play the system for points). Experts can object to how points are assigned and get the mods to adjust but only if they participated in the question. But it was just you and me on this one. You can never give yourself points of course. That would make everyone a genius : )

Elxn

ASKER

Tom assisted me in getting this solution as his posts got me thinking. But my comment is the way i fixed this, but i didn't take any points! I'll let the moderators determine if my points assessment is kosher!