Beiträge von Super45

Super45

Danke Dir

Zitat von basti1012

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

Super45

edit, edit: jetzt ist alles Gut!

war gerade ein bisschen durcheinander.

Vielen Dank für deine Hilfe!

Super45

Zitat von basti1012

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

Super45

Code

<button id="nochmalBtn" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Doppelklick">Nochmal!</button>

<div class="container bg-none">
            <div class="row">
            <div class="col-sm">
             <h2><a href="planung.html">Planung</a></h2> 
            <a href="planung.html"><img src="Bilder/icon2.jpg" id="Bild-1" class="animated fadeInDown" data-toggle="tooltip" data-placement="bottom" title="1.Kapitel"></a>
        </div>
        <div class="col-sm">
          <h2><a href="design.html">Design</a></h2>
          <a href="design.html"><img src="Bilder/icon3.jpg" id="Bild-2" class="animated fadeInRight" data-toggle="tooltip" data-placement="bottom" title="2.Kapitel"></a>
        </div>
      </div>
      <div class="row">
        <div class="col-sm">
          <h2><a href="software.html">Software</a></h2>
          <a href="software.html"><img src="Bilder/icon4.jpg" id="Bild-3" class="animated fadeInUp" data-toggle="tooltip" data-placement="bottom" title="3.Kapitel"></a>
        </div>
        <div class="col-sm">
          <h2><a href="testing.html">Testing</a></h2>
          <a href="testing.html"><img src="Bilder/icon5.jpg" id="Bild-4" class="animated fadeInUp" data-toggle="tooltip" data-placement="bottom" title="4.Kapitel"></a>
        </div>
        <div class="col-sm">
         <h2><a href="launch.html">Launch</a></h2>
         <a href="launch.html"><img src="Bilder/icon6.jpg" id="Bild-5" class="animated fadeInBottomRight" data-toggle="tooltip" data-placement="bottom" title="5.Kapitel"></a>
        </div>
      </div>
    </div>

Alles anzeigen

Code

Zusatz zu Java Script:

<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>

Hallo, ja JQuery ist eingebunden.

Super45

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

Code

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.compat.css" integrity="sha256-Z12agm4mw1C2s2sXTx0wUlgmQdWqv1HCc/vgtpB0r9M=" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/4ac96a5a3c.js" crossorigin="anonymous"></script>

</head>

<script>

$(function(){
$('#nochmalBtn').click(function(){

animate('#Bild-1','fadeInDown');
return false;

});

function animate(element, animation){
$(element).addClass('animated '+animation);
var wait = setTimeout(function(){
$(element).removeClass('animated '+animation);
}, 1000);
}
})

$(function(){
$('#nochmalBtn').click(function(){


animate('#Bild-2','fadeInRight');
return false;


});

function animate(element, animation){
$(element).addClass('animated '+animation);
var wait = setTimeout(function(){
$(element).removeClass('animated '+animation);
}, 1600);
}
})


$(function(){
$('#nochmalBtn').click(function(){


animate('#Bild-3','fadeInUp');
return false;


});

function animate(element, animation){
$(element).addClass('animated '+animation);
var wait = setTimeout(function(){
$(element).removeClass('animated '+animation);
}, 2200);
}
})

$(function(){
$('#nochmalBtn').click(function(){


animate('#Bild-4','fadeInUp');
return false;


});

function animate(element, animation){
$(element).addClass('animated '+animation);
var wait = setTimeout(function(){
$(element).removeClass('animated '+animation);
}, 2800);
}
})


$(function(){
$('#nochmalBtn').click(function(){


animate('#Bild-5','fadeInBottomRight');
return false;

});

function animate(element, animation){
$(element).addClass('animated '+animation);
var wait = setTimeout(function(){
$(element).removeClass('animated '+animation);
}, 3400) ;
}
})
</script>

Alles anzeigen

Code

CSS:


#Bild-1 {
    animation-delay: 0;
}


#Bild-2 {
    animation-delay: 1s;
}


#Bild-3 {
    animation-delay: 2s;
}


#Bild-4 {
    animation-delay: 3s;
}


#Bild-5 {
    animation-delay: 4s;
}

Alles anzeigen

Super45

Zitat von Sempervivum

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/

HTML

<!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>

Alles anzeigen

