Regeln und nützliche Hinweise
Lexi Help
Die neuesten Themen
» Registrierung defekt
von cybercrash Gestern um 22:49

» [phpBB2] index_box.tpl & Avatare verstecken
von Dr.Keks Gestern um 22:40

» [phpBB2] Avatare für Gäste unsichtbar
von Dr.Keks Gestern um 22:37

» Admin Email Ändern
von Bigtuber Gestern um 17:05

» Sternzeichen Wassermann endet am falschen Datum / Fische beginnt zu früh
von VampirinJayna Gestern um 14:22

» [phpBB3] Smilies können nicht neu erstellt werden
von Coffy Gestern um 6:13

» [Mitteilung] ModernBB - Eine neue Foren-Version für Forumieren-Foren
von chamutv Di 28 März 2017 - 20:43

» [phpBB3] [phpBB3] Forum nicht sicher
von Bigtuber Di 28 März 2017 - 17:43

» Passwort vergessen
von Bigtuber Di 28 März 2017 - 14:58

» [#9357]-[phpBB2] Registrierung funktioniert nicht
von amti Di 28 März 2017 - 14:17

» [Sammelthread] Unangebrachte Werbung
von Marcel´s Schnatterbude Mo 27 März 2017 - 9:46

» Admin Passwort vergessen
von ABC-Man Mo 27 März 2017 - 9:01

» Kalender
von Bigtuber So 26 März 2017 - 18:04

» Gifs einfügen
von Bigtuber So 26 März 2017 - 14:58

» Warrior Cats - NordClans
von Eislicht So 26 März 2017 - 0:28

» Gründeraccount Passwort vergessen
von Eozaen Sa 25 März 2017 - 20:02

www.forumieren.de

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

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

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

Beitrag von Zuckerpuppe am Fr 22 Jul 2011 - 14:49

Hallo Smile

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 Smile

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 Arrow HTML und Javascript Arrow Javascript Codes Verwaltung

Dort klickt ihr auf Arrow

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 Arrow Anzeige Arrow Bilder&Farben Arrow 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. Wink

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.
avatar
Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08
keine
phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

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

Beitrag von #Frank am Di 24 Dez 2013 - 11:33

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.



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!
avatar
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34607
Hinweis : Admin a.D.
Anmeldedatum : 13.08.08
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten