Select Content Button

by **Base** on July 18th 2011, 9: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 is 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 (your forum version ONLY):

phpBB 2

Code:: function selectCode(a) { // Get ID of code block var e = jQuery(a).closest('tr').next().find('.cont_code')[0]; // Not IE if (window.getSelection) { var s = window.getSelection(); // Safari if (s.setBaseAndExtent) { s.setBaseAndExtent(e, 0, e, e.innerText.length - 1); } // Firefox and Opera else { // workaround for bug # 42885 if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>') { e.innerHTML = e.innerHTML + ' '; } var r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } } // Some older browsers else if (document.getSelection) { var s = document.getSelection(); var r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } // IE else if (document.selection) { var r = document.body.createTextRange(); r.moveToElementText(e); r.select(); } } jQuery(function(){ jQuery('div.postbody td.code').parent().prev().find('b').html('Code: <a href="javascript:void()" onClick="selectCode(this)"><font face="verdana" color="red"></font> Select Content </a>'); });

phpBB 3, punBB and Invision

Code:: function selectCode(a) { // Get ID of code block var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0]; // Not IE if (window.getSelection) { var s = window.getSelection(); // Safari if (s.setBaseAndExtent) { s.setBaseAndExtent(e, 0, e, e.innerText.length - 1); } // Firefox and Opera else { // workaround for bug # 42885 if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>') { e.innerHTML = e.innerHTML + ' '; } var r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } } // Some older browsers else if (document.getSelection) { var s = document.getSelection(); var r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } // IE else if (document.selection) { var r = document.body.createTextRange(); r.moveToElementText(e); r.select(); } } if(text){}else{ var text = 'Selecionar todos';} jQuery(document).ready(function(){ jQuery("dl.codebox dt").not("dl.spoiler > dt").html('Code: <a href="#" onclick="selectCode(this); return false;" title="Select all the content" class="code-a"> Select Content </a>'); });

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

Tutorial written by Base, with the help of k.201017 and Gangstar15

No reproduction possible without our consent, in accordance with article L122-1 of the ICC.