Code-Blöcke ein- und ausklappen

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
 
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:
 
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
 
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 :)
 
Hallo nochmal!

Geheim ist das nicht, aber ich weiß nicht, ob du was mit localhost/HP anfangen kannst :D
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>
 
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.
 
Sorry, ich habe gar nicht gemerkt, dass es schon eine zweite Seite gibt! :S

Ich lese mir mal alles in Ruhe durch!

Sorry nochmal!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück