Kommentare ein-und ausblenden. Aber wie?

Frittey

Ahoi Leute,
alles fresh?

Ich möchte gerne, das der User die Kommentare (bzw. Kommentarfunktion) mit einem Klick auf- und zuklappen kann. Jedoch bin ich noch Neuling in Sachen Javascript und Qjery. So soll es später in etwa ausschauen:
http://www.the-star-traveller.de/?p=616
(Bei Klick auf Sprechblase klappen Kommentare auf.)

Für die Lösung meines Problems habe ich die Forum-Suche verwendet und dabei nur einen Link gefunden, mit dem ich jedoch nichts anfangen kann:
http://forum.wordpress-deutschland.org/design/69859-k…ausblenden.html

Kennt jemand vielleicht ein gutes Tutorial, was mein Problem lösen könnte? Habe auch schon gegoogelt, aber die meisten Tuts verstehe ich nicht. Ich will auch kein Plugin für die Umsetzung verwenden.

Mir wäre auch schon mit weiteren Stichwörtern weitergeholfen.
Vielen Dank im Vorraus!

Gruß,
Frittey

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

als erste kleine Einführung könntest du hier mal lesen: http://www.im-tal.net/568/effekte-mi…script-library/

Dein JS könnte dann vielleicht so aussehen, vorausgesetzt ein DIV mit der ID [COLOR=Red]#comments_js[/COLOR] umschließt das Kommentarformular in der comments.php und die Sprechblasengrafik bekommt die ID #[COLOR=Olive]comments_js_icon[/COLOR]:

Code

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("[COLOR=Red]div#comments_js[/COLOR]").hide();
  jQuery("[COLOR=Olive]img#comments_js_icon[/COLOR]").click(function(){
    jQuery("[COLOR=Red]div#comments_js[/COLOR]").slideToggle("normal");
  });
});
</script>

Frittey

Astrein!
Die Testdatei funktioniert schonmal. Jetzt versuche ich mal das ganze in Wordpress.
Vielen Dank für deine Hilfe! :D

Frittey

HeyHo, ich bins nochmal ;)
Ich habe jetzt versuchst, es so einzubinden, wie du sagtest. Hier erstmal in einer Testdatei. Wenn ich dann aktualisiere zeigt der Browser mit garnichts an (weißer Screen). Hab keine Ahnung wo hier der Fehler liegen könnte. Die Pfade habe ich alle mehrmals überprüft, - die müssten stimmten.

HTML

<html>
<head>
<title>Testdatei</title>


<script src="jquery/jquery-1.4.3.unc.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("div#comments_js").hide();
    jQuery("img#comments_js_icon").click(function(){
        jQuery("div#comments_js").slideToggle("normal");
        });
});
</script>




</head>


<body>


<div id="comments_js">
<h1>Kommentare schreiben</h1>


<div id="comments_js_icon">
<img src="images/buttons/button_comment.jpg">
</div>
<p>
Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient.
Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient.
Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient.
Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient.
Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient.
</p>
</div>


</body>
</html>

Alles anzeigen

maxe

Du müsstest das Icon schon außerhalb des DIV [FONT=monospace]#[/FONT]comments_js legen, sonst wird es ja mit ausgeblendet ;-)

maxe

Außerdem hast du nicht beim img die ID eingefügt, sondern ja den DIV drum gelegt. Also müsste es ja auch im jquery geändert werden:

Code

jQuery("[COLOR=Red]div[/COLOR]#comments_js_icon").click(function(){

und dann evtl. noch die jQuery zum testen mit $ ersetzen, WP selber nimmt dann allerdings jQuery.

Hier mal so wie ich es testen würde (mit dem img und dem $):

HTML

<html>
<head>
<title>Testdatei</title>


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("div#comments_js").hide();
    $("img#comments_js_icon").click(function(){
        $("div#comments_js").slideToggle("normal");
        });
});
</script>




</head>


<body>


<[COLOR=Red]img  id="comments_js_icon"[/COLOR] src="http://forum.wordpress-deutschland.org/images/buttons/button_comment.jpg">


<div id="comments_js">
<h1>Kommentare schreiben</h1>


<p>
Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient.
Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient.
Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient.
Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient.
Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient. Die ist ein Lauftext, der als Platzhalter dient.
</p>
</div>


</body>
</html>

