Hauptmenü

Werkzeuge

Kategorien

Archiv

Tabindex/Focus bei durch Layer überdeckten Elementen

Erstellt in Javascript am 3. Februar 2023 vom Daschmi

Liegt über einem focusierbaren Element z.B. ein Layer dann sind diese Elemente weiterhin mit Tastatur auswählbar. Folgendes Script löst das Problem durch temporäres setzen eines negativen tabindex.

Beispiel: https://daschmi.de/static/ds_focuser/

const ds_focuser_open_layer = (el_layer) => {
  
  document.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)').forEach((el) => {

    el.setAttribute('ds_focuser_tabindex', el.getAttribute('tabindex'));
    el.setAttribute('tabindex', '-1');

  });

  el_layer.querySelectorAll('*[ds_focuser_tabindex]').forEach((el) => {
    
    el.setAttribute('tabindex', el.getAttribute('ds_focuser_tabindex'));
    el.removeAttribute('ds_focuser_tabindex');

  });

};

const ds_focuser_close_layer = () => {

  document.querySelectorAll('*[ds_focuser_tabindex]').forEach((el) => {
    
    el.setAttribute('tabindex', el.getAttribute('ds_focuser_tabindex'));
    el.removeAttribute('ds_focuser_tabindex');

  });

};

Auf erste Kindseite leiten, wenn eine Seite Kindseiten hat

Erstellt in PHP, Wordpress am 20. Januar 2023 vom Daschmi

Mit folgendem Code kann man auf die erste Unterseite umleiten, sofern eine Seite Unterseiten hat. Dies ist nützlich wenn z.B. die Oberseite keinen Inhalt aufweist.

function my_template_redirect() {

  if (\is_page()) {

      $subPages = \get_children([
          'post_parent' => \get_the_ID(),
          'post_type'   => 'page',
          'post_status' => 'publish'
      ]);

      if (sizeof($subPages) > 0) {

          \wp_redirect(\get_permalink(array_shift($subPages)->ID)); exit;

      }

  }

}

\add_action('template_redirect', 'my_template_redirect');

Alle Elemente in einer Spalte gleich hoch wie in allen Spalten

Erstellt in Javascript am 20. Januar 2023 vom Daschmi

window.addEventListener("load", () => {

  window.addEventListener("resize", () => {

    for (const row of document.querySelectorAll('.equal_child_hight')) {

      let arHeight = {};

      for (const col of row.children) {

        for (const el_index in col.children) {

          if (typeof col.children[el_index] === 'object') {

            if (arHeight[el_index] === undefined || arHeight[el_index] < col.children[el_index].getBoundingClientRect().height) arHeight[el_index] = col.children[el_index].getBoundingClientRect().height;

          }

        }

      }

      for (const col of row.children) {
         
        for (const el_index in col.children) {

          if (arHeight[el_index]) col.children[el_index].style.height = arHeight[el_index] + 'px';

        }

      }

    }

  });

});

DS Youtube – Youtube Videos datenschutzkonform in Webseite einbinden

Erstellt in PHP, Wordpress am 15. Oktober 2022 vom Daschmi

Mit der Bibliothek DSYoutube ist es auf einfache Weise möglich YouTube Videos in eine Webseite einzubinden. Man braucht lediglich die VideoID und muss den Pfad für das Vorschaubild konfigurieren.

Weitere Informationen und Downloads bekommen Sie auf der Demoseite der Bibliothek.

Für WordPress gibt es ein Plugin, mit dem sie die Funktionalität einfach über einen Shortcode z.B.

[ds_youtube]OepAzzGcz4E[/ds_youtube]

nutzen können.

Im Frontend sieht das ganze dann so aus.

Datenschutz ist uns wichtig!

Daher wird dieses Video erst geladen wenn sie der Verwendung des Drittanbieters "YouTube" zustimmen durch den möglicherweise Cookies gesetzt und Nutzerdaten übertragen werden.

Ich bin einmalig damit einverstanden.
DSGVO Script powered by https://daschmi.de.

EXIF Bildrotation mit gd / imagerotate korrigieren

Erstellt in PHP am 12. Oktober 2022 vom Daschmi

Möchte man mittels der GD-Bibliothek die Drehung/Spiegelung von Bildern anhand der EXIF Meta Daten korrigieren kann man folgenden Code verwenden:

$srcImage = @imagecreatefrompng($src_file);

$exif = exif_read_data($src_file);

if ($exif && !empty($exif['Orientation'])) {

  $srcImage = match ($exif['Orientation']) {
    8 => imagerotate($srcImage, 90, 0),
    3 => imagerotate($srcImage, 180, 0),
    6, 5, 7 => magerotate($srcImage, -90, 0)
  };

}