[Tuto] [alle Versionen] Funktion "diesen Code markieren"

Hallo

vor einiger Zeit haben wir ja hier im Forum die Funktion "diesen Code markieren" für die Codes eingeführt.

Heute möchte ich euch erklären, wie man dieses Script einbaut und wie man es noch per CSS in der Optik verändern kann.
Zudem zeige ich euch hiermit, wie man unsere neue Scriptfunktion benutzen kann

Ohne Script sieht die Codebox ja folgendermaßen aus:


Damit es nun einfacher ist, den kompletten Code zu kopieren, wird durch das Script der gesamte Code markiert, wenn man auf den Link klickt.

Das soll dann nach erfolgreichem Einbau des gleich folgenden Scriptes und dem CSS Code so aussehen:

---

Nun beginnen wir mit dem Einbau. Dazu geht ihr in den Adminbereich
Module HTML und Javascript Javascript Codes Verwaltung

Dort klickt ihr auf

Dann gebt ihr einen gewünschten Titel ein, wie das Script heißen soll und klickt "in den Themen/Beiträgen" an...


Nun fügt ihr in das Scriptfeld darunter folgendes ein:

Code:

function selectCode(a){a=a.parentNode.tagName==="B"?$(a).closest("table").find(".cont_code")[0]:$(a).closest("dl").find("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.selectNodeContents(a);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) dt").add($("div.cont_code").closest("table").find("span.genmed b")).append('<span onClick="selectCode(this)" class="selectCode">diesen Code markieren</span>');
    });

Ganz am Ende des Scriptes findet ihr folgenden Abschnitt, wo ihr den Text, der über dem Code erscheint, noch personalisieren könnt.

class="selectCode">diesen Code markieren
</span>');

Wenn alles fertig ist, dann klickt ihr auf 'Bestätigen'.

Nun erscheint der Text aber ganz links direkt neben "Code" und sticht noch nicht genug hervor:


Darum setzen wir jetzt noch einen CSS-Code ein, der das Ganze nach Rechts rückt und dem Text eine Farbe gibt.
Adminbereich Anzeige Bilder&Farben Farben -> Reiter: CSS Stylesheet

Code:

.selectCode {
    color: #0372BE;
    cursor: pointer;
    float: right;
    font-weight: normal;   
}

Über diesen CSS-Code habt ihr nun die Möglichkeit, die Farbe des Textes zu ändern, die Schriftart, etc.
In unserem Beispiel haben wir jetzt eine blaue normale Großschrift.
Viele hilfreiche Hinweise und Erklärungen zu CSS und Schriftformatierungen findet ihr hier oder auf anderen Seiten, die ihr über google finden könnt.

Natürlich ist es auch noch möglich, ein Hintergrundbild einzusetzen, sowie andere nette Spielereien.

Wir bitten jedoch darum, unser Maskottchen, das hier im Supportforum zu sehen ist, nicht zu verwenden, da es von unserem Grafiker ArtGraphicsFlo eigens dafür angefertigt worden ist und unter Copyrightschutz steht.

Das gleiche gilt übrigens auch für das komplette Tutorial, das von mir geschrieben wurde. Ein herzliches Dankeschön geht an Etana aus dem französischen Supportforum für die Unterstützung bei dem Script.

Wichtiger Hinweis vom 24.12.2013:

Da es durch eine Technische Umstellung der Classen der Codebox und der Zitate Box bei phpBB2 Foren dazu kommt, das dieser Zusatz nun bei beiden Boxen immer zweimal angezeigt wird, wurde der Code an die neuen Gegebenheiten angepasst.
User die von diesem Fehler betroffen sind, tauschen bitte den Inhalt ihres Script durch diesen hier aus:

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.selectNodeContents(a);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">diesen Code markieren</span>');
            });

Ansonsten gelten weiterhin die Erklärungen von oben.