this seems nice , can't wait for a phpbb2 version
March 2024
Search
Similar topics
Who is online?
In total there are 2 users online :: 0 Registered, 0 Hidden and 2 Guests
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 |
Reply Box in Each Post
Hey guys so I am going to show you how to create a button that lies within each post, and when you click on it it will append the Quick Reply to that post. You can also hide it if you don't want it anymore, or you can start your post at the top. Then when you need some information at the bottom just click the reply to that post and your post will still be in there!
So first what we need to do is add our codes.Go to your Forum as according.
[hc = PunBB]
CSS
Great now let us move on to the JavaScript:
[hc = PhpBB3]
CSS
Great now let us move on to the JavaScript:
[/hc]
[hc = Invision]
CSS
Great now let us move on to the JavaScript:
And that is it for now. I will add phpBB2 when I get the chance, and well let me know how it goes for everyone. Thanks and hope you enjoy this!
So first what we need to do is add our codes.Go to your Forum as according.
[hc = PunBB]
CSS
- Code:
.replyButton {
padding: 2px 4px;
border: 1px solid #8F8F8F;
width: 36px;
height: 15px;
margin: 10px 0px;
background: #E0E0E0;
box-shadow: inset 0px 4px 10px white;
border-radius: 3px;
}
#pun-qpost .main-head {display:none;}
#pun-qpost {
border: 1px solid #B3B3B3;
background-color: #FAFAFA;
border-radius:4px;
box-shadow: #AFAFAF 2px 3px 5px;
width: 95%;
margin: 0px auto !important;
}
Great now let us move on to the JavaScript:
- Code:
$(function() {
document.getElementById('pun-qpost').style.display='none';
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);
}
$('.replyButton').click(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';
}
});
});
[hc = PhpBB3]
CSS
- Code:
.replyButton {
padding: 2px 4px;
border: 1px solid #8F8F8F;
width: 36px;
height: 15px;
margin: 10px 0px;
background: #E0E0E0;
box-shadow: inset 0px 4px 10px white;
border-radius: 3px;
cursor:pointer;
}
#quick_reply {
border: 1px solid #B3B3B3;
background-color: #FAFAFA;
border-radius:4px;
box-shadow: #AFAFAF 2px 3px 5px;
width: 95%;
margin: 0px auto !important;
}
Great now let us move on to the JavaScript:
- Code:
$(function() {
document.getElementById('quick_reply').style.display='none';
var items = document.getElementsByClassName('postbody'), replyDiv;
for (var i = 0; i < items.length; i++) {
replyDiv = document.createElement('div');
replyDiv.className='replyButton';
replyDiv.innerHTML = 'Reply';
items[i].appendChild(replyDiv);
}
$('.replyButton').click(function() {
var reply = document.getElementById('quick_reply'),seeIf = $(this).parent('.postbody').children('#quick_reply'),seeIfcheck=seeIf.css('display');
if(seeIf.length == 1 && seeIfcheck==="block") {
document.getElementById("quick_reply").style.display= 'none';
}else if (seeIfcheck ==="none"){
document.getElementById("quick_reply").style.display= 'block';
}
else{
$(this).parent().append(reply);
$(this).addClass('hide');
document.getElementById("quick_reply").style.display= 'block';
}
});
});
[/hc]
[hc = Invision]
CSS
- Code:
.replyButton {
padding: 2px 4px;
border: 1px solid #8F8F8F;
width: 36px;
height: 15px;
margin: 10px 0px;
background: #E0E0E0;
box-shadow: inset 0px 4px 10px white;
border-radius: 3px;
cursor:pointer;
}
#quick_reply {
border: 1px solid #B3B3B3;
background-color: #FAFAFA;
border-radius: 4px;
box-shadow: #AFAFAF 2px 3px 5px;
width: 95%;
margin: 0px auto !important;
}
#qpost {
display: none;
}
Great now let us move on to the JavaScript:
- Code:
$(function() {
document.getElementById('quick_reply').style.display='none';
var items = document.getElementsByClassName('post-entry'), replyDiv;
for (var i = 0; i < items.length; i++) {
replyDiv = document.createElement('div');
replyDiv.className='replyButton';
replyDiv.innerHTML = 'Reply';
items[i].appendChild(replyDiv);
}
$('.replyButton').click(function() {
var reply = document.getElementById('quick_reply'),seeIf = $(this).parent('.post-entry').children('#quick_reply'),seeIfcheck=seeIf.css('display');
if(seeIf.length == 1 && seeIfcheck ==="block") {
document.getElementById("quick_reply").style.display= 'none';
}else if (seeIfcheck ==="none"){
document.getElementById("quick_reply").style.display= 'block';
}else {
$(this).parent().append(reply);
$(this).addClass('hide');
document.getElementById("quick_reply").style.display= 'block';
}
});
});
And that is it for now. I will add phpBB2 when I get the chance, and well let me know how it goes for everyone. Thanks and hope you enjoy this!
Similar topics
I will retest these everyone, I have tested each code out myself in each forum. Though since some of you have complaints, I will try it out again .
The codes above have been fixed... Invision's bug was just a wrong selector that I missed, which was my fault. The opening the closing issue was just an added condition which now is fixed. Let me know everyone how you like it!
with invision works with phpbb3
conflict with this
conflict with this
- Code:
$(function(){
if(!window.localStorage) return;
var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
var caching_time= 24*60*60*1000;
var caching_error= 60*1000;
var set_avatar= function(id) {
$('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');
};
var get_avatar= function(id) {
if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
{ localStorage.setItem('d_ava'+id, default_avatar);
$.get('/u'+id, function (d){
localStorage.setItem('t_ava'+id,+new Date);
localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
set_avatar(id); }); } return localStorage.getItem('d_ava'+id);
}; var to_replace= {};
$('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){
to_replace[$(this).attr('href').substr(2)]= 1;
$(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');
}); for(i in to_replace)
{ set_avatar(i);
};});
If you had to change the jQuery symbol maybe you have an error in your other codes conflicting with this. For this will not conflict with others. I already updated the codes above to work properly, tested them and I posted with them. So all is fine now. No need to go through the entire thing and change the symbols, unless you are placing this javascript inside a widget or html page then it will change the $ to &35; or something like that that is called a character entity
|
|