Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Infinite Scrolling Both Up and Down

Status
Not open for further replies.
JBorges

JBorges

Technical User
Jan 12, 2009
57
DK
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
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="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>[/URL]
    <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>
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
Thanks for your feedback jpadie. But do you know how to code it?
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
I'm looking for a way to have infinite scrolling work both up and down.
Click to expand...

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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
@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.
 
Upvote 0 Downvote
@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.

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="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>[/URL]
    <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>
 
Upvote 0 Downvote
Hi

Chris said:
Every time I encounter one of these "kewl" ideas, I simply close the site after two or three 'scrolls' of the pages or products
Click to expand...
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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
260
nanbread
nanbread
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
274
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
301
AbidingDude
AbidingDude
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
265
berkshirea
berkshirea
Krus1972
  • Locked
  • Question
Pop-up Blocker Detecter
Replies
1
Views
94
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top