Accordeon (Scriptfehler?)

nora0355 · Post by **nora0355** » Thu 13. Dec 2007, 22:22

Hallo moderator,

welche version ist bei dir die vorletzte version ?

ist schon richtig, ich nora0355, habe den snapshot vom 29. Oct. inst.

Der Link oben gehört jasminbx.

Ich wollte jasminbx damit nur sagen unter welcher Version es bei mit läuft.

Entweder liegt es an ihrer alten Version, oder sie hat beim Übertragen einen Fehler gemacht.

Rainer

XING · Post by **markus s** » Fri 14. Dec 2007, 13:57

@nora0355
alles klar - war ein verständnisfehler.
@jasminbx
ein upgrade würde hier viele fragen lösen ...

godmd · Post by **godmd** » Thu 31. Jan 2008, 12:34

Hallo!

Ich war so stolz, dass ich die Accordeon-FAQ super hinbekommen habe ... Hab ich auch, solange man in Firefox bleibt. nur die Gegenprobe im IE war niederschmetternd. Dort bleiben die Dinger nicht offen (siehe http://www.fwg-nierstein-oppenheim.de/index.php?termine).

XHTML ist an, phpwcms 1.3.5 Snapshot vom 5.12.2007.

Hat jemand einen Rat für mich?

Jensensen · Post by **Jensensen** » Fri 1. Feb 2008, 03:58

godmd · Post by **godmd** » Fri 1. Feb 2008, 12:17

Tausend Dank, Jens! Funktioniert hervorragend jetzt.

Für Newbie-Nachahmer: Das, was Jens als HTML-Code angegeben hat, habe ich zum Testen genommen und dann so gelöst, wie Claus und Pepe es vorgezeichnet haben. In meinem HTML-Code, sprich im Hauptbereich der Artikelvorlage steht wie gewohnt nur {CONTENT}.

Dafür habe ich die Datei templates/inc_cntpart/faq/faq_accordeon.tmpl (in der Artikelvorlage als aktives Template ausgewählt) wie folgt angepasst:

Code: Select all

<div id="accordion">

[FAQ_QUESTION]<h3 id="faq_id{FAQ_ID}" class="toggler atStart">{FAQ_QUESTION}</h3>[/FAQ_QUESTION]

<div class="element atStart" id="faqAnswer_id{FAQ_ID}">
     [FAQ_ANSWER]
     <div class="faqAnswer" id="faqAnswer_id{FAQ_ID}">
                    [FAQ_IMAGE]
                    <div class="faqImage">
                    {FAQ_IMAGE}
                                        [FAQ_CAPTION]
                                        <div class="faqCaption">
                                        {FAQ_CAPTION}
                                        </div>
                                        [/FAQ_CAPTION]
                    </div>
                    [/FAQ_IMAGE]
     {FAQ_ANSWER}
     </div>
     [/FAQ_ANSWER]
     </div>
</div>

Habe das ganze allerdings noch nicht mit Bild und Bildunterschrift ausprobiert, da ich die Funktion hier für Termine brauche.

In English: The Accordion-FAQ solution as described by Claus and Pepe worked fine for me in Firefox but not in IE7. So I followed Jens' advice (see last posting). mootools.js is included in the last phpwcms versions, so all that has to be done is set the link and define/initiate the functions - just paste Jens' code into the header section. Instead of the above description of the HTML-section I just put "{CONTENT}" there, coded the file /templates/inc_cntpart/faq/faq_accordeon.tmpl as stated in this posting and uploaded it, enabling me to handle the FAQs in the article section like any other content part.

Gruß,
Anke

Post by **update** » Fri 1. Feb 2008, 13:39

Super Beschreibung / Super description

Edit:

und dann so gelöst, wie Claus und Pepe es vorgezeichnet haben

Kannst Du das bitte auch noch dazu setzen (wie wir das gelöst haben

)
Ich habe eben nach Deiner Beschreibung gearbeitet und da fiel mir auf, dass Du ja die on-board-moos einsetzt! (Ich weiss zwar, wie ich das gelöst habe, aber die Kombination aus Allem fehlt mir.
Fluppt übrigens sehr schon auf Deiner Beispiel-Seite

Jensensen · Post by **Jensensen** » Fri 1. Feb 2008, 14:19

claus wrote:...dass Du ja die on-board-moos einsetzt! (Ich weiss zwar, wie ich das gelöst habe, aber die Kombination aus Allem fehlt mir..

meinst du damit weitere java scripts?? du brauchst nur die mootoold.js

Post by **update** » Fri 1. Feb 2008, 14:26

je nun, ich habe das nach obiger Anleitung gemacht und dann den FAQs das neue Template vorgeworfen - da hat es mir alle FAQs samt Antworten direkt komplett übereinander geschrieben. Nix toggler. Oder ist meine mootools.js kaputt? oder die css stimmt nicht?

godmd · Post by **godmd** » Fri 1. Feb 2008, 15:43

Hallo Claus,

hier noch mal komplett die Anleitung:

1.
Erstellen Sie eine Textdatei mit dem Namen moo_faq.css im Verzeichnis /templates/inc_css/. Kopieren Sie folgende Style-Angaben und fügen Sie sie in die moo_faq.css ein:

Code: Select all

/* ========================================================== 
   moo_faq.css fuer die Akkordeon-FAQ-Vorlage 
   ========================================================== */

.toggler {
   FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
   FONT-SIZE: 12px; 
   LINE-HEIGHT: 120%; 
   CURSOR: pointer; 
   PADDING: 2px 10px;
   MARGIN-BOTTOM: 1px;
   BACKGROUND: #f0f0f0; 
   BORDER-BOTTOM: 1px solid #dddddd;
   BORDER-RIGHT: 1px solid #dddddd;
}

.toggler A:link, .toggler A:visited, .toggler A:hover {
   FONT-WEIGHT: bold; 
   COLOR: #003366; 
   TEXT-DECORATION: none;
}

.accordion { 
   WIDTH: 95%; 
   BACKGROUND: #FFFFFF; 
   PADDING: 0;
   PADDING-LEFT: 10px;
   MARGIN: 0px;
}

.faqAnswer {
   padding: 10px 12px;
}

.faqImage {
}

.faqCaption {
}

Speichern und Hochladen auf den Webserver. (Hier kann das Aussehen der FAQs nach Belieben gestaltet werden.)

2.

Im Backendbereich unter ADMIN-> VORLAGEN eine neue Seitenvorlage erstellen unter dem Namen "faq_accordion".

Folgenden Code (zusätzlich zu eventuellen weiteren Angaben) in den Head-Bereich setzen:

Code: Select all

<script src="template/inc_js/mootools/mootools.js" 

type="text/javascript"></script>

<script type="text/javascript">
   window.addEvent('domready', function(){
      var accordion = new Accordion('h3.atStart', 'div.atStart', {
         opacity: false,
         onActive: function(toggler, element){
            toggler.setStyle('color', '#ff3300');
         },

         onBackground: function(toggler, element){
            toggler.setStyle('color', '#222');
         }
      }, $('accordion'));
   });
</script>

Im phpWCMS-Package ist das Skript mootools.js bereits enthalten, das mit diesem Eintrag aufgerufen wird. Ferner werden damit die benötigten Funktionen aufgerufen. Die Farben der Schrift in der Zeile der FAQ-Frage können hier hinter "color" angepasst werden.

Hauptbereich und restliche Bereiche dieser Vorlage wie gewohnt

einrichten.

!! Im Hauptbereich muss der Replacement-Tag {CONTENT} vorhanden

sein.

!! moo_faq.css muss (zusätzlich zu evtl. weiteren Stylesheet-Dateien) markiert sein.

3.

Im Verzeichnis templates/inc_cntpart/faq/ mit einem Texteditor eine neue Template-Datei mit dem Namen faq_accordion.tmpl anlegen mit folgendem Inhalt:

Code: Select all

    <div id="accordion">

    [FAQ_QUESTION]<h3 id="faq_id{FAQ_ID}" class="toggler atStart">{FAQ_QUESTION}</h3>[/FAQ_QUESTION]

    <div class="element atStart" id="faqAnswer_id{FAQ_ID}">
         [FAQ_ANSWER]
         <div class="faqAnswer" id="faqAnswer_id{FAQ_ID}">
                        [FAQ_IMAGE]
                        <div class="faqImage">
                        {FAQ_IMAGE}
                                            [FAQ_CAPTION]
                                            <div class="faqCaption">
                                            {FAQ_CAPTION}
                                            </div>
                                            [/FAQ_CAPTION]
                        </div>
                        [/FAQ_IMAGE]
         {FAQ_ANSWER}
         </div>
         [/FAQ_ANSWER]
         </div>
    </div>

Speichern und auf den Webserver hochladen.

4.

In der Seitenstruktur (phpWCMS-Backend) eine Ebene FAQ anlegen mit der "Contentpart-Selektion: FAQ".

5.

a) Neuen Artikel anlegen in der Ebene "FAQ".
b) Contentpart "FAQ" hinzufügen.
c) Im Feld "Vorlage" faq_accordion.tmpl wählen.
d) Frage und Antwort in die entsprechenden Felder eingeben, speichern.

