Select Content Button

by Base July 19th 2011, 3:46 am

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 All - Select Content Button Selectcontentbutton

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

Select All - 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 = $('').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('Select Content')});

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 = $('').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('Select Content')});

Step 4 :
Go to Administration Panel > Display > Colors > CSS stylesheet

Add the following to your stylesheet to style the select content button and submit :