May 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
Most Viewed Topics
Top posting users this week
No user |
Go to page : 1, 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.
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.
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.
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.
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();
});
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.
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.
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.
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!
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();
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();
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!
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
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.
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
Go to page : 1, 2
|
|