Regeln und nützliche Hinweise
E-Mail-Adressen dürfen nicht veröffentlicht werden!
Lexi Help
Die neuesten Themen
» Passwort lässt sich nicht zurücksetzen
von inde Heute um 0:56

» REGELN IM SUPPORTBEREICH
von Forumbot Gestern um 17:17

» REGELN IM SUPPORTBEREICH
von Forumbot Gestern um 17:16

» REGELN IM SUPPORTBEREICH
von Forumbot Gestern um 17:15

» REGELN IM SUPPORTBEREICH
von Forumbot Gestern um 17:14

» REGELN IM SUPPORTBEREICH
von Forumbot Gestern um 17:13

» REGELN IM SUPPORTBEREICH
von Forumbot Gestern um 17:12

» [phpBB2] Forum "lädt sich tot"
von inde Gestern um 10:38

» [phpBB2] Navigationsmenü plötzlich abgehoben
von Dr.Keks Sa 18 Feb 2017 - 19:26

» [PunBB] Beiträge werden nach ca 250 Zeichen abgeschnitten
von inde Sa 18 Feb 2017 - 15:45

» Keine Zugangsdaten zu Forum/ Zugangsdaten verloren gegangen
von Bigtuber Sa 18 Feb 2017 - 12:15

» Rahmen um Profilfelder im Beitrag
von Dr.Keks Fr 17 Feb 2017 - 20:21

» [phpBB2] Icon bei Profilfeld umsetzen
von Dr.Keks Fr 17 Feb 2017 - 20:02

» Gründer Passwort
von inde Do 16 Feb 2017 - 22:10

» Paradise Found - Rollenspiel mit Wölfen
von Zuzu Do 16 Feb 2017 - 8:44

» [phpBB3] Schatten um Usernamen
von Chocolate Bean Di 14 Feb 2017 - 19:33

Partner
www.forumieren.com

[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.

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!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34603
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