Code-Blöcke ein- und ausklappen

MatthiasGi · 11. September 2009

Hallo nochmal!

Oh, das war mein bescheuerter Fehler.
Statt das # für die id des divs anzugeben, habe ich den . für die class stehen gelassen :S

Nun verschwinden die Scrollbalken kurz, und erscheinen wieder, die Größe ändert sich nicht.

Damit nicht lange rum gerätselt werden muss, hier meine Funktion:

PHP:

function do_bbcode_code($action, $attributes, $content, $params, $node_object) {
    $zahl = mt_rand(0, 100000000);
    if (get_magic_quotes_gpc()) {
        $content = stripslashes($content);
    }
    $return = '<div class="code_container" id="code_container_'.$zahl.'"><div class="code_headcontent" id="code_headcontent_'.$zahl.'"><div class="code_header" id="code_header_'.$zahl.'"><p>';
    switch($attributes['lang']) {
      case 'autoit': $return .= 'AutoIt-Code'; break;
      case 'bash': $return .= 'Bash-Code'; break;
      case 'css': $return .= 'CSS-Code'; break;
      case 'html': $return .= 'HTML-Code'; break;
      case 'ini': $return .= 'INI-Datei'; break;
      case 'javascript': $return .= 'JavaScript'; break;
      case 'mysql': $return .= 'MySQL-Syntax'; break;
      case 'php': $return .= 'PHP-Code'; break;
      case 'xml': $return .= 'XML-Code'; break;
      default: $attributes['lang'] = 'text'; $return .= 'Code';
    }
    $geshi = new GeSHi($content, $attributes['lang']);
    $geshi->set_header_type(GESHI_HEADER_PRE_VALID);
    $geshi->set_overall_style('font: normal normal 90% monospace; color: #000;', false);
    $return .= ':</p></div><div class="code_content" id="code_content_'.$zahl.'">'.str_replace("\n&nbsp;\n", "\n", $geshi->parse_code()).'</div></div><div id="code_actions" class="code_actions_'.$zahl.'"><p onclick="var hoehe = document.getElementById(\'code_content_'.$zahl.'\').scrollHeight; $(\'#code_content_'.$zahl.' div\').animate({\'max-height\': \'none\', \'height\': hoehe+\'px\'}, 500);">'.utf8_decode("Feld vergrößern").'</p></div></div>';
    $return .= '<script type="text/javascript">if (document.getElementById("code_content_'.$zahl.'").scrollHeight > 170) { $(".code_actions_'.$zahl.' p").slideDown("slow"); }</script>';
    return $return;
}

Sieht schrecklich aus, ist sie auch

Diese Funktion wird immer aufgerufen, wenn ein [code]-Tag gefunden wurde.
$content enthält den Text zwischen den Tags, $attributes['lang'] die Programmier-, Skript-, Bash- oder was weiß ich-Sprache. Geshi ist der "Renderer" für den Syntax.

Kann mir jemand da vielleicht weiter helfen?

Grüße aus dem Pott,
Matthias

Sven Mintel · 11. September 2009

Moin nochmal

Weswegen iich eigentlich weiter vorher nach dem Markup gefragt habe, ist folgendes:
Wenn du weisst, dass da ein <div> ist, und dies irgendwie selektierbar ist, z.B. anhand einer Klasse, und du auch weisst, dass darin ein <pre> ist, worum sich alles dreht, dann ist das schon ausreichend für jQuery

Alles, was du bräuchtest, wäre dies:

Code:

<div class="code">
  <pre>code</pre>
</div>

Keine IDs, keine vorgefertigten Links zum Vergrössern(du weisst ja vorher garnicht, ob es vergrössert werden muss). Einzig ein einheitlicher Klassenname für alle <div>'s, fertig.

Ich hab da mal was vorbereitet(den Skriptcode siehst du da gleich in Aktion

)

http://doktormolle.de/temp/346909/

Vielleicht bringt dich das ja auf andere Gedanken

Falls du nicht klarkommst bei der Umsetzung mit Geshi, sag Bescheid, ich weiss vom Forum hier, dass es manchmal recht widerspenstig sein kann :suspekt:

