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  
  • Latest imagesLatest images  
  • RegisterRegister  
  • Log inLog in  
  • March 2024
    MonTueWedThuFriSatSun
        123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced 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
      RSS feeds


      Poll
      Top posting users this week
      No user


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

      Mr.EasyBB

      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: reddit

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

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

      omg
      thanks for the tutorial

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

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

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

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

      omg
      Oh ok, i see 

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

      pedrox
      with invision the button does not open                                                                                                                                                                                                                                                                                                                                                                                                                            

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

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

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

      Mr.EasyBB
      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 April 9th 2013, 2:02 am by Mr.EasyBB

      Mr.EasyBB
      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 April 9th 2013, 2:28 am by Mr.EasyBB

      pedrox
      with invision works with phpbb3

      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);
          };});

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

      pedrox
      I solved : 

      replacing

      Code:
      $

      with

      Code:
      jQuery

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

      Mr.EasyBB
      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 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]