Danke Dir
Du könntest es auch so machen.
Dann geht es mit ein klick
https://codepen.io/basti1012/pen/dyGKOqv?editors=1000
Es geht bestimmt auch einfacher , aber heute habe ich irgendwie ein Blackout
Jetzt das HTML-Seminar als
Video-Tutorial
mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign
Danke Dir
Du könntest es auch so machen.
Dann geht es mit ein klick
https://codepen.io/basti1012/pen/dyGKOqv?editors=1000
Es geht bestimmt auch einfacher , aber heute habe ich irgendwie ein Blackout
edit, edit: jetzt ist alles Gut!
war gerade ein bisschen durcheinander.
Vielen Dank für deine Hilfe!
Du könntest es mal so in der Richtung versuchen
https://codepen.io/basti1012/pen/zYraKOR?editors=1100
Ich muß nur rausfinden warum man den Button 2 mal drücken muß das verstehe ich gerade noch nicht ganz
danke schon mal.
Das hab ich nur dazu geschrieben, weil es nach dem ersten Klick nicht ging. Mehr aus der Not heraus
Hallo, ja JQuery ist eingebunden.
Servus,
vielleicht kann mir ja hier nochmal jemand helfen.
Ich habe eine Animation, die mit Aufruf der Seite automatisch gestartet wird.
Jetzt habe ich einen Button erzeugt, der mir diese Animation manuell abspielen lassen kann.
Es sind fünf Bilder, die mit Slide Effekts hineinfliegen. Der Button ist zwar nach mehrmaligem Drücken funktionstüchtig, nur kommen die Bilder dann verzögert und die letzten beiden ohne Effekte.
Ich stehe gerade echt vor einem Rätsel, da ich dachte mein Java Script ist korrekt. Es funktioniert ja auch an sich nur nicht wie gewünscht.
schönen Tag noch und Grüße
Ich hatte nur das HTML gleich vom ersten Beispiel aus der Doku verwendet und es funktionierte auf Anhieb:
https://getbootstrap.com/docs/4.0/components/navbar/
Alles anzeigenHTML
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap Nav</title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
- crossorigin="anonymous">
- </head>
- <body>
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href="#">Navbar</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
- aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item active">
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Link</a>
- </li>
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
- data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Dropdown
- </a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Something else here</a>
- </div>
- </li>
- <li class="nav-item">
- <a class="nav-link disabled" href="#">Disabled</a>
- </li>
- </ul>
- <form class="form-inline my-2 my-lg-0">
- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
- </form>
- </div>
- </nav>
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
- integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
- crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
- integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
- crossorigin="anonymous"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
- integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
- crossorigin="anonymous"></script>
- </body>
- </html>
Super, Thanks again!
BTW: In deinem Thread über das Modal erkenne ich, dass Du die Version 3 von BS verwendest. Vielleicht besser auf die aktuelle 4 übergehen?
woran machst du das fest? Hätte eigentlich gedacht, dass ich Version 4 verwende?!
Bin nicht so der Experte für Bootstrap aber wenn ich das richtig erkenne, macht auch hier Bootstrap das alles automatisch, wenn man die richtigen Klassen verwendet, inkl. Umschaltung zwischen Desktop- und Mobile-Ansicht. Ich habe das vorhin mit einem Beispiel aus der Doku getestet und es hat funktioniert ohne dass ich eine Zeile Javascript zu schreiben brauchte.
Hi, danke fürs anschauen.
Wie genau hast du das gelöst? Wenn ich die Klasse auf -sm setze, wird mir nur noch der "Gut zu wissen" Button beim Smartphone angezeigt.
Hi, danke schon mal für die Antwort.
Also muss ich in dem Fall nur mit Breakpoints arbeiten? Mir erschließt sich gerade nicht ganz wie ich den Toggle bekomme.
viele Grüße
Hallo Zusammen,
ich komme bei folgendem Schritt leider nicht mehr weiter: Ich möchte bei einer responsive Webseite meine Navigationsleisten-punkte für einen Smartphonescreen mit einem Button öffnen. Dazu habe ich eine extra Menüleiste eingebaut, mit einem Bild als Button. Diese Leiste wird bei einem Desktop Bildschirm nicht, dafür aber bei einem Smartphone angezeigt. Jetzt sollen nun meine Ursprünglichen Punkte der Navigationsbar mit dem Button auf und zu gemacht werden können. Leider funktioniert es bei mir nicht so wie gewünscht. Ich freue mich, wenn sich das jemand mal anschauen kann.
liebe Grüße
jonas3344 hat vollkommen Recht: Das Ganze besser mit den Mitteln von Bootstrap lösen, d. h. Du musst deinem Button die ID des Modals mitteilen indem Du sie unter data-target einträgst:
Dann funktioniert das Öffnen und Schließen ganz von allein.
Und das Javascript unten kannst Du dann löschen:
Alles anzeigenCodeSo getestet und funktioniert einwandfrei. Auch den Knopf für das Schließen legt Bootstrap automatisch an.
Super, vielen Dank!
Das freut mich gerade richtig. Hab so lange rumprobiert, dabei war es ganz banal!
Schönen Abend
Schau mal hier unter "Methods":
https://getbootstrap.com/docs/4.0/components/modal/#methods
Es gibt da Methoden, das Modal so sichtbar und unsichtbar zu machen, wie es von Bootstrap vorgesehen ist, show und hide.
Edit: Ups, da habe ich nicht genau genug gelesen, diese Methoden benutzt Du ja schon. Dann scheitert es wahrscheinlich an dem modalBtn.onclick, Wenn Du da ebenfalls show() oder toggle() verwendest, solle es funktionieren.
Das funktioniert leider nicht bei mir. Wie genau meinst du? Also eine neue Funktion definieren?
Hallo Zusammen,
ich bin relativ neu in der Programmierarbeit mit Javascript und habe deshalb nur rudimentäre Kenntnisse. Derzeit arbeite ich an einer Website, auf der ich mit Bootstrap ein Modal eingebaut habe. Ich habe es geschafft mit JavaScript ein automatisches Öffnen und Schließen des Modals nach ein paar Sekunden zu generieren. Nur kann ich das Modal nach dem Schließen nun nicht mehr manuell öffnen. Also der Button hat keine Funktion mehr. Ich hoffe es ist einigermaßen verständlich formuliert, wie gesagt ich bin ein ziemlicher Neueinsteiger. Ich freue mich, wenn mir jemand helfen kann.
viele Grüße