Select Content Button Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

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.
The forum of the forums
2 posters

    Select Content Button

    Base
    Base
    Base
    Forumaster


    Male Posts : 10386
    Reputation : 1695
    Language : English and French
    Location : United Kingdom, England
    • Post n°1

    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 :

    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>')});

    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.
     updated by APE. 04.25.2017
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51506
    Reputation : 3519
    Language : English
    Location : United States
    • Post n°2

    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.
    • Back to top