jQuery FAQ-Toggle, Javascript wohin?

Triggertrix · 07.08.2012

Hallo,

dank diesem netten Tutorial:
traue ich mir eigentlich zu so etwas auf meine Seite zu bauen.
Problem ist allerdinsg das ich nicht weiß wie ich das eine Script von anderen abgrenzen muss bzw. hab ich ja schon jQuery 1.7.2 auf dem Server liegen und frage mich ob ich das nicht dafür nutzen kann… müsste doch Ressourcenschonender sein, oder?

Also, Option A: ich nehme den Code von dem netten Herren da oben. Setze ich dann den Javascriptcode einfach unter den anderen in den Headbereich? Oder gibt es da Konflikte, falls, wie grenze ich die Scripte voneinander ab?

Option B: Wenn ich das bereits auf dem Server liegende jQuery nutzen kann, woher bekäme ich dann ein ähnliches Script wie der auf der Seite hat, bzw. wie mache ich es zu einem ähnlichen Ergebnis zu kommen?

btw. das hier ist die Seite: und bevor ich da einen Fehler mache, ich spreche nicht eine Silbe Javascript, vielleicht gerade noch

Code:

<script language="JavaScript" src="jquery-1.7.2.min.js" type="text/javascript"></script>

…… und ich glaube das ist sogar HTML und nicht JS :rolleyes:

Dank & Gruss

Duddle · 07.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Du knallst

HTML:

<script type="text/javascript">
  $(document).ready(function() {
    // Macht den Mauszeiger zum "pointer"
    $('.faq dl dt').mouseover(function() {
      $(this).css('cursor', 'pointer')
    });
    // Fährt die Menüpunkte ein und aus
    $('.faq dl dd').hide();
    $('.faq dl dt').click(function() {
      $(this).next('dd').slideToggle('fast').siblings('dd').slideUp('fast');
      $(this).toggleClass('down');
    });
  });
</script>

irgendwo in den Quelltext (<head> wäre üblich), bindest jQuery ein (das machst du jetzt schon auf deiner Seite) und fertig. Das im Tutorial gezeigte Script nutzt lediglich die Funktionen vom jQuery-Objekt, welches du beim Einbinden von jquery-*.min.js automatisch implizit erzeugst.

Angemerkt sei noch, dass es für diesen Effekt gibt, die das nochmals vereinfachen. Aber falls dir die Variante im Tutorial schon reicht, bleib dabei.

Duddle

Triggertrix · 07.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Super Sache, vielen lieben Dank!
Also, ja ich will nur in der Sektion FAQ´s so etwas einbinden (vorerst ;o) )
Heute hab ich ne Matschbirne, probier ich gleich mal Morgen aus.

Also wenn ich es richtig verstehe, kollidieren mehrere Javascripts nicht untereinander.

Noch mal, vielen Dank

EDIT:

Hab doch noch heute angefangen, bin aber irgendwie zu doof…… entweder meine CSS-Superkräfte haben Kryptonid abbekommen, oder das Javascript macht doofe Sachen…… ich bekomme oben bei den Antworten immer eine Lücke…… hat jemand ne Ahnung was das soll?

Dank & Gruss

oh P.P.S hier:

Myhar · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Du meinst den Abstand nach oben? Wie sich mittels Webdevolper Tools leicht feststellen lässt, hast du in deiner CSS folgendes angegeben:

Code:

#main-block p {
margin: 0.9em 0px;
}

Triggertrix · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Hm…… tendenziell richtig, weiter unten habe ich aber auch angegeben:

Code:

.faq p {
padding-left:1em;
padding-right:1em;
margin-left:1em;
margin-right:1em;
}

da dürfte das ja aushebeln…

Wenn ich die Antwort ausklappe, habe ich für den Bruchteil einer Sekunde, die komplette Höhe der Antwortfläche. Erst wenn es vollends ausgeklappt ist, habe ich oben diese Spalte.
Ich habe jetzt sämtliche Auszeichnungen die dafür verantwortlich sein könnten, raus genommen und getestet. Keine Änderung an dem Spalt……

Zumal die Animation ja diese Macke hat (und ich von JS nix verstehe) hätte ich jetzt am ehesten vermutet das da der Fehler liegt.

Will da nix falsches behaupten, wie gesagt nur eine Vermutung weil mir sonst nix mehr einfällt.

Myhar · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Nein, das hebelt das nicht aus. Ein ID Selektor hat eine viel höhere Gewichtung als ein Klassen Selektor.
Sieh dir deine Styles mit einem Webdeveloper Tool an, dann siehst du, welche Anweisungen wo überschrieben werden. Vielleicht komme ich später dazu, mir das genauer anzusehen. Im Moment ist dieser kurze Input alles, was ich dir bieten kann.

Triggertrix · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Oh, das wusste ich nicht :rot:

Ich hab jetzt herum experimentiert, hab die Klasse von .faq zu #faq gemacht, dann greift das JS aber nicht mehr.
Hab auch versucht im Script oben bei

Code:

$('.faq dl dd').hide();
    $('.faq dl dt').click(function()

jeweils auf #faq zu ändern aber, wie gesagt, funktioniert dann das Script nicht mehr……

Sprich ich laufe in einen Konflikt… und alle <p> Elemente deswegen anders darzustellen finde ich dann doch etwas übers Ziel hinaus.

Wie kann ich denn die Klasse zu einer ID verwandeln und das Script trotzdem greifen lassen? Das sollte doch eigentlich funktionieren und müsste nur in JS anders notiert werden (so wie ich das bisher verstehe), oder?

Dank & Gruss

Duddle · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Deine Seite wechselt öfters den Style, wahrscheinlich arbeitest du live daran. Steht deine Frage noch im Raum, oder bist du mit der derzeitig sichtbaren Version zufrieden?

Duddle

Triggertrix · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Jep, während ich in den Screen beisse, schaffe ich es machmal Tasten zu drücken ;o)

Ich versuche gerade mit aller Kraft dieses Problem zu lösen…… bin aber im Moment irgendwie zu doof…

Also Unterstützung ist herzlich erbeten!

P.S. hab sie jetzt wieder auf den nicht experimentellen Modus umgestellt

Duddle · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Die Frage ist, wie es aussehen soll - sonst kann man schlecht beurteilen was der Fehler ist. Die Version von ... heute morgen (weißer, abgerundeter Hintergrund für die FAQ-Antworten) war jedenfalls bis auf ein paar margin-Fehler in Ordnung.

Das JS selbst scheint ja wie erwartet zu funktionieren.

Duddle

Triggertrix · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Du hast recht, ein wenig kopf klären und mal strukturieren…

Also!
Die Frage soll in H2, mit einem grauen Hintergrund (#CCC) sein, abgerundete Ecken oben links und rechts, unten Kante.

Die Antwort soll im <p> Stil sein, das passt soweit, der Hintergrund soll weiss sein, abgerundete Kanten unten links und rechts.

Sowohl Frage, also auch Antwort, sollen schön viel Abstand vom Rand des Hintergrundes bekommen.
Sofern mir das auch noch jemand sagen kann, der Hintergrund der Frage, soll nicht
Seitenbreit sein, sondern nur etwa zur Hälfte, oder Dreiviertel oder so.…
Oh und der Hintergrund der Antwort, soll bei dem der Frage ansetzen, also das man so etwas wie den Effekt einer Schriftrolle oder so etwas hat.

Mann fühl ich mich gerade hilflos, das sollte doch eigentlich nicht soooo schwer sein

Duddle · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Die Version wie sie jetzt ist (grüner Hintergrund für Antworten) braucht für "div.faq dd" nur ein "margin-left: 0;" und das Ding sitzt.
Edit: zumindest im Firefox.

Duddle

Triggertrix · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

;o) beschämend……… ja, jetzt auch in Safari und Opera……

oben die margin Werte in zusammenspiel mit dem von Dir benannten marin-left, sind das wonach ich jetzt einen gesamten Morgen gesucht habe ;o)

Das einzige was mir bei dem Thema noch übrig bleibt und für Dich wahrscheinlich nicht mal ein Nachdenken benötigt, für mich aber bis jetzt ebenfalls unauffindbar war, wie bekomme ich in den Elementen dt und dd, Kontrolle über die Schriften? Also Überschrift soll ja H2 sein, das kann ich nur zuweisen indem ich es direkt in die Notation im HTML schreibe (geht, würde es aber gerne richtig wissen) und die Antwort ist ja ein vererbtes <p> Element, falls ich das ändern wollen würde, müsste ich das ja auch separat ansteuern können müssen.

Duddle · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Triggertrix schrieb:
wie bekomme ich in den Elementen dt und dd, Kontrolle über die Schriften

Ganz normal? Du wählst das Element aus und änderst die relevanten CSS-Eigenschaften.

Triggertrix schrieb:
Also Überschrift soll ja H2 sein, das kann ich nur zuweisen indem ich es direkt in die Notation im HTML schreibe

Was heißt "die Überschrift soll H2 sein" für dich? Soll es die gleichen Eigenschaften haben wie das h2-Element? Oder willst du statt dem dt ein h2 haben?

Duddle

Triggertrix · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Soll es die gleichen Eigenschaften haben wie das h2-Element? Oder willst du statt dem dt ein h2 haben?

Ja, nee, das Element dt soll die Eigenschaften von h2 haben, also das was ich schon bei h2 notiert habe, will ich dem zuordnen.
Und ich weiss eben nicht wie ich das eine zum anderen geschoben bekomme oder ist das "unüblich" bzw. nur umständlich machbar? Also ansonsten könnte/müsste ich ja das nehmen, was ich bei h2 habe und einfach bei dt noch mal rein schreiben, denke mehr nur das geht cleverer, so wie ich das System bisher verstanden habe.

Vielleicht sollte ich mich erklären, das ist die erste Internetseite, die tatsächlich selbst gebaut habe. Das meiste habe ich jetzt glaube ich begriffen, aber einen Transfer zu leisten finde ich an einigen Ecken noch ganz schön schwierig…… deshalb stelle ich wahrscheinlich ziemlich dämliche Anfängerfragen, sorry

Gruss & Dank

Duddle · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Naja, die üblichen Anfängerfragen werden in der Regel in Tutorials geklärt. Auch ist das mittlerweile ein Fall für HTML und CSS, hat also nix mehr mit "PHP und andere[n] Scriptsprachen" zu tun. Aber da wir schonmal dabei sind:

Es ist zwar nicht die schickste Seite, aber es ist eines der ersten Suchergebnisse für "CSS Syntax":

Teilen sich mehrere Selektoren denselben Deklarationsblock, können sie durch Kommata getrennt nacheinander aufgeführt werden.

Also sind folgende zwei Variationen gleichwertig:

HTML:

dt {
  margin: 2em;
}
h2 {
  margin: 2em;
}

HTML:

dt, h2 {
  margin: 2em;
}

Natürlich funktioniert die Geschichte auch mit komplexeren Selektoren.

Duddle

Triggertrix · 08.08.2012

AW: jQuery FAQ-Toggle, Javascript wohin?

Aber da wir schonmal dabei sind

Ich wollte deswegen nicht extra den Thread wechseln und ein neues Thema eröffnen…

Ist schwierig, wenn man nicht benennen kann wonach man sucht, aber das bringt mich wieder Lichtjahre weiter.

Ich hatte zuletzt an die Admins geschrieben, wegen Typen wie Dir hier im Forum, ob man nicht eine "Danke" Funktion einbauen könnte, damit man entsprechendes Kudos verteilen kann. Als Antwort sagte man mir, das man doch einfach einen entsprechenden Satz in den Thread schreiben soll……

In diesem Sinne…
Selten habe ich erleben dürfen das man mir so einfach, kompetent und selbstverständlich geholfen hat, trotz dummen Nachfragens und nicht Begreifens, kam nichts als sinnvolle Erklärung und endlose Geduld!
Ich danke Dir in aller Form, frei von Ironie -wenn auch ein wenig pathetisch- und auch im Namen der anderen Ahnungslosen, die vielleicht in Zukunft diesen Thread lesen!

Danke! ;o)