Code-Blöcke ein- und ausklappen

M

MatthiasGi

Hallo allerseits!

Ich habe einen Container (div), der einen Code enthält (pre). Nun habe ich (um lange Code-Schnipsel zu vermeiden) über CSS ein max-height Attribut gesetzt (170px), damit ich Scrollbalken bekomme.

Nun würde ich gerne einen Button darunter anfügen mit der Aufschrift "Vergrößern" o.ä. Nun möchte ich das aber nicht, wenn das Feld zu klein ist, max-height also nicht erreicht. Wie stelle ich das fest?

Und um die Größe zu ändern, benutze ich JavaScript (jquery). Dazu bräuchte ich die Höhe ohne max-height. Wie ermittele ich diese?

Danke schon im Voraus,
Matthias
 
Hallo nochmal!

Danke für die Antwort!

Ich habe nun folgenden Code:
PHP: 
echo '<script type="text/javascript">if (code_content_'.$zahl.'.scrollHeight > 170) { $("#code_content_'.$zahl.'").SlideDown("slow"); }</script>';
($zahl ist eine PHP-Variable mit einer eindeutigen Nummer).

Leider funktioniert das ganze nicht. Ist der Syntax falsch?

code_content_$zahl ist die Id des Containers.

Danke schon im Voraus,
Matthias
 
Hi,

falls code_content_'.$zahl.' die ID ist, kannst du mit getElementById auf das Element zugreifen.
Code: 
if(document.getElementById("code_content_'.$zahl.'").scrollHeight>170)
Ciao
Quaese
 
Hallo!

Super, danke, das funktioniert :)

Jetzt habe ich nur ein kleines Problem:
Im onclick-Event des p-Tags habe ich folgendes (mit PHP-Code mal, damit ich die Backslashes nicht rausmachen muss :P )

PHP: 
echo '<p onclick="var hoehe = document.getElementById(\'code_content_'.$zahl.'\').scrollHeight; $(\'.code_content_'.$zahl.'\').animate({max-height: none; height: +hoehe+}, 500);">'.utf8_decode("Feld vergrößern").'</p>';

Ich kann mit Variablen in JS nicht richtig umgehen, aber so ähnlich müsste es doch funktionieren.
Ich denke, dass ich die Variable falsch angefügt habe, aber wie muss es richtig heißen?

Grüße aus dem Pott,
Matthias
 
Hast du bitte mal ein Codefragement(HTML-Quelltext aus dem Browser) parat, in dem dieses <p> und das dazugehörige <pre> ersichtlich sind?
Warum: weil man das evtl. alles viel komfortabler erledigen kann, ohne $zahl usw. ;):)
 
Der Code aus dem Quelltext sieht dann so aus:
Code: 
<div id="code_actions" class="code_actions_26891023"><p onclick="var hoehe = document.getElementById('code_content_26891023').scrollHeight; $('.code_content_26891023').animate({'max-height: none; height: '+hoehe}, 500);">Feld vergrößern</p></div>

$zahl ist eine zufällige Zahl zwischen 0 und 1.000.000 (einschließlich). Da ich mehrere Code-Blöcke habe. Das ganze wird nämlich über eine BB-Code Parserklasse erzeugt.

Danke schon mal im Voraus!
Matthias
 
Hi,

versuchs mal so:
Code: 
$(\'.code_content_'.$zahl.'\').animate({\'max-height\': \'none\', \'height\': hoehe+\'px\'}, 500);

Neben dem richtigen Escapen gilt es zu beachten, dass die Komponenten bei der literalen Schreibweise von Objekten durch Kommata getrennt werden (max-height und height). Weiterhin solltest du diese Eigenschaften in Hochkommata setzen, sonst erhält du z.B. bei max-height eine Fehlermeldung.

Ciao
Quaese
 
Leider bleibt auch das ohne Erfolg.

Soll ich direkt bei der jQuery-Community nachfragen?

Danke nochmal!
Matthias
 
Hi,

folgendes funktioniert bei mir:
Code: 
<?php
?>
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<style type="text/css">
  <!--
.code_content_0{
  height: 200px;
  width: 200px;
  border: 1px solid #000;
  overflow: auto;
}
 //-->
</style>
</head>
<body>
<div id="code_content_0" class="code_content_0"><div style="height: 400px;">code_content</div></div>
<?php
$zahl = 0;
echo '<p onclick="var hoehe = document.getElementById(\'code_content_'.$zahl.'\').scrollHeight; $(\'.code_content_'.$zahl.'\').animate({\'max-height\': \'none\', \'height\': hoehe+\'px\'}, 500);">'.utf8_decode("Feld vergrößern").'</p>';
?>
</body>
</html>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück