Javascript

Die Länge eines Textes mit Javascript überprüfen

Holger Weischenberg — Wed, 01 Jun 2022 08:21:23 +0000

Die Länge eines Textes mit Javascript überprüfen Holger Weischenberg Mi., 01.06.2022 - 10:21

Die Anforderung war bei mehr als 50 Zeichen eine kleinere Schriftgröße anzuzeigen. Über 50 Zeichen wird eine CSS-Klasse in das Parent-Div einer h1 geschrieben.

Die Funktion ist in ein Drupal-Behavior eingebettet.

Drupal.behaviors.pageTitleLength = {
  attach: function (context) {

    const title = document.getElementsByTagName('h1', context);
    const titleLength = title[0].firstChild['length'];
    const parentDiv = title[0].parentNode;

    if (titleLength > 60) {
      parentDiv.classList.add('long-title');
    }

  }
};

Tags

Javascript

Click Event-Listner anstatt Hover auf Mobil-Clients

Holger Weischenberg — Thu, 19 Nov 2020 12:28:45 +0000

Click Event-Listner anstatt Hover auf Mobil-Clients Holger Weischenberg Do., 19.11.2020 - 13:28

In einem Projekt sollte ein CTA, der durch Hover aus dem negative Margin geholt wurde, mobil durch ein Klick-Event verfügbar gemacht werden. Hier der kurze Vanilla Javascript Code mit rudimentären Features.

const items = document.querySelectorAll('.sticky-cta');
const breakpoint = window.innerWidth <= 768;

for (const item of items) {
    const wrapper = item.querySelector('.wrapper-class');
    const icon = item.querySelector('.icon-class');

    // If initial load is in mobile viewport
    if (breakpoint) {
        item.addEventListener('click', ctaClass, true);
    }

    function ctaClass() {
        item.classList.toggle('cta-clicked-js');
        wrapper.classList.toggle('cta-clicked-js');
        icon.classList.toggle('cta-clicked-js');
    }

    // On viewport change
    window.addEventListener('resize', (e) => {

        if (window.innerWidth <= 768) {
            item.addEventListener('click', ctaClass, true);
        }
        else {
            item.removeEventListener('click', ctaClass, true);
            item.classList.remove('cta-clicked-js');
        }
    })
}

Tags

Javascript

"Load more" Button in Vanilla Javascript

Holger Weischenberg — Mon, 16 Nov 2020 08:46:15 +0000

"Load more" Button in Vanilla Javascript Holger Weischenberg Mo., 16.11.2020 - 09:46

Beispiel für eine "Mehr laden" Funktionalität.

let parent = document.querySelector('.news')

if (!parent === false) {

    let items = parent.querySelectorAll('.news-item');
    let loadMoreBtn = document.querySelector('.load-more');
    let maxItems = 3;
    let hiddenClass = "hidden-news";

    [].forEach.call(items, function (item, idx) {
        if (idx > maxItems - 1) {
            item.classList.add(hiddenClass);
        }
    });

    loadMoreBtn.addEventListener('click', function (e) {

        e.stopPropagation();
        e.preventDefault();

        [].forEach.call(document.querySelectorAll('.' + hiddenClass), function (item, idx) {
            if (idx < maxItems - 1) {
                item.classList.remove(hiddenClass);
            }

            if (document.querySelectorAll('.' + hiddenClass).length === 0) {
                loadMoreBtn.style.opacity = '0';
            }

        });

    });
}

Tags

Javascript

"Mehr lesen" Accordion in Vanilla Javascript

Holger Weischenberg — Mon, 16 Nov 2020 08:30:30 +0000

"Mehr lesen" Accordion in Vanilla Javascript Holger Weischenberg Mo., 16.11.2020 - 09:30

Vanilla Javascript für "Mehr lesen" als verstecktes Div.

( function() {

    const items = document.querySelectorAll('.readmore-wrapper');

    for (const item of items) {

        const button = item.querySelector('.readmore-block-button');
        const icon = item.querySelector('.readmore-icon');
        const body = item.querySelector('.readmore-hidden');

        body.classList.add('d-none');

        button.addEventListener('click', (e) => {

            e.stopPropagation();

            // Beispiel: Bootstrap Klasse für display: none
            body.classList.toggle('d-none');
           // Icon Styles
            icon.classList.toggle('readmore-icon-open');

        });

    }

} )();

Tags

Javascript

Javascript Grundlagen - Strings

Holger Weischenberg — Wed, 30 Sep 2020 10:42:40 +0000

Javascript Grundlagen - Strings Holger Weischenberg Mi., 30.09.2020 - 12:42

Methoden für Strings

Anzahl der Zeichen

console.log(foo.length)

Zeichen an Position abfragen

console.log(foo.charAt(3))

// Kurzform
console.log(foo[3])

Zeichen im String finden

console.log(foo.indexOf("f"))

// Startet an Position 10
console.log(foo.indexOf("o", 10))

String zu Groß- oder Kleinbuchstaben umwanden

console.log(foo.toUpperCase())

console.log(foo.toLowerCase())

Elemente im String ersetzen

console.log(foo.replace("a", "b"))

Zeichen rechts und links entfernen

console.log(foo.trim())

Zeichen entfernen

// .slice(start, end)
console.log("Hallo Welt".slice(6, 8))

// .substr(start, length)
console.log("Hallo Welt".substr(6, 2))

String wiederholen

console.log("a".repeat(10))

Neue Zeile

console.log('Hallo\nWelt!')

Tags

Javascript