Eigentlich wäre in diesem Fall angebracht, es nicht mit Javascript sondern mit CSS-Animation zu machen:
Die Kompletten Animationen dazu mache ich in CSS... es geht nur drum dass der Preloader ja eingeblendet wird bevor die Seite geladen wird, das geht ja nur mit JS oder ? 
Hey... heut mal ne andere Frage... ich bastle fleissig an meinen Preloader herum... und will mehrere schreiben.. jetzt habe ich noch das Problem dass der Code in Jquery ist ich es aber gerne in Javascript hätte... ich weiß nicht wie ich es angehen soll... ich hab den jquery code damals kopiert möchte es aber in zukunft selbst schreiben und vorallem verstehen 
jquery ist super ja... aber naja... ;D
$(window).on("load", function () {
$(".preloadercontainer").delay(2000).fadeOut("slow");
});weist du den was z-index überhaipt macht ?
Naja das selbe oder ? Es würde den Container in dem die Animation ist in den Vordergrund schieben ?
Hallo, ich versuche mich grade an einem Preloader... ich hab nen soweit schönen gefunden und spiele daran herum um zu verstehen wie es funktioniert... der preloader ist in position absolute... jedoch wenn ich versuche es gegen einen hohen z-index zu tauschen funktioniert es nichtmehr... wieso ? :O
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div class="content">
<img src="https://picsum.photos/200/300">
</div>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
</script>
</body>
</html>CSS
body {
margin: 0;
padding: 0;
width:100vw;
height: 100vh;
background-color: #eee;
}
.content {
display: flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: hotpink;
display:flex;
justify-content: center;
align-items: center;
}
.loader {
display: inline-block;
width: 80px;
height: 80px;
position: relative;
border: 4px solid yellow;
animation: loader 4s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: yellow;
animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
0% { transform: rotate(0deg);}
25% { transform: rotate(180deg);}
50% { transform: rotate(180deg);}
75% { transform: rotate(360deg);}
100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
0% { height: 0%;}
25% { height: 0%;}
50% { height: 100%;}
75% { height: 100%;}
100% { height: 0%;}
}ändere ich das so um funktionert es nichtmehr
body {
margin: 0;
padding: 0;
width:100vw;
height: 100vh;
background-color: #eee;
}
.content {
display: flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
}
.loader-wrapper {
width: 100%;
height: 100%;
/* position: absolute; */
top: 0;
left: 0;
background-color: hotpink;
display:flex;
justify-content: center;
align-items: center;
z-index: 99999;Den Rest habe ich nicht geändert
Ich suche nur alternativen ich mein nächstes Jahr um die Zeit schreibe ich die Abschlussprüfung zum Mediengestalter Digital und Print.. und da kommt im Praxisteil eben auch JavaScript dran.. ich suche weitere Wege, wegen der Übersichtlichkeit... ich habe die Angst wenn ich mehrere Zeilen Toggles dabei habe dass mir Punkte abgezogen werden wegen Mehrfachverwendung die zB unnötig oder unübersichtlich wären
Hallo, ich mach aufjedenfall was falsch... ich möchte die selbe Funktion auf das selbe Element mehrfach verwenden... aber es führt logischerweise die zweite Funktion aus... da von oben nach unten... ich suche mal nach einer anderen Möglichkeit statt toggle zu verwenden, weil ich dann auch nicht extra css Klassen anlegen müsste... wäre es möglich dass wenn ich zB bei diesem Beispiel die Hintergrundfarbe ändern kann.. nach dem zweiten klick wieder rückgängig machen kann..
box1.addEventListener("click", function(e){
content.style.backgroundColor="#f3f345"
})
box1.addEventListener("click", function(e){
content.style.backgroundColor="#fff"
})Welche Informationen genau, sorry.. ich stell mich noch ein bisschen an was das angeht.. hättest du ein Beispiel für mich ? danke vielmals du hilfst mir sehr weiter
Wow super vielen Dank schonmal nur verstehe ich nicht ganz warum das add und nicht toggle mache ich das kann ich ja nichtmehr hin und her switchen... wie genau gehe ich vor ? ich meine dann mit .add() und .remove() oder ? wäre toll wenn du mir sagen kannst was ich genau machen muss dafür.. steh echt noch am Anfang... das e in der Function habe ich so aus der Schule übernommen... weiß nur leider nichtmehr wieso und wann ich es weg lassen sollt
grüße
Hallo, ich bin neu hier und habe erst mit JavaScript angefangen... zur Zeit bastle ich ne einfach FAQ Seite um funktionen hinzuzufügen usw... ich hab hier nen codepen link... die frage ist jetzt.. wo kann ich was besser machen ? Am besten mit Begründung und wie kann mir jemand noch erklären wie ich den Button von ausblenden zu einblenden ändern kann dieser sich aber wieder ändert wenn wieder drauf geklickt wird ? Und wie fixe ich es wenn ich einzelne Elemente ausblende, dann aber auf den button alle ausblenden gehe dann blendet er nur die aus die eingeblendet sind also nicht die ausgeblendeten einzelelemente freue mich sehr über Feedback
Hallo, ich bin grad bisschen am verzweifeln, zwar ich habe erst angefangen mit JavaScript und komme bei einer Sache nicht weiter... ich möchte dass wenn ich auf den Header einer Bootstrapkarte klicke dass der Body der Karte ausgeblendet wird, mit display none hab ich das schon geschafft... aber auch nur via getelementbyid ... jetzt versuche ich es per getelementbyclassname und einer for of schleife... aber es funktioniert einfach nicht... Könnt ihr mir sagen was ich tun muss, und wieso ich das so tun muss ? hier der code meiner vermasselten for of schleife..
let cardhead = document.getElementsByClassName("card-head")
let cardbody = document.getElementsByClassName("card-body")
for(let cardheads of cardhead){
cardheader.addEventListener("click", function(e){
cardbody.classList.add("d-none")
})
cardbodys.addEventListener("click", function(e){
cardbodys.classList.remove("d-none")
})
}Edit: hier eine der Karten :
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>Hallo, ich bin neu hier ich hoffe ich poste im richtigen Forum... zwar mach ich zZ ne Umschulung zum Mediengestalter Digital und Print und habe mich für die Webschiene entschieden, welche ich auch in der Prüfung wählen werde und auch dort arbeiten will, jetzt mache ich ein Praktikum und wir wissen nie was wir essen sollen zu Mittag.. ich kam auf die Idee eine Art Linksammlung zu machen die dann per Knopfdruck aus Zufall einen Link ausspuckt.. das hab ich mit nem Array gelöst... aber nun möchte ich ein Formular wo die anderen Mitarbeiter einen Link einreichen können... der dann auch nach dem Abschicken automatisch in die Liste gespeichert werden und da drinnen bleiben... was brauche ich alles dafür ? Bitte von Anfang an erklären hab keine Erfahrungen mit PHP usw...
grüße