The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

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

4 posters

Go down

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

Post by AlexisMcDevin December 27th 2014, 3:39 pm

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.

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

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.

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

Thank you very much!
Alex.


Last edited by AlexisMcDevin on December 29th 2014, 11:03 pm; edited 1 time in total
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

In progress Re: How to get the "Quote, code, spoiler, hide" buttons working like Forumotion?

Post by SLGray December 27th 2014, 10:16 pm

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


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

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51576
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: How to get the "Quote, code, spoiler, hide" buttons working like Forumotion?

Post by AlexisMcDevin December 27th 2014, 10:47 pm

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?
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

In progress Re: How to get the "Quote, code, spoiler, hide" buttons working like Forumotion?

Post by _Twisted_Mods_ December 28th 2014, 3:39 am

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_
_Twisted_Mods_
Helper
Helper

Male Posts : 2083
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

In progress Re: How to get the "Quote, code, spoiler, hide" buttons working like Forumotion?

Post by AlexisMcDevin December 28th 2014, 9:53 am

_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.
How to get the "Quote, code, spoiler, hide" buttons working like Forumotion? 10730154_687680518012560_1860256827892210871_n
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

In progress Re: How to get the "Quote, code, spoiler, hide" buttons working like Forumotion?

Post by AlexisMcDevin December 29th 2014, 6:55 pm

Hi @Ange Tuteur!

I need your help!
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

In progress Re: How to get the "Quote, code, spoiler, hide" buttons working like Forumotion?

Post by Ange Tuteur December 29th 2014, 9:02 pm

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);
});
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: How to get the "Quote, code, spoiler, hide" buttons working like Forumotion?

Post by AlexisMcDevin December 29th 2014, 10:56 pm

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:
How to get the "Quote, code, spoiler, hide" buttons working like Forumotion? 10801986_688893911224554_7655755863196941904_n
How to get the "Quote, code, spoiler, hide" buttons working like Forumotion? 10906002_688893927891219_7650938134887051437_n

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

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum