"alles markieren"-Link über Codebox

[THE|PUNISHER*]

Dein Wissensstand: Fortgeschritten

Fehlerbeschreibung und Nachricht
Heyho ihr lieben xD
ich weiß das das thema hier schon einmal behandelt wurde und das eine lösung gefunden wurde xD
allerdings finde ich das thema nicht mehr und vermute das es eglöscht wurde...
und zwar geht es mir darum wie man es hinbekommt das man einen knopf oder so hat damit man im codetag alles markieren muss was ja sehr hilfreich sein kann bei steckbriefvorlagen oder ....
ich hoffe ihr wisst was ich meine? hier besteht ja auch die möglichkeit schön und einfach bei codes auf alles markieren zu drücken... vielleicht kann mir ja einer weiter helfen
LG
und schon einmal danke im vorraus an jeden der sich den schwachsinn heir durchliest xD

[Amaryllion]

Die CodeBox hier im CSB funktioniert folgendermaßen:

In Deinem CSS brauchst Du:

Code:

/* Code block */
dl.codebox {
    padding: 3px;
    background-color: #FFFFFF;
    border: 1px solid #d8d8d8;
    font-size: 1em;
}

dl.codebox dt {
    text-transform: uppercase;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 3px;
    font-size: 0.8em;
    font-weight: bold;
    display: block;
}

blockquote dl.codebox {
    margin-left: 0;
}

dl.codebox code {
    overflow: auto;
    display: block;
    height: auto;
    max-height: 200px;
    white-space: normal;
    padding-top: 5px;
    font: 0.9em Monaco, "Andale Mono","Courier New", Courier, mono;
    line-height: 1.3em;
    color: #8b8b8b;
    margin: 2px 0;
}

(Farben, Schriftart etc. kannst Du Dir ja selbst dort anpassen)

In Deinem HeadInclude.tpl (ich weiß jetzt den genauen Namen nicht auswendig, jedenfalls das Template, was in Deinen Header eingebunden wird) brauchst Du das:

Code:

<script type="text/javascript">
function selectCode(a)
{
    // Get ID of code block
    var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];

    // Not IE
    if (window.getSelection)
    {
        var s = window.getSelection();
        // Safari
        if (s.setBaseAndExtent)
        {
            s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
        }
        // Firefox and Opera
        else
        {
            var r = document.createRange();
            r.selectNodeContents(e);
            s.removeAllRanges();
            s.addRange(r);
        }
    }
    // Some older browsers
    else if (document.getSelection)
    {
        var s = document.getSelection();
        var r = document.createRange();
        r.selectNodeContents(e);
        s.removeAllRanges();
        s.addRange(r);
    }
    // IE
    else if (document.selection)
    {
        var r = document.body.createTextRange();
        r.moveToElementText(e);
        r.select();
    }
}
</script>

Und die Codebox selbst sieht so aus:

Code:

<dl class="codebox"><dt>Code: <a href="#" onclick="selectCode(this); return false;this.target='_blank';">Alles auswählen</a></dt><dd><code>Und hier kommt der Inhalt, der dann ausgewählt wird.</code></dd></dl>

[THE|PUNISHER*]

Uh vielen dank
Es funktioniert

[STROHHUT.kind]

Forumtyp: wbb


Fehlerbeschreibung und Nachricht
Beim durchforsten der HTML Hilfe bin ich auf das hier gestoßen und habe eine Frage zum letzten Punkt, weil das bei mir nicht ganz funktioniert.

Und die Codebox selbst sieht so aus:

Code:

<dl class="codebox"><dt>Code: <a href="#" onclick="selectCode(this); return false;this.target='_blank';">Alles auswählen</a></dt><dd><code>Und hier kommt der Inhalt, der dann ausgewählt wird.</code></dd></dl>

In meiner codetag.tpl sieht das derzeit noch so aus:

<table align="center" style="width:"425px"; table-layout: fixed;">
<tr>
<td><div style="overflow: auto; height: $codeheight; width: 100%;">
<table align="center" width="100%">
<tr>
<td><normalfont><b>code:</b></font></td>
</tr>
<tr>
<td>
<table cellpadding=4 cellspacing=1 width="100%" bgcolor="{tableinbordercolor}">
<tr>
<td bgcolor="{inposttablecolor}" id="inposttable" align="right" valign="top" width="10"><smallfont>$rowcount</font></td>
<td bgcolor="{inposttablecolor}" id="inposttable" valign="top" nowrap><smallfont>$code</font></td>
</tr>
</table>
</td>
</tr>
</table>

</div>
</td></tr></table>

Wie und wo muss ich den Code von Amaryllion nun einfügen?
Denn wenn ich ihn "einfach so" einfüge, krieg ich einen schwarzen Balken im Codefenster ^^
Oder wird Amaryllions Code einfach nur mit dem Inhalt meiner Codetag.tpl ersetzt & bei "Und hier kommt der Inhalt..." einfach das $code eingesetzt?

LG, STROHHUT.kind

[cariad]

Code:

<smallfont>$rowcount</font></td>
<td bgcolor="{inposttablecolor}" id="inposttable" valign="top" nowrap><smallfont>$code</font>

Ich würde nur diesen hier mit dem Code ersetzen o.ô da ich annehme, dass wbblite noch einen großen Teil der Tabellenkonstruktion benötigt, um es korrekt anzuzeigen, würde ich da so wenig wie möglich rauswerfen... und wenn das nicht richtig ist, würde ich mich eben sukzessiv hoch arbeiten (also immer die übergeordnete Tabelle wegnehmen und gucken, ob's jetzt klappt xD)

[STROHHUT.kind]

Whoho! Yay, danke cariad! Hat funktioniert. <3

[Corvus]

Guten Morgen zusammen,

erstmal vielen Dank fürs zur Verfügung stellen! Ich muss diesen Thread leider nochmal ausgraben.

Ich habe aktuell das Problem, dass der Code Tag "Alles markieren" sowohl in meinem Board als auch hier im CSB in Mozilla Firefox und in Google Chrome nicht mehr funktioniert. Im IE funktioniert es jedoch seltsamer Weise tadellos.
Hat jemand dasselbe Problem oder schon eine Lösung dafür gefunden? Leider ist css nicht unbedingt meine Stärke, weshalb ich mich über jede Hilfe freuen würde.

Vielen Dank!

Viele Grüße
Corvus

[AX]

Hey Corvus,

nur um sicher zu gehen: geht es bei Dir um ein phpBB Forum?

Hier im Thread ist ja oben eine Lösung genannt das für WBB nachzurüsten, das CSB ist allerdings ein phpBB Forum und da ist JavaScript offenbar das Problem, genauer gesagt die Datei styles/prosilver/template/forum_fn.js (statt prosilver könnte hier auch das von Dir genutzte Template als Name stehen).

Das könntest Du bei phpBB3 wiefolgt korrigieren:

Finde in der Datei forum_fn.js zunächst diese Funktion hier:

Code:

function selectCode(a)
{
    // Get ID of code block

In dieser Funktion findest Du nur wenige Zeilen weiter das hier:

Code:

        // Safari
        if (s.setBaseAndExtent)
        {
            s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
        }

Ersetze das damit:

Code:

        // Safari
        if ( false && s.setBaseAndExtent)
        {
            s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
        }

Dann sollte es wieder funktionieren.


WICHTIG: Du musst mindestens den Browser-Cache leeren, damit die .js Datei vom Forum neu geladen wird und die Änderungen wirksam werden.


Das ist jetzt auch nur eine Lösung für phpBB3.0.x Foren (!!), denn ich bin jetzt gerade wegen Deinem Beispiel hier vom CSB ausgegangen wo das Problem sich so vermutlich lösen ließe. In der Nachrüst-Lösung von oben in diesem Thread wird allerdings die selbe JavaScript Funktion genutzt, nur halt direkt eingebunden statt in einer ausgelagerten js-Datei. Also da könntest Du die Änderungen darin auch so umsetzen, das liegt dann vermutlich am selben Problem.


LG,
AX

[Corvus]

Hallo AX!

Vielen lieben Dank für deinen hilfreichen Beitrag!
Ich hab das alles zwar in ein wbblite eingebaut, aber gerade den Punkt im Java-Script ersetzt und siehe da, es funktioniert wieder. :love:

Liebe Grüße
Corvus

[AX]

Hi Corvus!

Super, da freue ich mich, dass ich Dir weiterhelfen konnte!

LG,
AX