The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Select Content Button

View previous topic View next topic Go down

Select Content Button

Post by Base on 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:

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 :
Code:
function selectCode(a){a=$(a).closest("dl").find(".cont_code,code")[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.setStart(a.firstChild, 0);b.setEnd(a, a.childNodes.length);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: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>')});

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
Tutorial originally written by Base, with the help of k.201017 and Gangstar15
It has been updated by Ange Tuteur to include an updated script by Ea.

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

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

View previous topic View next topic Back to top


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