Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • RegisterRegister  
  • Log inLog in  
  • November 2017
    MonTueWedThuFriSatSun
      12345
    6789101112
    13141516171819
    20212223242526
    27282930   

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Shopmotion


    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

    None

    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds


    Poll
    Top posting users this week


    View previous topic View next topic Go down  Message [Page 1 of 1]

    avatar

    Reply Box in Each Post

    Mr.EasyBB
    03/24/2013
      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
    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]

    [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';
    }
    });
    });
    [/hc]

     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!
    Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

    avatar
    this seems nice , can't wait for a phpbb2 version Smile

    Post on April 1st 2013, 2:40 pm by lightningterror

    avatar
    thanks for the tutorial

    May I ask you can add 'loading...' appear when click Reply button?

    Post on April 2nd 2013, 6:03 am by omg

    avatar
    Why would you need a loading screen? This loads automatically each click, no loading need.?

    Post on April 2nd 2013, 1:33 pm by Mr.EasyBB

    avatar
    Oh ok, i see 

    Post on April 3rd 2013, 9:56 am by omg

    avatar
    with invision the button does not open                                                                                                                                                                                                                                                                                                                                                                                                                            

    Post on April 8th 2013, 2:28 pm by pedrox

    avatar
    If you open the quick reply and then you hidden it, you can't open it again.

    Post on April 8th 2013, 2:46 pm by Tubilok

    avatar
    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 .

    Post on April 9th 2013, 2:02 am by Mr.EasyBB

    avatar
    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!

    Post on April 9th 2013, 2:28 am by Mr.EasyBB

    avatar
    with invision works with phpbb3

    conflict with this

    Code:
    $(function(){
         if(!window.localStorage) return;
           var default_avatar= 'http://illiweb.com/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);
        };});

    Post on April 9th 2013, 2:08 pm by pedrox

    avatar
    I solved : 

    replacing

    Code:
    $

    with

    Code:
    jQuery

    Post on April 9th 2013, 2:21 pm by pedrox

    avatar
    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

    Post on April 9th 2013, 3:23 pm by Mr.EasyBB

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]