Liked
It works on mine and loads quickly, but there's a bug on blogs using this code. Basically it shows the first post on every single page. 
April 2024
Search
Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest
None
Most users ever online was 140 on July 4th 2021, 2:03 pm
None
Most users ever online was 140 on July 4th 2021, 2:03 pm
feedsMost Viewed Topics
Top posting users this week
| No user |
Go to page : 1, 2 
Message [Page 1 of 2]
Infinite Scrollers
So far I have finished the Clickable Infinite Load Post code. I will be working on the scrollable now. So please enjoy this as this has taken me some thinking of how to go about all of this 
Create a new Javascript page and mark it In The Topics.
CSS needed to keep it clean
This may not be usable for each forum, if it doesn't work for your forum please let me know. And I will change the code accordingly.
Create a new Javascript page and mark it In The Topics.
- Code:
$(function() {
//Copyright 2013 EasyBB Tutorals Dot Com
//Any reference to this code, you must keep the copyright in tact.
//EasyBB (C) 2013
if(!/p\d+/.test(window.location.pathname)) {
var main =$('.post').last(),
infiniBody= '<div class="newInfini"></div>';
main.after(infiniBody);
var infini =$('.newInfini');
newInfiniHTML = '<center><span>Show More Post</span></center>',
noInfiniHTML ='<center><span>No More Post</span></center>',
hrefArray = [],//array global
pager = $('.paging'),
hrefs = $('.paging').first().find('a[href*="/t"]'),
imgUrl = "http://i79.servimg.com/u/f79/17/83/35/07/loadin10.gif";
for(var i=0;i<hrefs.length;i++) {
var hreflink = $(hrefs[i]).attr('href');
hrefArray.push(hreflink);
}
if(hrefArray.length == 0) {
infini.html(noInfiniHTML);
} else {
infini.html(newInfiniHTML);
}
hrefArray.pop();
var hrefLength = hrefArray.length,
imgS = $('.loadingImg');
function infiniteScroll(){
var url = hrefArray.shift();
setTimeout(function() {
imgS.remove();
infini.load(url+" .post",function() {
infini.removeClass('newInfini').addClass('oldInfini');
hrefLength = hrefArray.length;
main=$('.post').last();
main.after(infiniBody);
infini =$('.newInfini');
if(hrefArray.length == 0) {
infini.html(noInfiniHTML);
} else {
infini.html(newInfiniHTML);
}
});
},1500);
}
$(document).on('click',infini,function() {
if(hrefArray.length > 0) {
infini.html('<center><img class="loadingImg" src="'+imgUrl+'"/></center>');
infiniteScroll();
}
});
} else {
if(pager !== undefined) {pager.show();}
}
});
CSS needed to keep it clean
- Code:
.paging{display:none}
This may not be usable for each forum, if it doesn't work for your forum please let me know. And I will change the code accordingly.
Share this post on: 
Liked
The code makes the codes on the page not work! When I load post none of the codes I have on those post load. It doesn't load lightbox effects or the like button I have on my forum. My forums is punbb.
June 4th 2013, 9:19 pm by Puppycheese889
That is because your elements are now dynamically created. You will have to change any .click() events to this
Also as of jQuery 1.9.1 .hover() is deprecated you will have to use .on('mouseenter'
If anyone needs help changing their elements to dynamic elements please let me know. This is what will happen with any dynamically created elements.
- Code:
$(document).on('click','.class',function() {
//your code
});
Also as of jQuery 1.9.1 .hover() is deprecated you will have to use .on('mouseenter'
If anyone needs help changing their elements to dynamic elements please let me know. This is what will happen with any dynamically created elements.
June 4th 2013, 9:37 pm by Mr.EasyBB
Doing what you say breaks the code to where no new messages are displayed.
June 4th 2013, 9:54 pm by Rukiafan
NO no. Anything you have for your Post. Say you have a hover effect. Well you have to backtrack those codes and change them now. This is the price you get for dynamically loading ANY element. So say you have a hover ok
Well that now needs to be changed to this-
- Code:
$('.avatar').hover(function() {
$(this).hide();
});
Well that now needs to be changed to this-
- Code:
$(document).on('mouseenter','.avatar',function() {
$(this).hide();
});
$(document).on('mouseleave','.avatar',function() {
$(this).show();
});
June 4th 2013, 10:03 pm by Mr.EasyBB
Is there any easier way to do this? I have lots of active codes. 
I have a few codes like the like button and the reply button.
I have a few codes like the like button and the reply button. June 5th 2013, 12:53 am by Puppycheese889
Nope, it's quite easy to fix these, you don't have to change all the scripts. Just the ones dealing with the js. And if you are saying that the items are not being appended to the new post that you load that is because they aren't technically there until you actually visit the page. I could probably make something that would be easier. That is why codes are sometimes tricky as you need to know what you are doing with JavaScript and understanding what is technically going on in the background. Without this knowledge things can get easily confusing.
June 5th 2013, 8:47 am by Mr.EasyBB
It can be made to be for all versions, you just need to make sure for one that your navigation for pages class name. Punbb is .paging , phpbb2 is .pagination and phpbb3 I don't know nor invision yet. Once I know these I will add them to the tutorial as a note. Anyone will to figure these out is more than welcome and will earn some points.
June 5th 2013, 5:08 pm by Mr.EasyBB
Ok. Can you teach me how to make it so the reply button found here http://www.easybbtutorials.com/t224-reply-box-in-each-post and I have the like system found here http://www.avacweb.com/t195-9-a-new-like-vote-system?highlight=like+system I also have the youtube light box script and I have the script for shortening links and adding picture bb code automatically found here http://www.avacweb.com/t593-15-shorten-local-urls-and-automatic-image-tags?highlight=shorten+links Please help me with this I really want to use this feature! It is really cool! I like the idea of it!
June 5th 2013, 5:36 pm by Puppycheese889
Here is the code you can add to the reply from us, there are some tips so follow them ok.
Add that to the Reply JavaScript you already have (find the bottom of it and replace it with this.
Then go to this script, find the .load(...,function() { and at the bottom of the load add createButton();
- Code:
function createButton() {
var items = document.getElementsByClassName('entry-content'), replyDiv;
for (var i = 0; i < items.length; i++) {
replyDiv = document.createElement('div');
replyDiv.className='replyButton';
replyDiv.innerHTML = 'Reply';
items[i].appendChild(replyDiv);
}
}
createButton();
$(document).on('click','.replyButton',function() {
var reply = document.getElementById('pun-qpost'),
seeIf = $(this).parent('.entry-content').children('#pun-qpost'),
seeIfcheck = seeIf.css('display');
if(seeIf.length == 1 && seeIfcheck ==="block") {
document.getElementById("pun-qpost").style.display= 'none';
} else if (seeIfcheck ==="none" && seeIf.length == 1){
document.getElementById("pun-qpost").style.display= 'block';}else{ $(this).parent().append(reply);
document.getElementById("pun-qpost").style.display= 'block';
}
});
Add that to the Reply JavaScript you already have (find the bottom of it and replace it with this.
Then go to this script, find the .load(...,function() { and at the bottom of the load add createButton();
June 5th 2013, 6:38 pm by Mr.EasyBB
I was a little bit confused by this. I tried it but it didn't work.
June 6th 2013, 1:01 am by Puppycheese889
Find in the original Reply Code, this line
var items = document.getElementsByClassName('entry-content'), replyDiv;
And replace everything past that with the code I provided except the VERY last }); in the reply code. Then go to the infiniteScroller function on this script and add createButton();
So find this
and make it this
var items = document.getElementsByClassName('entry-content'), replyDiv;
And replace everything past that with the code I provided except the VERY last }); in the reply code. Then go to the infiniteScroller function on this script and add createButton();
So find this
- Code:
if(hrefArray.length == 0) {
infini.html(noInfiniHTML);
} else {
infini.html(newInfiniHTML);
}
and make it this
- Code:
if(hrefArray.length == 0) {
infini.html(noInfiniHTML);
} else {
infini.html(newInfiniHTML);
}
createButton();
June 6th 2013, 1:05 am by Mr.EasyBB
Just to let you guys know, if you only want to use this feature in blogs don't add this CSS code to your Stylesheet.
Also to change the loading animation add your own animated gif to this line of the Javascript code!
I hope you enjoyed this mini tut on this @Mr.Easybb code!
- Code:
.paging {display:none}
Also to change the loading animation add your own animated gif to this line of the Javascript code!
- Code:
imgUrl = "http://i79.servimg.com/u/f79/17/83/35/07/loadin10.gif";
I hope you enjoyed this mini tut on this @Mr.Easybb code!
June 7th 2013, 2:44 pm by Rukiafan
RukiaFan that CSS won't make it work only in Blogs What that CSS does is if it has the element .paging it won't show up. If a member clicks on a link leading to the second or third page it will display it and the scroller won't work as the data it gets is not correct. Though you are correct about the loading screen part I totally forgot to tell users how to use some of the variables I added I will be adding more to this to make it work a bit better in a sense
What that CSS does is if it has the element .paging it won't show up. If a member clicks on a link leading to the second or third page it will display it and the scroller won't work as the data it gets is not correct. Though you are correct about the loading screen part I totally forgot to tell users how to use some of the variables I added I will be adding more to this to make it work a bit better in a sense June 7th 2013, 4:14 pm by Mr.EasyBB
The .paging still appears on blogs without the CSS, but not on forums.
June 7th 2013, 4:47 pm by Rukiafan
Well it should as it is a light CSS. I think you need to check this again as anything dealing outside of the first page of the topic (p15 p30 p45) the script WILL NOT work. If you take a direct link to the first page it will work perfectly fine.
June 7th 2013, 4:49 pm by Mr.EasyBB
elii01 that is because this is specific to punBB I need some forums to see what the actual classes are for phpbb2 so if you provide a link I'll help you
June 15th 2013, 6:15 pm by Mr.EasyBB
That's a link of my forum > http://purplerose1.activoforo.com/f12-presentate :$
June 15th 2013, 9:43 pm by elii01
Message [Page 1 of 2]
Go to page : 1, 2
|
|
|