Für die Eingabe der nächsten FAQs wird diesem Artikel jeweils ein neuer Contenpart hinzugefügt (siehe 5b-d).

Weitere Anleitungen und Anregungen (ggf. in abgewandelter Form) sind hier zu finden:
Bei Pepe - http://phpwcms-templates.de/moo_fx_Akoo ... ekt.phtml# - und im Forum http://forum.phpwcms.org (unter den Suchbegriffen "accordion", "accordeon" oder auch "Akkordeon")

So sollte alles klappen. Der Doctype muss XHTML lauten, einzustellen in der config.inc.php von phpWCMS.

godmd · Post by **godmd** » Fri 1. Feb 2008, 15:50

@Claus: Hast du es erstmal mit dem HTML-Code im Hauptbeeich vesucht, wie Jens es hier geschrieben hatte?

Code: Select all

<div id="accordion">
	<h1 class="toggler atStart">Mein Titel 1</h1>
	<div class="element atStart">
		<p>mein inhalt, bilder, tags</p>
	</div>

	<h1 class="toggler atStart">Mein Titel 2</h1>
	<div class="element atStart">
		<p>mein inhalt 222</p>
	</div>
</div><!-- /accordion -->

Das hat bei mir wunderbar gefunzt und war damit eine schöne Prüfung, ob es überhaupt in den beiden Browservarianten klappt. Dabei wurde auf meine alte moo.css zugegriffen (abgewandelt von Pepes Original). Danach habe ich mich erst ans Template gemacht.

