How to get the "Quote, code, spoiler, hide" buttons working like Forumotion?

Tutorial topic: Select Content Button

I searched out the tutorial topic to make the select content button. I tried with this however, it did not work as per what I want.



As you see, select content button of "Code" show up in black and upper-cases. The border lines do not look very well.

Quote frame also like below comment.

The Spoiler is so terrible. All in upper-cases.

So can you give me some codes to make "Quote, code, spoiler, hide" button will be exactly like below image?

Myforum is phpbb3

Link to my forum you can find in my profile.



Thank you very much!
Alex.

The select content button should not appear for quotes and spoilers.

SLGray wrote:The select content button should not appear for quotes and spoilers.

Yes, I know that. I attached the below image in my first post to talk to you all, that is what I want.
Since, I follow tutorial but it did not work on my forum.
So, can you help me?

here the code for spoiler

Code:

      function selectCode(a){a=$(a).closest("dl").find(".spoiler_content")[0];if(window.getSelection){var c=window.getSelection();if(c.setBaseAndExtent)c.setBaseAndExtent(a,0,a,a.innerText.length-1);else{window.opera&&a.innerHTML.substring(a.innerHTML.length-4)=="<BR>"&&(a.innerHTML+=" ");var b=document.createRange();b.selectNodeContents(a);c.removeAllRanges();c.addRange(b)}}else document.getSelection?(c=document.getSelection(),b=document.createRange(),b.selectNodeContents(a),
            c.removeAllRanges(),c.addRange(b)):document.selection&&(b=document.body.createTextRange(),b.moveToElementText(a),b.select())}
           
          $(function(){
                $("dl.codebox>dd>.spoiler_content").closest("dl").find('dt').append('<span onClick="selectCode(this)" class="selectCode">Select Content</span>');
          });

_Twisted_Mods_ wrote:here the code for spoiler

Code:

      function selectCode(a){a=$(a).closest("dl").find(".spoiler_content")[0];if(window.getSelection){var c=window.getSelection();if(c.setBaseAndExtent)c.setBaseAndExtent(a,0,a,a.innerText.length-1);else{window.opera&&a.innerHTML.substring(a.innerHTML.length-4)=="<BR>"&&(a.innerHTML+=" ");var b=document.createRange();b.selectNodeContents(a);c.removeAllRanges();c.addRange(b)}}else document.getSelection?(c=document.getSelection(),b=document.createRange(),b.selectNodeContents(a),
            c.removeAllRanges(),c.addRange(b)):document.selection&&(b=document.body.createTextRange(),b.moveToElementText(a),b.select())}
           
          $(function(){
                $("dl.codebox>dd>.spoiler_content").closest("dl").find('dt').append('<span onClick="selectCode(this)" class="selectCode">Select Content</span>');
          });

Below is the image after applied your code. It seems to be nothing change.

Hi @Ange Tuteur!

I need your help!

Change your script to :

Code:

function selectCode(a){a=$(a).closest("dl, blockquote").find(".cont_code,code, .hidden, div")[0];if(window.getSelection){var c=window.getSelection();if(c.setBaseAndExtent)c.setBaseAndExtent(a,0,a,a.innerText.length-1);else{window.opera&&a.innerHTML.substring(a.innerHTML.length-4)=="<BR>"&&(a.innerHTML+=" ");var b=document.createRange();b.selectNodeContents(a);c.removeAllRanges();c.addRange(b)}}else document.getSelection?(c=document.getSelection(),b=document.createRange(),b.selectNodeContents(a),
c.removeAllRanges(),c.addRange(b)):document.selection&&(b=document.body.createTextRange(),b.moveToElementText(a),b.select())}
       
$(function(){
  var html = '<span onClick="selectCode(this)" class="selectCode">Select Content</span>';
  $("dl.codebox > dd, dl.codebox > dd").closest("dl").find('dt').append(html);
  $('blockquote').prepend(html);
});

Hi @Ange Tuteur,

I am using these codes below:
- CSS:

Code:

.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }

- Javascript Codes:

Code:

function selectCode(a){a=$(a).closest("dl, blockquote").find(".cont_code,code, .hidden, div")[0];if(window.getSelection){var c=window.getSelection();if(c.setBaseAndExtent)c.setBaseAndExtent(a,0,a,a.innerText.length-1);else{window.opera&&a.innerHTML.substring(a.innerHTML.length-4)=="<BR>"&&(a.innerHTML+=" ");var b=document.createRange();b.selectNodeContents(a);c.removeAllRanges();c.addRange(b)}}else document.getSelection?(c=document.getSelection(),b=document.createRange(),b.selectNodeContents(a),
c.removeAllRanges(),c.addRange(b)):document.selection&&(b=document.body.createTextRange(),b.moveToElementText(a),b.select())}
        
$(function(){
  var html = '<span onClick="selectCode(this)" class="selectCode">Select Content</span>';
  $("dl.codebox > dd, dl.codebox > dd").closest("dl").find('dt').append(html);
  $('blockquote').prepend(html);
});

And here is the testing result:



Can you review and let me know what wrong? How to fix these?