Super, Thanks again!

Super45

Zitat von Sempervivum

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?!

Super45

Zitat von Sempervivum

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.

Super45

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

Super45

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

Code

Html:

<section id="menubar">
            <ul>
                <li><a class="menubutton" href="#menu"><img src="Bilder/Menübutton.png"></a></li>
            </ul>
        </section>
    
    <nav class="navbar navbar-expand navbar-light mt-3" >
    
  
 <button type="button" class="btn btn-success"><a href="good.html">Gut zu wissen!</a></button>



  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="https://play" target="_blank"><b class="text-light">&nbsp &nbsp &nbsp Aktuell</b><span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="https://developer" target="_blank"><b class="text-light">Projekte</b><span class="sr-only">(current)</span></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">
         <b class="text-light">Basics</b>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="https://www.you" target="_blank">Html</a>
          <a class="dropdown-item" href="https://www.you" target="_blank">CSS</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://developer" target="_blank">Programmieren lernen</a>
        </div>
      </li>
    </ul>
      <a class="nav-link" href="#Impressum" > <i class="far fa-id-card display-4" data-toggle="tooltip" data-placement="bottom" title="Impressum"></i> <span class="sr-only">(current)</span></a>
  </div>
</nav>

Alles anzeigen

CSS

CSS:

#menubar{
    display:block;
    background:white;
}

#menubar ul {
    
    display:block;
    width:2em;
    padding:0.9em;
}

#menubar ul li {
    display:inline;
}

#menubar ul li a.menubutton{
    display:none;
}

@media screen and (min-width:550px){
    
     .navbar-expand{
        
        display:block !important;
    }
}
@media screen and (max-width:550px){
    
    #menubar ul li a.menubutton{
        display:block;
    }
    
    .navbar-expand {
        display:none;
        height:auto;
        
    }
    
    .navbar-expand ul li{
        
        display:block;
        margin: 0.3em 0em 0.3em 0em;
    }

Alles anzeigen

Code

Java-Script:

<script>
$(document).ready(function() {
    $('.menubutton').click(function(){
        $('.navbar-expand').slideToggle('slow');
        });
    });
</script>

Super45

Zitat von Sempervivum
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:
Code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#designModal">
  UX/UI Designer 
</button>
Dann funktioniert das Öffnen und Schließen ganz von allein.

Und das Javascript unten kannst Du dann löschen:
Code
<script>
    
    var modal = document.getElementById("#designModal");
    var modalBtn = document.getElementsByClassName("btn-primary");
    
    
    modalBtn.onclick = function (){
    modal.style.display = "block";
         
    }
</script>
Alles anzeigen
So 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

Super45

Zitat von Sempervivum

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?

Super45

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

Code

Html-Button: 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  UX/UI Designer 
</button>


<div class="modal fade" id="designModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">UX/UI (User Experience, User Interface)</h5>
        <button type="button " class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       Produkt 
      <img src="Bilder/screen" > </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
        
      </div>
    </div>
  </div>
</div>

Alles anzeigen

Code

<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>

    
    <script>


    $(document).ready(function () {
        setTimeout(function() {
            $("#designModal").modal ('show');
        }, 500);
    })
    
    setTimeout(function() {
        $("#designModal").modal('hide');
    }, 10000);

    </script>
    
    <script>
    
    var modal = document.getElementById("#designModal");
    var modalBtn = document.getElementsByClassName("btn-primary");
    

    
    modalBtn.onclick = function (){
    modal.style.display = "block";
         
    }


    </script>


</body>    
    
</html>

Alles anzeigen

Beiträge von Super45

Animation mit Java Script

Animation mit Java Script

Animation mit Java Script

Animation mit Java Script

Animation mit Java Script

Für den Smartphonescreen die Navigationsleiste mit einem Button öffnen

Für den Smartphonescreen die Navigationsleiste mit einem Button öffnen

Für den Smartphonescreen die Navigationsleiste mit einem Button öffnen

Für den Smartphonescreen die Navigationsleiste mit einem Button öffnen

Für den Smartphonescreen die Navigationsleiste mit einem Button öffnen

Bootstrap Modal mit JavaScript erneut öffnen

Bootstrap Modal mit JavaScript erneut öffnen

Bootstrap Modal mit JavaScript erneut öffnen