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:
Clicking it will automatically select the contents of the code box:
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:
- Code:
function selectCode(e) {
var doc = document,
text = $(e).closest("dl").find(".cont_code,code").get(0),
range, selection;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
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>')
});
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. 
|
Home
by Base July 18th 2011, 5:46 pm
