Bootstrap 5 | Carousel

    Zitat von Re:Later

    Versteh ich nicht, den Satz. Erst hat der Button gar nix, wenn man es nicht vorab in seinem HTML einträgt. Wenn nicht: Bei Klick kriegt er das true-Dings automatisch eingebaut. Bei weiterem Klick wirds dann zu false. Zumindest bei mir im Vivaldi gut zu sehen.

    Wenn man im HTML von Anfang an einträgt aria-pressed=true kriegt er beim ersten Klick ein false; und umgekehrt.

    So sollte es zumindest sein.

    Hatte das auch (temporär) so eingebaut:

    Code
    <a href="https://cassiopeia.lafoi.ch/" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">LINK</a>

    Und Ja, bei Klick ändert es auf: aria-pressed="false". Habe ich im FF gesehen.

    Mit temporär meinte ich, dass wenn ich auf diesen LINK klicke, mit obigem Eintrag, tut sich nichts.


    Liebe Grüße

    Christine

    Zitat von Stef

    Diesen zusätzlichen Eintrag sollte anderen Bootstrap Sachen wie Button. usw, nicht stören.

    Versteh jetzt nicht mehr. Du hast 2 Buttons mit data-bs-toggle und dann funktioniert das Carousel nicht mehr?? Und, wenn du nur einen hast, funktioniert das Carousel?


    Das müsstest du noch mal einbauen, damit man mal schauen kann.

    Zitat von Stef

    Dann ist dieser PHP Eintrag nicht ganz richtig denke ich, oder sehe ich das falsch ?

    Das siehst du meines Erachtens falsch, weil die beiden Funktionalitäten in dem großen JavaScript genauso voneinander abgekapselt sind, wie wenn man die Dateien einzeln laden würde.

    Der Button "LINK" funktioniert nicht mit (data-bs-toggle="button") wenn die zusätzliche PHP Zeile in der index.php eingefügt ist.


    Wird die PHP Zeile in der index.php entfernt, funktioniert der Button LINK mit dem href auf Home.


    Das Carousel benötigt aber diese PHP Zeile um zu funktionieren.



    Ich kenne mich leider zu wenig aus und kann nur melden dass irgendwo ein Konflikt vorhanden ist.

    Zitat von Stef

    Der Button "LINK" funktioniert nicht mit (data-bs-toggle="button") wenn die zusätzliche PHP Zeile in der index.php eingefügt ist.


    Wird die PHP Zeile in der index.php entfernt, funktioniert der Button LINK mit dem href auf Home.

    Das habe ich oben erklärt. Ein data-bs-toggle ignoriert den eingetragenen Link. Das gehört so.

    Zitat von Re:Later

    er Link im href-Attribut wird dabei per JavaScript "verschluckt", da ein data-bs-toggle eben dafür da ist, auf der aktuellen Seite was zu toggeln bzw. ausszulösen und nicht die Seite zu wechseln.


    Oder in anderen Worten: Eben, weil dieser Link-Button die Seite NICHT wechselt, ist das ein Beleg, dass alles OK ist, wie es ist.

    Zitat von Stef

    Das komische ist, wenn ich die PHP Zeile aus der index.php entferne, funktioniert der Link.

    Zitat von Re:Later

    Das siehst du meines Erachtens falsch, weil die beiden Funktionalitäten in dem großen JavaScript genauso voneinander abgekapselt sind, wie wenn man die Dateien einzeln laden würde.

    Wenn ich es nun (auch) hoffentlich richtig verstanden habe :)


    Liebe Grüße

    Christine

    Zitat von Stef

    Das komische ist, wenn ich die PHP Zeile aus der index.php entferne, funktioniert der Link.

    Exakt. Weil dann das Bootstrap-JavaScript nicht geladen ist, dass, wenn geladen, richtigerweise verhindert, dass der href-Link funktioniert ;)


    Ohne das JavaScript, das du mit deiner Zeile lädst, sind ALLE data-bs-*-Einträge, egal wo und welche, komplett sinnfrei. Sie tun dann gar nichts. Aber der Link-Button funktioniert eben wie ganz normal.


    Du verwendest das data-bs-toggle einfach an einer falschen Stelle. es hat da nichts zu suchen, wenn ein Link auf eine andere Seite gehen soll.

    Noch mal. Ein

    Code
     <a href="https://cassiopeia.lafoi.ch/" class="btn btn-primary" role="button" data-bs-toggle="button">LINK</a>

    wird die Seite

    Code
    https://cassiopeia.lafoi.ch/

    niemals öffnen, weil du

    Code
    data-bs-toggle="button"

    drinnen hast.


    ES SOLL DIE SEITE GAR NICHT ÖFFNEN!!!!!!!!!!!!!!!!!!!! Das wird ABSICHTLICH vom Bootstrap-JavaScript verhindert.


    Das

    Code
    data-bs-toggle

    erfüllt einen anderen Zweck in anderen Situationen,


    wo ich dann aber sowieso eher gleich einen echten Button

    Code
    <button>...</button>

    verwenden würde. Plus den nötigen Bootstrap-Auszeichnungen.

    Und, dass das Bootstrap.JavaScript auch auf deinem neuen Besipiel geladen wird, sehe ich im Browser-Inspektor, weil nach Klick auf "LINK" daraus wird:

    Code
    <a href="https://cassiopeia.lafoi.ch/" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">LINK</a>

    So soll das sein, wenn hier auch sinnfrei,

    Zitat von Re:Later

    Oder in anderen Worten: Eben, weil dieser Link-Button die Seite NICHT wechselt, ist das ein Beleg, dass alles OK ist, wie es ist.

    Link: als hübschen Button (ohne data-bs-Dingens):

    Zitat von Re:Later

    Wenn du einen normalen Link als hübschen Button stylen willst, ist dein HTML schon alles richtig, abgesehen von dem data-bs-Dingens. Dann tut der Knopf, was du vorhast.

    Button: Mit diesem: data-bs-Dingens: Schau mal hier: https://www.bootstraptoggle.com/

    Gibt dort Erklärungen dazu.


    Geht mir hier jetzt um die Unterschiede, wo data-bs-Dingens verwendet werden können (z.B. ON/OFF button) bzw. wo nicht (für href Link).

    Zitat von Stef

    Ich meinte auf meiner Hauptseite die noch nicht online ist, nicht die Testseite. ;)

    ach, ach :)


    Liebe Grüße

    Christine

    Zitat von Stef

    Diese Buttons hatten alle data-bs-Dingens.

    Im Moment noch keinen Carousel aber geplant, darum hatte ich die PHP Datei angepasst und per Zufall bemerkt dass diese Buttons nicht mehr funktionierten.

    Wenn ich das richtig sehe, meinst Du diese numerierten buttons. Kann nicht funktionieren, weil die sind a href Links.

    Code
    <a href="/meditation-1" class="btn btn-primary btn-lg bouton-psaumes shadow-none psaume-119" role="button">1</a>


    Liebe Grüße

    Christine