Solved

jQuery Scroll Function Removing Content...

Posted on 2015-01-17
11
177 Views
Last Modified: 2015-01-22
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
Comment
Question by:Elxn
  • 6
  • 5
11 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 500 total points
ID: 40555080
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
 
LVL 2

Author Comment

by:Elxn
ID: 40555097
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40555101
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
 
LVL 2

Author Comment

by:Elxn
ID: 40555105
hmmm.  Oh!  Okay let me give it a try.  Sorry my man!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40555108
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 2

Accepted Solution

by:
Elxn earned 0 total points
ID: 40555110
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
 
LVL 2

Author Comment

by:Elxn
ID: 40555117
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40555118
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
 
LVL 2

Author Comment

by:Elxn
ID: 40555120
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40555122
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
 
LVL 2

Author Closing Comment

by:Elxn
ID: 40563896
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now