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.

Select Content Button

3 posters

Go down

Tutorial Select Content Button

Post by Base July 18th 2011, 5:46 pm

Select Content Button


Hello Forumotion members,

In this tutorial, you will discover how to put a 'Select Content' button for every code box as seen on this forum. This tutorial is compatible for all forum versions.

An example of the 'Select Content' button as seen on this forum:

Select Content Button Selectcontentbutton

Clicking it will automatically select the contents of the code box:

Select Content Button Selectcontentbutton2

Step 1:
- Navigate to... Administration Panel → Modules Tab → Javascript codes management → Create a new javascript

Step 2:
- Call it whatever you like and set its placement to all pages.

Step 3:
- Once you have done that, you will need to add the following code into 'Javascript Code' field :

Old version:

New version added
Apply for PhpBB2, PhpBB3, Invision, PunBB and ModernBB version
Code:
function selectCode(e) {
    var s = $(e).closest("dl").find(".cont_code,code").get(0), range, selection;
    var a = s, z = s;
    while(a.nodeType == 1 && a.childNodes.length) a=a.firstChild;
    while(z.nodeType == 1 && z.childNodes.length) z=z.lastChild;
    if (!$(a).is('.fixff')) {
        var fix = $('<span class="fixff"/>').insertBefore(a);
    } else {
      a = a.nextSibling;
    }
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(s);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.setStart(a, 0);
        range.setEnd(z, z.nodeValue ? z.nodeValue.length : 0);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};
$(function(){$("dl.codebox:not(.spoiler,.hidecode)  > dd.code, dl.codebox:not(.spoiler,.hidecode)  > dd > code").closest("dl").find('dt').append('<span onClick="selectCode(this)" class="selectCode">Select Content</span>')});
For AwesomeBB version
Code:
function selectCode(e) {
    var s = $(e).closest("div").find("code").get(0), range, selection;
    var a = s, z = s;
    while(a.nodeType == 1 && a.childNodes.length) a=a.firstChild;
    while(z.nodeType == 1 && z.childNodes.length) z=z.lastChild;
    if (!$(a).is('.fixff')) {
        var fix = $('<span class="fixff"/>').insertBefore(a);
    } else {
      a = a.nextSibling;
    }
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(s);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.setStart(a, 0);
        range.setEnd(z, z.nodeValue ? z.nodeValue.length : 0);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};
$(function(){$("div.codebox:not(.spoiler,.hidecode) ").find('p').append('<span onClick="selectCode(this)" class="selectCode">Select Content</span>')});
Step 4 :
Go to  Administration Panel > Display > Colors > CSS stylesheet

Add the following to your stylesheet to style the select content button and submit :
Code:
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }


If you have done all the steps correctly then you should have a fully functioning 'Select Content' button appearing for every code box. Wink


Base
Base
Forumaster

Male Posts : 10383
Reputation : 1695
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

TonnyKamper likes this post

Back to top Go down

Tutorial Re: Select Content Button

Post by SLGray April 25th 2017, 8:48 pm

The JavaScript has been updated since an issue with Chrome and Firefox.  You need to update your JavaScript if you are using it.


Select Content Button 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 : 51408
Reputation : 3519
Language : English
Location : United States

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

Back to top Go down

Tutorial Re: Select Content Button

Post by SarkZKalie June 1st 2024, 9:28 am

I've added a minor update from EA to the first post Twisted Evil

ModernBB and AwesomeBB are now available


Select Content Button Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1439
Reputation : 220
Language : English

https://rotavn.forumotion.com/

Ape, Sir Chivas™, TonnyKamper and jucarese like this post

Back to top Go down

Back to top

- Similar topics

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