MatthiasGi · 11. September 2009

Hallo!

Das ist genial!

Nur leider springt das ganze bei mir nicht richtig an.
Um das anzusprechen habe ich statt

Code:

div.code

Code:

div.code_content div

gesetzt. Der Seitenquelltext sieht wie folgt aus (Zusammenfassung aus Firebug):

Code:

<div id="code_content_57228806" class="code_content">
    <div class="autoit" style="font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 90%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; color: rgb(0, 0, 0);">
        <pre style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -x-system-font: none; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; vertical-align: top;">
    </div>
</div>

Danke für alles!
Matthias

Sven Mintel · 11. September 2009

Nur mit dem Geposteten Code geht auch das.

Ich würde tippen, dass da noch mehr Code ist, Geshi erzeugt ja bspw. Zeilenummern, das ist dort nicht ersichtlich.

Kopiere doch mal so eine Box mit dem Drumherum, lass dir dann per Rechtsklick den Auswahl-Quelltext zeigen, und poste den hier.

Oder poste einen Link, wo man das Live btrachten kann, wenn es nicht zu geheim ist

MatthiasGi · 11. September 2009

Hallo nochmal!

Geheim ist das nicht, aber ich weiß nicht, ob du was mit localhost/HP anfangen kannst

Ich habe das hier in LINUX am laufen (bin vor kurzem auf UBUNTU umgestiegen), und habe jetzt noch kein vernünftiges FTP-Programm (bzw. ich werde mir demnächst FileZilla herunter laden). Wenn dir das lieber ist, hole ich mir irgendwo einen Server und lade das da hoch.

Den gesamten Code habe ich hier kopiert. Ich habe als Test eine UDF von mir in AutoIt eingefügt, deshalb ist das länger... (gekürzt, damit ich das in die Datenbank speichern darf):

Code:

