Kommentarhilfe mit Javascript realisieren

jared

hi liebes forum

ich habe grade versucht mir eine kleine kommentarhilfe in meine commentform einzubauen!
die dateien von http://script.aculo.us/ hab ich schon lange auf dem server und auch schon im header "definiert"!

eine ungefähre idee wie es aussehn soll hab ich auch!
ich poste mal den code...

HTML

<h4>Hilfe</h4>


<div id="d1">
                    <p>Kommentar erscheint nicht: Evtl. hat Askimet deinen Kommentar aufgrund Spamverdacht in die Spambox gepackt.
                    Da ich die Spambox aber regelmäßig checke bitte ich um etwas Geduld und schon kannst auch du deinen Kommentar sehen. </p>
                    <p>Bilder (Avatare): Auf <a href="http://site.gravatar.com">Gravatar.com</a> kann man 
                    sich mit seiner Email-Adresse registrieren und ein Bild hochladen, dann erscheint dieses
                    hier und in vielen weiteren Blogs natürlich auch.</p>
            </div> 


    
<a href="#" onclick="Effect.BlindUp('d1');; return false;">Up</a>
<a href="#" onclick="Effect.BlindDown('d1');; return false;">Down</a>

Alles anzeigen

jetzt hab ich aber ein kleines problem! die "hilfe" ist standardmäßig ausgeklappt... ich hab mich aus diesem grund hier auch schon schlau gelesen und das hier entdeckt! nur leider funktioniert es nicht bei mir mit der "hide" funktion!

und die andere sache wäre das dieses Up / Down nicht wirklich gut aussieht! wäre es möglich ein Symbol vor das wort "hilfe" zu setzen und man draufklickt geht die leiste erst runter.

ich hoffe ihr habt mein anliegen verstanden!

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

helli

Ich hab sowas ähnliches mit Funktions-Boxen in den Sidebars. Das ganze macht man mit css und der Eigenschaft "display"

HTML

<div id="dontshow" style="display:none">
  <p>Mein Inhalt</p>
</div


<div id="show" style="display:block">
  <p>Mein anderer Inhalt</p>
</div

Nur das div "show" wird angezeigt. Jetzt braucht man nur noch etwas Javascript zum Umschalten (prototype.js und effects.js aus dem scriptacoulus Paket müssen geladen sein):

Code

// get display-style of elements
function getElement(id) {
  var el = $(id);
  return el.style.display;
}


// Callback function for scriptaculous effects
function setElement (id, stil) {
  var el = $(id);
  el.style.display = stil;
  set_phCookie (id, stil); // Merkt sich die Einstellung im Cookie
}


// Callback function for scriptaculous effects
function setElementBlock (obj) {
  obj.element.style.display = 'block';
  set_phCookie(obj.element.id, 'block');
}


// Callback function for scriptaculous effects
function setElementNone (obj) {
  obj.element.style.display = 'none';
  set_phCookie(obj.element.id, 'none');
}


// Frontend with scriptacoulus flavor to setElement
function SetElDisplay (id, stil) {
  if (stil == 'block') {
    new Effect.Appear (id, {afterFinish: setElementBlock});
  } else {
    new Effect.Fade (id, {afterFinish: setElementNone});
  }
}


// switches the display-Style of elements
function SwitchElement(id1, id2) {
  if (getElement(id1) == 'block') {
   SetElDisplay (id1, 'none');
   if (id2 != '') { SetElDisplay (id2, 'block'); }
  } else {
   SetElDisplay (id1, 'block');
   if (id2 != '') { SetElDisplay (id2, 'none'); }
  }
}

Alles anzeigen

Die Cookie-Funktion brauchst du nicht unbedingt. So schaltest du dann zwichen "dontshow" und "show" um:

HTML

<h3 onclick="javascript:SwitchElement('show', 'dontshow')" 
style="cursor: pointer;">Hier Umschalten!</h3>

oder nur Show ein- und ausschalten.

HTML

<h3 onclick="javascript:SwitchElement('show', '')"
 style="cursor: pointer;">Hier Schalten!</h3>

In Action kannst du das ganze auf meinem Blog sehen: http://helli.de
Die grauen Boxen links und rechts kann man ein- und ausklappen. Und auch die "Weitersagen"-Funktion ist so gebaut, nur ohne scriptacoulus Effekte.

Die Cookie-Spielereien brauchst du nur, wenn du das für den nächsten Besuch des Users speichern willst. Ich hab dazu noch ein paar nette php-funktionen, die den Cookie auslesen und die Daten schon beim Seitenaufbau berücksichtigen.

Hope that helps...

Helli

SuMu

hallo helli,

das hier
// get display-style of elements
function getElement(id) {
.... usw.

packt man dann in eine extra js datei?

helli

SuMu: Kann man intern machen (ist bei mir so, ich hab alles theme spezifische JS in einem file), kann man aber auch in den HTML-Code einbetten.

Helli

jared

hallo helli

danke erstmal fürs helfen! hab mir deinen code mal angesehn... sieht garnicht so schlecht aus! muss ich mal mit meinem vergleichen! habs sondern soweit auch hinbekommen und mir scheint das meiner ein wenig "kleiner" ist als deiner

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Kommentarhilfe mit Javascript realisieren

Jetzt mitmachen!