Gruß,
Anke

Jensensen · Post by **Jensensen** » Fri 1. Feb 2008, 17:06

Hi Anke,

toller Einsatz, den Du hier zeigst... --> Respekt und Danke!

godmd wrote:...in den beiden Browservarianten...

ja, ja, so ist das mittlerweile, und immer dieses win...

Zurück zum Thema: Das klappt alles ganz wunderbar, unter bspw. Linux, Mac, Win sowie mit FF, Opera, Maxthon, IE7,6...
(nicht mehr unter IE5.5mac)

übrigens: bei --> XHTML müssen (sollten besser) --> alle tags in kleinbuchstaben erscheinen, inkl. --> CSS
<H1 class="MyTitle">Welcome</H1> <--> <h1 class="mytitle">Welcome</h1>

daher

LINE-HEIGHT: 120%;
CURSOR: pointer;
PADDING: 2px 10px;
MARGIN-BOTTOM: 1px;
BACKGROUND: #f0f0f0;

--> lower case...

[EDIT]
ausgerechnet mir passiert das, zzzt,zzzt,zzzt

im Safari >1.3x funktioniert das natürlich auch

[/EDIT]

Post by **update** » Fri 1. Feb 2008, 18:29

Bin wieder Da!

Aber so ganz passt das noch nicht:

line 110 column 8 - Warning: <div> anchor "faqAnswer_id22" already defined
line 120 column 1 - Warning: <div> anchor "accordion" already defined
line 124 column 8 - Warning: <div> anchor "faqAnswer_id23" already defined
line 131 column 1 - Warning: <div> anchor "accordion" already defined
line 135 column 8 - Warning: <div> anchor "faqAnswer_id24" already defined

Dies liegt daran, dass das Template selber abgearbeitet wird:

<div id="accordion">

[FAQ_QUESTION]<h3 id="faq_id{FAQ_ID}" class="toggler atStart">{FAQ_QUESTION}</h3>[/FAQ_QUESTION]

