jQuery – Zustand nach slidetoggle offen oder geschlossen?

Auch bei Codeschnipsel werden immer die gleichen, zum Teil einfachsten Dinge wieder neu gesucht.

Der Klassiker: jQuery´s Accordion Effekt mit slidetoggle.

Die Lösung: Durch das Hinzufügen von Klassen kann dann mit CSS zusammen die Optik geändert werden. Hier ein einfaches Beispiel:

$( ".projekttextbutton" ).click(function() {
  $( ".projekttextcontent" ).slideToggle( "fast", function() {
    // Animation complete.
    if ($('.projekttextcontent').is(':hidden')) {
      $('.projekttextbutton').removeClass("selected");
    } else {
      $('.projekttextbutton').addClass("selected");
    }
  });
});

Flexbox, Picture Element und Abfrage der Netzanbindung

Die erste Kategorie – die ersten Themen. In der ersten Kategorie geht es um Inhalte aus unserer Entwicklergruppe aus München zum Thema Webdesign. Den Anfang werden ein paar Techniken machen die zwar nicht mehr ganz so neu sind, jedoch mittlerweile über eine interessante Kompatibilität unter den Browsern verfügen: Flexbox, Picture Element und die Abfrage der Netzanbindung.

Gerade responsive Seiten sind darauf ausgelegt auch mobil eingesetzt zu werden. Hier gilt es die Ladezeiten der Seiten zu optimieren und das Volumen der Dateien zu reduzieren. Für Bilddateien gilt dies besonders, da in Abhängigkeit der Display-Größe die Qualität von großen Dateien zum Teil gar nicht mehr dargestellt werden kann – trotz Retina-Displays. Hier leistet das HTML-Element Picture wertvolle Dienste, da es nach dem Mobile-First-Ansatz zunächst auf die Bildversion mit der kleinsten Dateigröße ausgelegt ist. Wird ein größeres Display erkannt werden die entsprechenden Dateien mit mehr Auflösung und natürlich auch mehr Download-Volumen nachgeladen. Neben dem Picture-Element ist auch die Abfrage der Netzanbindung (mobil) eine Möglichkeit das Nachladen von Elementen zu steuern.

Nicht nur nebeneinander stehende Spalten in gleicher Höhe darzustellen ist die Aufgabe der CSS-Einstellung Flexbox. Interssant ist auch die Reihenfolge in der Darstellung. So können z.B. nebeneinander stehende Elemente die Reihenfolge ändern wenn Sie bei Erreichen eines Breakpoints untereinander angeordnet werden. Die Browserkompatibilität der wichtigsten CSS Anweisungen für Flexbox reicht zurück bis IE10 und hat damit eine Browserabdeckung von derzeit über 96 Prozent. Damit steht einem Einsatz nichts mehr im Wege. Zu dem Flexbox-Ansatz wird es demnächst einen Playground-Link geben.

Los geht´s

Herzlich willkommen in unserem Weblog! TYPO3, WordPress, Suchmaschinenoptimierung und auch Webdesign begleiten und jeden Tag. Neue Projekte, neue Tools und vieles mehr kommen dazu. In diesem Bereich werden wir Ideen festhalten, einen Blick hinter die Kulissen gewähren und auch Infos geben die für unsere Kunden und Partner wertvoll sein könnten, aber natürlich auch für uns.

Im täglichen Miteinander entstehen Gedanken, Lösungen, Ideen. Manche werden gleich wieder verworfen, andere mit Begeisterung umgesetzt. Probleme  treten auf und werden gelöst. Und dann? Nach ein paar Tagen oder Wochen taucht der Gedanke wieder auf. Wie war da noch mal der Ansatz? Wir hatten das Problem doch schon mal gelöst! Da gab es doch so eine gute Idee! Aber wo?

Auf diese Frage wird es eine Antwort geben: Hier! Wir werden die Dinge festhalten und weiterverfolgen. Der Weblog wird sich wie unsere Webseite entwickeln. Doch statt irgendwann mit eine möglichst fertige Lösung freizuschalten fangen wir einfach an und lassen jeden an der Entwicklung live teilhaben den es interessiert. Die Themenbereiche ergeben sich aus unserer Arbeit, die Beiträge aus unseren Gesprächen. Auf diesen Seiten halten wir sie fest…