Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 215
  • Last Modified:

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!
0
Elxn
Asked:
Elxn
  • 6
  • 5
2 Solutions
 
Tom BeckCommented:
Probably not as simple as cutting and pasting this code below your global record variable, but it would be logical to check the scroll position on page load, if it's not at the top, run the routine to load images.
$(window).load(function(){
		if ($(window).scrollTop() > 0) {
			var span = $(".last_record:last").text();
			if(span != "STOP"){
				span = parseInt(span);
				display_images(span,record);
			}
		}
	});

Open in new window

Maybe you want to check that it's not more than 20% scrolled down instead of greater than zero scrolled, not sure.

B.T.W. the dollar sign is just shorthand for jQuery. Using one or the other reads better than using a mix of $ and jQuery.
0
 
ElxnbossAuthor Commented:
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!
0
 
Tom BeckCommented:
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.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
ElxnbossAuthor Commented:
hmmm.  Oh!  Okay let me give it a try.  Sorry my man!
0
 
Tom BeckCommented:
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.
0
 
ElxnbossAuthor Commented:
Alright, i tried your suggestion and took it out of the ready function; but it still didn't work.  HOWEVER, it got me thinking...  why not put it inside an ajax complete function so it doesn't work till ajax has finished.  I did this and it worked just how I wanted it to!

So I'll give you the points for your inspiration; if you didn't get me thinking i might not have had that idea.

Thanks so much Beck!

Here is how i did it:
$.ajaxSetup({
  complete: function () {		
	$(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

0
 
ElxnbossAuthor Commented:
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!
0
 
Tom BeckCommented:
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.
0
 
ElxnbossAuthor Commented:
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!
0
 
Tom BeckCommented:
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 : )
0
 
ElxnbossAuthor Commented:
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!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now