?
Solved

jQuery Scroll Function Removing Content...

Posted on 2015-01-17
11
Medium Priority
?
201 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 2000 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
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.

 
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
 
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

Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

777 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