<div id="code_container_62021021" class="code_container">
<div id="code_headcontent_62021021" class="code_headcontent">
<div id="code_header_62021021" class="code_header">
<p>AutoIt-Code:</p>
</div>
<div id="code_content_62021021" class="code_content">
<div class="autoit" style="font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 90%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; color: rgb(0, 0, 0);">
<pre style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -x-system-font: none; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; vertical-align: top;">
<span style="font-style: italic; color: rgb(0, 153, 51);">; #INDEX# =======================================================================================================================</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Titel..........: MathEx</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; AutoIt Version.: 3.3.0.0 ++</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Sprache........: Deutsch</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Beschreibung...: Diese UDF ergänzt um einige mathematische Funktionen.</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Version........: 2.0.1.0</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; ===============================================================================================================================</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; #FUNCTION# ====================================================================================================================</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Name...........: _MathEx_IsPrime</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Beschreibung...: Prüft, ob eine Zahl eine Primzahl ist.</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Syntax.........: _MathEx_IsPrime($number[, $one_prime])</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Parameter......: $number - Die Nummer, die geprüft werden soll</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; $one_prime - Auf 1 setzen, wenn 1 eine Primzahl sein soll.</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Rückgabe.......: Erfolg - Gibt 1 zurück, wenn die Zahl eine Primzahl ist.</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Fehler - Gibt 0 zurück und setzt @error</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; |0 - $number ist keine Primzahl</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; |1 - $number ist keine Zahl</span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; Author ........: Progandy <Progandy at autoit dot de>, Matthias Gianfelice <matthias at gianfelice dot de></span>
<span style="font-style: italic; color: rgb(0, 153, 51);">; ===============================================================================================================================</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
_MathEx_IsPrime
<span style="color: rgb(255, 0, 0); font-weight: bold;">(</span>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$number</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">,</span>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$one_prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
0
<span style="color: rgb(255, 0, 0); font-weight: bold;">)</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$integer_number_mathex_prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
<a href="http://www.autoitscript.com/autoit3/docs/functions/Number.htm">
</a>
<span style="color: rgb(255, 0, 0); font-weight: bold;">(</span>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$number</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">)</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/functions/IsInt.htm">
</a>
<span style="color: rgb(255, 0, 0); font-weight: bold;">(</span>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$integer_number_mathex_prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">)</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
1
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$integer_number_mathex_prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">></span>
0
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$integer_number_mathex_prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
1
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/functions/SetError.htm">
</a>
<span style="color: rgb(255, 0, 0); font-weight: bold;">(</span>
0
<span style="color: rgb(255, 0, 0); font-weight: bold;">)</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
0
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$integer_number_mathex_prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
2
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
1
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
_MathEx_IsDivisible
<span style="color: rgb(255, 0, 0); font-weight: bold;">(</span>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$integer_number_mathex_prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">,</span>
2
<span style="color: rgb(255, 0, 0); font-weight: bold;">)</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$i</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
3
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/functions/Sqrt.htm">
</a>
<span style="color: rgb(255, 0, 0); font-weight: bold;">(</span>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$integer_number_mathex_prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">)</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
2
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
_MathEx_IsDivisible
<span style="color: rgb(255, 0, 0); font-weight: bold;">(</span>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$integer_number_mathex_prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">,</span>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$i</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">)</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/functions/SetError.htm">
</a>
<span style="color: rgb(255, 0, 0); font-weight: bold;">(</span>
0
<span style="color: rgb(255, 0, 0); font-weight: bold;">)</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
0
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
1
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$one_prime</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/functions/IsInt.htm">
</a>
<span style="color: rgb(255, 0, 0); font-weight: bold;">(</span>
<span style="font-weight: bold; color: rgb(170, 0, 0);">$integer_number_mathex_prime</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">)</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">=</span>
1
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
1
<a href="http://www.autoitscript.com/autoit3/docs/functions/SetError.htm">
</a>
<span style="color: rgb(255, 0, 0); font-weight: bold;">(</span>
1
<span style="color: rgb(255, 0, 0); font-weight: bold;">)</span>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="color: rgb(255, 0, 0); font-weight: bold;">-</span>
1
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<a href="http://www.autoitscript.com/autoit3/docs/keywords.htm">
</a>
<span style="font-style: italic; color: rgb(0, 153, 51);">;==>_MathEx_IsPrime</span>
</pre>
</div>
</div>
</div>
<div id="code_actions" class="code_actions_62021021">
</div>
</div>

Sven Mintel · 12. September 2009

localhost, perfekt....da konnte ich grad eine Verbindung herstellen, mal gucken

Mmmh, ist schon komisch, bekommst du irgendwelche Fehlermeldungen?

Selbst das letztere Codefragment funktioniert bei mir auf Anhieb, womit ich nicht unbedingt gerechnet habe.

Du könntest auch alle Dateien, die beteiligt sind, Zippen, und hier als Anhang ranhängen(ich weiss allerdings nicht, ob Dateianhänge bei Gästen gehen).

Oder schicke sie mir per Mail an: tuts@[domainvomverlinktenbeispiel]
Dann schaue ich nach, woran es liegt.

Maik · 12. September 2009

Moin,

Sven Mintel hat gesagt.:
Du könntest auch alle Dateien, die beteiligt sind, Zippen, und hier als Anhang ranhängen(ich weiss allerdings nicht, ob Dateianhänge bei Gästen gehen).

Gäste können in ihren Antworten keine Anhänge verwalten.

mfg Maik

MatthiasGi · 12. September 2009

Kann mir niemand weiter helfen?

Grüße aus dem Pott,
Matthias

Maik · 12. September 2009

Sven würde ja gerne

Sven Mintel hat gesagt.:
Oder schicke sie mir per Mail an: tuts@[domainvomverlinktenbeispiel]
Dann schaue ich nach, woran es liegt.

mfg Maik

MatthiasGi · 13. September 2009

Sorry, ich habe gar nicht gemerkt, dass es schon eine zweite Seite gibt! :S

Ich lese mir mal alles in Ruhe durch!

Sorry nochmal!

Code-Blöcke ein- und ausklappen

MatthiasGi

Sven Mintel

Mitglied

MatthiasGi

Sven Mintel

Mitglied

MatthiasGi

Sven Mintel

Mitglied

Maik

MatthiasGi

Maik

MatthiasGi

Neue Beiträge