INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Infinite Scrolling Both Up and Down

Infinite Scrolling Both Up and Down

(OP)
Hello.

I'm looking for a way to have infinite scrolling work both up and down. Presently the code below only works when you scroll down, meaning it shows the next html file, index3.html, when scrolling to the bottom. But let's say that my web page starts with index2.html, then I'd like to figure out how to go to index1.html when scrolling up.

index2.html

CODE --> HTML

<!doctype html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    
    <link type="text/css" rel="stylesheet" media="all" href="style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.infinitescroll.js"></script>
    <script type="text/javascript" src="manual-trigger.js"></script>
</head>
    
<body>
        
    <div id="content">
         <p>Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. </p>
         
         <p>Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth.</p>
         
        </div>      

<a id="next" href="index3.html"></a>


<script type="text/javascript">
	$(document).ready(function(){
	$('#content').infinitescroll({
		navSelector: "#next:last",
		nextSelector: "#next:last",
		itemSelector: "#content",
		debug: false,
		dataType: 'html',
		maxPage: 2,
		path: function(index) {
		return "index" + index + ".html";
		}
		}, function(newElements, data, url){
		});
	});
</script>

</body>
</html> 

RE: Infinite Scrolling Both Up and Down

looks like you would have to include prev and first in the selectors and then in the path option you would have to test for which selector was triggered and adjust the return accordingly.

RE: Infinite Scrolling Both Up and Down

(OP)
Thanks for your feedback jpadie. But do you know how to code it?

RE: Infinite Scrolling Both Up and Down

umm. yes - i guess i could figure it out. i'd just apply the principles I set out above although possibly changes would have to be made to the plugin.

post what you have done and where you are getting errors and we might be able to help you fix it.

RE: Infinite Scrolling Both Up and Down

Quote:

I'm looking for a way to have infinite scrolling work both up and down.

Could I chime in and say for the sake of having a usable website, DON'T.

Every time I encounter one of these "kewl" ideas, I simply close the site after two or three 'scrolls' of the pages or products, thereby losing a possible conversion, and it is not only myself, a straw poll of family and friends had a 95% "I hate those things", result.

We are human beings, and 99.9% of us have a very low "Now I'm bored with this" threshold, if we can't get to what we want inside SEVEN seconds on a web page, .... We leave.

These "infinite scrolling" things are very, very, VERY poor for conversions

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Infinite Scrolling Both Up and Down

except on mobile sites.

RE: Infinite Scrolling Both Up and Down

Even on touch screens of which I have two to play with, it becomes a game of "Russian Roulette" trying to 'catch' the right bit of content as it 'glides past' ....... again!

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Infinite Scrolling Both Up and Down

(OP)
@Chris
I think infinite scrolling is quite ingenious, especially if you have a long text in HTML on a mobile device that needs to be displayed. Mobile device have lesser CPU power than a computer and therefore loading a big HTML file takes time. But dividing it into chunks allows for much faster load time. I tested the code of my first post on my iPhone 5s and it works quite well.

RE: Infinite Scrolling Both Up and Down

(OP)
@jpadie
Ok, here'es my code I've tried so far. I've out the JS code in the beginning of the body tag with a div to load the previous file and a link to do that. But it doesn't load the previous file.

CODE --> HTML

<!doctype html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    
    <link type="text/css" rel="stylesheet" media="all" href="style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.infinitescroll.js"></script>
    <script type="text/javascript" src="manual-trigger.js"></script>
</head>
    
<body>

<div id="contentPrev">
</div>

<a id="prev" href="index1.html"></a>


<script type="text/javascript">
	$(document).ready(function(){
	$('#contentPrev').infinitescroll({
		navSelector: "#prev",
		nextSelector: "#prev",
		itemSelector: "#contentPrev",
		debug: false,
		dataType: 'html',
		maxPage: 3,
		path: function(index) {
		return "index" + index + ".html";
		}
		}, function(newElements, data, url){
		});
	});
</script>

    <div id="content">
         <p>Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. </p>
         
         <p>Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth. Lorum ipsum text andso forth.</p>
         
        </div>      

<a id="next" href="index3.html"></a>


<script type="text/javascript">
	$(document).ready(function(){
	$('#content').infinitescroll({
		navSelector: "#next:last",
		nextSelector: "#next:last",
		itemSelector: "#content",
		debug: false,
		dataType: 'html',
		maxPage: 2,
		path: function(index) {
		return "index" + index + ".html";
		}
		}, function(newElements, data, url){
		});
	});
</script>

</body>
</html> 

RE: Infinite Scrolling Both Up and Down

Hi

Quote (Chris)

Every time I encounter one of these "kewl" ideas, I simply close the site after two or three 'scrolls' of the pages or products
Me too. I prefer traditional pagers. With infinite scrolling I frequently miss the "page breaks" and find myself scrolling far longer then reasonable : after 3 ~ 5 pages I usually try to refine the search criteria or something to get more relevant content. With infinite scrolling I get disoriented and shortly I leave the site.

Feherke.
feherke.ga

RE: Infinite Scrolling Both Up and Down

(OP)
I should mention that I'm working on a Bible app for iPhones and iPads. Not for a web site. I agree that infinite scrolling May not be applicable for a regular site. Some of the Bible books are quite large (500kb+) and takes a few seconds to load. This is especially noticeable on older iPhones with even lesser CPU power. So for this purpose infinite scrolling is quite useful since the app will load the books faster while still being able to scroll to other chapters or sections.

Any help you can provide here will be much appreciated.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close