Akkordeon funktioniert am iPad nicht

[thevelocity]

Hallo,

ich habe auf http://www.gschwantler.com/index.php/brands.html ein Akkordeon angelegt. Beim Klick auf das jeweilige Logo soll angezeigt werden, in welchem Geschäft die Marke angeboten wird. Das funktioniert am PC einwandfrei.

Nur am iPad (und auch iPhone) funktioniert das Akkordeon nicht. Tippt man auf eines der Logos, passiert nichts. Tippt man zweimal darauf, klappt es kurz aus, dann gleich wieder ein.

Hat irgendjemand eine Idee, woran das liegen könnte?

Liebe Grüße
thevelocity

[varix]

Auf meinen samsung galaxy tab geht es. Nur so als info.

VARIX

[jk1]

Da du ja anscheinend auch jQuery verwendest, probier mal dieses anstelle des Mootools Akkordeons zu nutzen (Theme). Sehe deinen Fehler auf dem iPad auch. Ich benutze selber auch auf einer Seite das Akkordeon, allerdings via jQuery. Dort funktioniert es. Ich nutze allerdings auch Contao 3.0.6 - keine Ahnung ob sich hier was geändert hat.

[thevelocity]

Da du ja anscheinend auch jQuery verwendest, probier mal dieses anstelle des Mootools Akkordeons zu nutzen (Theme). Sehe deinen Fehler auf dem iPad auch. Ich benutze selber auch auf einer Seite das Akkordeon, allerdings via jQuery. Dort funktioniert es. Ich nutze allerdings auch Contao 3.0.6 - keine Ahnung ob sich hier was geändert hat.

Danke für den Tipp! Wie kann ich das jQuery-Akkordeon nutzen?

[jk1]

In deinem Layout hast du ja anscheinend Mootools & jQuery ausgewählt.
Dort machste das moo_accordion bei Mootools weg & setzt dafür bei jQuery (j_accordion) ein häkchen. Das sollte eigentlich reichen.
Ggf. musst du deine CSS etwas anpassen. Kann sein das hier unterschiedliche Css-Klassen vom Script gesetzt werden.

[thevelocity]

In deinem Layout hast du ja anscheinend Mootools & jQuery ausgewählt.
Dort machste das moo_accordion bei Mootools weg & setzt dafür bei jQuery (j_accordion) ein häkchen. Das sollte eigentlich reichen.
Ggf. musst du deine CSS etwas anpassen. Kann sein das hier unterschiedliche Css-Klassen vom Script gesetzt werden.

Bei mir (Contao 2.11.6) sieht das leider etwas anders aus.. Bildschirmfoto 2013-04-20 um 16.11.25.png

[thevelocity]

Weiß irgendwer, wie ich das so hinbekomme, wie jk1 das vorschlägt?

[Thoni]

Weiß irgendwer, wie ich das so hinbekomme, wie jk1 das vorschlägt?

Die jQuery-Variante gibt es erst seit Contao3, soweit ich weiß.

Vielleicht kannst du dir die Datei(en) aus der 3er Version holen (das ZIP reicht ja) und integrieren.

[Thoni]

Das scheint das Script und die benötigte jQuery-Funktion zu sein (erste Zeile):

<script src="assets/jquery/ui/1.9.1/jquery-ui.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $(document).accordion({
      // Put custom options here
      active: false,
      collapsible: true,
      autoHeight: false,
      header:'div.toggler'
    });
    var activate = function(tog) {
      var tgs = $('div.toggler');
      tgs.removeClass('active');
      tog.addClass('active');
      tgs.next('div.accordion').attr('aria-hidden', 'true');
      tog.next('div.accordion').attr('aria-hidden', 'false');
    }
    $('div.toggler').focus(function(e) {
      $('div.toggler').attr('tabindex', 0);
      $(this).attr('tabindex', -1);
    }).blur(function() {
      $(this).attr('tabindex', 0);
    }).click(function() {
      activate($(this));
    }).keypress(function(event) {
      if (event.keyCode == 13) activate($(this));
    });
  });
})(jQuery);
</script>

Ich weiß nicht, ob das wirklich alles ist - versuch es mal.

[wulf]

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
jQuery(document).ready(function(){
	$('.accordion').click(function() {
		$(this).next().toggle('slow');
		return false;
	}).next().hide();
});
</script>

mit .toogle('slow') kann man die geschwindigkeit einstellen. Nervig wird es allerdings, wenn du nebenbei noch Mootools laufen hast

[thevelocity]

Das scheint das Script und die benötigte jQuery-Funktion zu sein (erste Zeile):

<script src="assets/jquery/ui/1.9.1/jquery-ui.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $(document).accordion({
      // Put custom options here
      active: false,
      collapsible: true,
      autoHeight: false,
      header:'div.toggler'
    });
    var activate = function(tog) {
      var tgs = $('div.toggler');
      tgs.removeClass('active');
      tog.addClass('active');
      tgs.next('div.accordion').attr('aria-hidden', 'true');
      tog.next('div.accordion').attr('aria-hidden', 'false');
    }
    $('div.toggler').focus(function(e) {
      $('div.toggler').attr('tabindex', 0);
      $(this).attr('tabindex', -1);
    }).blur(function() {
      $(this).attr('tabindex', 0);
    }).click(function() {
      activate($(this));
    }).keypress(function(event) {
      if (event.keyCode == 13) activate($(this));
    });
  });
})(jQuery);
</script>

Ich weiß nicht, ob das wirklich alles ist - versuch es mal.

Dieses Skript binde ich im Seitenlayout ein, oder? Wie kriege ich es dann hin, dass das jQuery-Skript und nicht das Mootools verwendet wird?

[Thoni]

Dieses Skript binde ich im Seitenlayout ein, oder? Wie kriege ich es dann hin, dass das jQuery-Skript und nicht das Mootools verwendet wird?

Ja, im Seitenlayout oder als Datei, die du anlegst.

jQuery musst du auch laden (<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>) und Mootools nicht anhaken.

[thevelocity]

Ja, im Seitenlayout oder als Datei, die du anlegst.

jQuery musst du auch laden (<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>) und Mootools nicht anhaken.

Danke für deine Hilfe erst mal!
Leider funktioniert das noch nicht ganz. Ich habe jQuery und das Script im Seitenlayout eingebunden und den Haken beim Mootools-Akkordeon im Layout entfernt. Jetzt wird allerdings gar kein Akkordeon angezeigt - es wird einfach alles ausgeklappt dargestellt. http://www.gschwantler.com/index.php/brands.html

[Thoni]

Die Datei fehlt die noch:

<script src="assets/jquery/ui/1.9.1/jquery-ui.min.js"></script>

s. Anhang ('.txt' entfernen)

[thevelocity]

Die Datei fehlt die noch:

<script src="assets/jquery/ui/1.9.1/jquery-ui.min.js"></script>

s. Anhang ('.txt' entfernen)

Großartig! Vielen Dank!
Jetzt funktioniert es einwandfrei.

[Thoni]

Toll - das freut mich.