Alles anzeigen

treibstoff

Hallo maxe,
Hab mich mal kurz an Dein Script drangehangen....
soweit in Ordnung...

allerdings:

In wp 3.01 liegt noch in den includes die jquery 1.4.2

Mit der läuft dein kleines Script nicht.

Hab mal die 1.4.4 reingelegt (mit der dein Script läuft).
Die allerdings verursacht 'n javascript Error wg. style in Zeile 34 vom Script.
Macht ansonsten keinen Ärger aber eben halt gelbes Sriptfehler Fensterchen im IE...
Also wieder 1.4.2 rein.

maxe

Wenn du die WP jQuery verwendest, musst du im Code die "$" durch "jQuery" ersetzen.

Zitat

und dann evtl. noch die jQuery zum testen mit $ ersetzen, WP selber nimmt dann allerdings jQuery.

treibstoff

hallo maxe,
danke für deine Antwort.

Daran liegts aber nicht.

Wie gesagt:
Auch ohne Script gibt es die Fehlermeldungen.

Es liegt an der jquery-1.4.4.js.
Nehme ich die in wp 3.0.1 verwendete 1.4.3 Version ist alles OK...außer das damit das Script nicht läuft.:(

Nun ja: Problem ist Lightbox

element.dispatchEvent is not a function
element.dispatchEvent(event);
protot…r=1.6.1 (line 4619)
hervorgerufen durch prototype.js

element.style is undefined
element.style.width = w “px”;
lightb…ver=1.8 (line 33
hervorgerufen durch lightbox.resize.js

:shock:

MStemberg

Warum willst Du das mit jquery machen?

Ich blende bei mir mit Click auf ein Bild meine Smilies (Plugin wp_grins) ein oder aus.

Die Smilies stehen in einem DIV mit der id "wp-grins" und sind standardmäßig auf style.display='none' gesetzt. Bei Click auf das Bild wird die JS-Funktion "hideshow()" aufgerufen, die meinen Smilieblock zunächst nach style.display abfragt und dann den style.display setzt (none oder block), der nicht als Ergebnis gewonnen wurde.
Zusätzlich wird das Bild im DIV "smiliehide" je nach Anzeige oder nicht ausgetauscht.

http://www.1step-beyond.de/2010/10/ein-au…des-wochenende/

PHP

function hideshow() {
var seeme=document.getElementById('wp_grins').style.display;
//alert(seeme);
if (seeme=='none') {
document.getElementById('wp_grins').style.display='block';
document.getElementById('smiliehide').innerHTML='<img src="<?php bloginfo('template_url'); ?>/images/minus_smile.gif" width="16" height="16" align="absmiddle" alt="" />&nbsp;Smilies verbergen.';
} else if (seeme=='block') {
document.getElementById('wp_grins').style.display='none';
document.getElementById('smiliehide').innerHTML='<img src="<?php bloginfo('template_url'); ?>/images/plus_smile.gif" width="16" height="16" align="absmiddle" alt="" />&nbsp;Smilies anzeigen.';
}
}

Alles anzeigen

Vielleicht gibt Dir das einen Denkanstoß ohne jquery.

treibstoff

Hallo,
Das ist mir schon klar...das ich sowas über Layer verstecken mittels Show/hide funktionen machen kann.

Mich hat diese Funktionsweise über jquery.js interessiert, die ja sowieso schon geladen ist - und auch geschmeidiger beim Öffnen des Layer verläuft.

Nun denn....dabei aber nun das Problem mit der Lightbox entdeckt.
Die kann eben nicht mehr mit den neueren (ab jquery 1.4.2) Versionen von jquery sauber arbeiten. Wie ich lese macht das auch 1.4.3 schon Probleme.
Lightbox ist seit Februar glaub ich nicht mehr angepasst worden.

Und - Lightbox wird ja nun massenweise angewendet.:confused:

aber danke
und Grüße thomas

maxe

Könntest ja mal die Alternative testen: http://wordpress.org/extend/plugins/wp-slimbox2/

treibstoff

danke maxe....

aber jquery 1.4.4 scheint sich wohl zum Problem auszuwachsen:

siehe codestyling

maxe

richtig, hab ich gestern auch gelesen :-(

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Kommentare ein-und ausblenden. Aber wie?

Jetzt mitmachen!