<div class="element atStart" id="faqAnswer_id{FAQ_ID}">
[FAQ_ANSWER]
<div class="faqAnswer" id="faqAnswer_id{FAQ_ID}">
[FAQ_IMAGE]
<div class="faqImage">
{FAQ_IMAGE}
[FAQ_CAPTION]
<div class="faqCaption">
{FAQ_CAPTION}
</div>
[/FAQ_CAPTION]
</div>
[/FAQ_IMAGE]
{FAQ_ANSWER}
</div>
[/FAQ_ANSWER]
</div>
</div>

Wie wär's denn mal mit class statt id? Oder brauchen wir das id um den ganzen Apparat herum? Dann wäre vielleicht ein CUSTOM BLOCK als FAQ-Container (der brächte dann den Wrapper mit) eine Alternative...
In meinem damaligen Beispiel hat das mit id funktioniert, weil ich {CONTENT} mit dem ID gewrappt hatte... und ansonsten nur class eingesetzt hatte...
Mach das doch mal "spasseshalber" auf der fwg mit classes, Anke
Wir nähern uns mit riesigen Schritten Zentimeter für Zentimeter in Richtung Perfektion

Wenn das hinhaute - wäre schon toll !

godmd · Post by **godmd** » Fri 1. Feb 2008, 18:34

See for yourself: http://www.fwg-nierstein-oppenheim.de. Jetzt is nix mehr mit toggeln ...

Anke

PS: Kann man in so nem Forum eigentlich abschalten, dass man bei eigenen Einträgen auch per Mail informiert wird?

Post by **update** » Fri 1. Feb 2008, 19:01

Sie haben Post

Habe es gesehen, der Wrapper muss wohl.
Ich probiere das mal mit einem CUSTOM BLOCK, wobei eine CP Paginierung da wohl nicht geht (geht wohl nur direkt im {CONTEN})
Aber die sich wiederholenden id müssen wech - das ist sonst nicht so ganz valide
MeinFehler heute mittag war übrigens, dass ich nicht von meinem h3 auf das neue h1 umgestellt hatte, da wusste das Script natürlich nicht mehr ein noch aus vor lauter Not

godmd · Post by **godmd** » Fri 1. Feb 2008, 20:00

Hallo Kassel,

also inhaltlich hört sich das, was du überlegst, ein bisschen böhmisch an für mich. Und von der Logik her auch. Bei mir funktionierts. Liegt auch nicht an der Überschriftenformatierung, den ich hab sie umgestellt auf <H3>. Die id accordion wird ja wohl vom Skrpt benötigt, Aber alle anderen id-Tags scheinen nicht benötigt zu werden, denn es funzt auch so (siehe fwg):

Code: Select all

<div id="accordion">
   [FAQ_QUESTION]<h3 class="toggler atStart">{FAQ_QUESTION}</h3>[/FAQ_QUESTION]
   <div class="element atStart">
			    [FAQ_ANSWER]
							<div class="faqAnswer">
           [FAQ_IMAGE]
    							<div class="faqImage">
           {FAQ_IMAGE}
    			    				[FAQ_CAPTION]
               <div class="faqCaption">
        							{FAQ_CAPTION}
        							</div>
    							    [/FAQ_CAPTION]
           </div>
							    [/FAQ_IMAGE]
       {FAQ_ANSWER}
							</div>
			    [/FAQ_ANSWER]
			</div>
</div>

Ich hatte die id's wieder reingenommen, weil sie mal von Pepe oder dir so vorgegeben waren, und als Programmierflop dachte ich, das hätte so seine Richtigkeit. Einziger Vorteil - im Quelltext sieht man so die FAQ-ID.

Accordeon (Scriptfehler?)

Re: Accordeon im FF ok, aber im IE nicht

Re: Accordeon (Scriptfehler?)

Re: Accordeon (Scriptfehler?)

Re: Accordeon (Scriptfehler?)

Re: Accordeon (Scriptfehler?)

Re: Accordeon (Scriptfehler?)

MooTools FAQ-Akkordeon in phpWCMS integrieren

Re: Accordeon (Scriptfehler?)

Re: Accordeon (Scriptfehler?)

Re: Accordeon (Scriptfehler?)

Re: Accordeon (Scriptfehler?)

Re: Accordeon (Scriptfehler?)

Re: Accordeon (Scriptfehler?)