Babel zu JS?

Hallo, ich habe im Netz eine Gallery gefunden, bei der man die Seiten wechseln kann. Jedoch ist der Code Babel.

Kann jemand ihn mir übersetzen?

const mySwiper = new Swiper(document.querySelector('.gallery'), {
  speed: 400,
  spaceBetween: 0,
  slidesPerView: 1,
  loop: true,
  navigation: {
    nextEl: '.gallery__nav-right',
    prevEl: '.gallery__nav-left'
  }
});

Devo

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

01.09.2021, 11:32

Da gibt es nichts zu übersetzen. Dein Code entspricht validem JavaScript. Für die Funktionalität benötigst du die Bibliothek Swiper.

Babel ist im Übrigen einfach nur ein Tool für JavaScript, welches JavaScript-Code mit ES6+-Features zu abwärtskompatiblen Code transformiert.

Ähnliche Fragen

JS Navbar klappt nicht, Hilfe?

Hallo,

Ich wollte mal nach Hilfe fragen, da mein Mobile Menu für die Navigation nicht klappt.

Ich kann das Menu öffnen wenn ich beim Event Listener den . durch ein , ersetze aber kann dann nichts anklicken da es sich direkt Schließt

const selectElement = (element) => document.querySelector(element);


selectElement('.nav-menu-icons').addEventListener('click', () => {
    selectElement('nav').classList.toggle('active');
});

...zur Frage

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zur Frage

Findet jemand von euch den Fehler?

Ich habe in JS versucht, eine Seite zu programmieren (wenn man auf einen Knopf auf der Seite drückt, soll musik spielen). Ich habe versucht, den Fehler zu finden (Bin JS anfänger), aber ich finde den nicht:

const audio = new Audio();
audio.src = "music/musik.mp3"
audio.loop = true;
audio.volume = "0.1"
 
let btn = document.createElement("button");
btn.innerHTML = "start";
btn.onclick = function () {
audio.play();
};
btn.type = "submit";
btn.name = "formBtn";
document.body.appendChild(btn);
Kann mir wer helfen?

...zur Frage

JavaScript problem mit var und if?

Hallo Menschen,

ich will eine js datei machen die wenn man über 18 ist soll man weiter zu nächsten if abfrage kommen unzwar ob man eine kognitiveerkrankung hat, wenn sie true ist soll man in einer var = msg der text "Du hast eine kognitiveerkrankung und desdwegen darfst du den Führerschein nicht machen. " gespeichert werden und wenn es false ist in der else eine neue if anfrage sein die abfragt ob man eine körperliche behinderung hat. wenn es true ist soll in der var = msg der text "du hast zwar eine behinderung, kannst mit hilfsmitten den führerschein aber trotzdem machen. " stehen und wenn false in der else der text (in der var = msg) "Du hast keine erkrankung oder behinderung. Außerdem bist du über 18 also darfst du den Führerschein machen. "

das ist mein Code:

const alter
const kognitivebehinderung
const behinderung
alter = 18
kognitivebehinderung = true
behinderung = true
var msg
if (alter <= 18) {
  msg ="Du bist nicht 18, du darfst kein Führerschein machen. "
} else{
  if (kognitivebehinderung == true) {
    msg +="Du hast außerdem eine kognitivebehinderung also darfst du kein Fühereschein machen. "
  } else {
    if (behinderung == true) {
      msg +="Du hast zwar eine Körperliche behinderung aber du darfst den fürherschein machen. "
    } else {
      msg +="Du hast nichts und darfst den führerschein machen. du hast keine erkrankung oder behinderung. Außerdem bist du über 18 Jahre alt. "
    }
  }
}
alert(msg);

...zur Frage

JavaScript Maximalwert setzen und schneller Value-Wechsel?

Hallo zusammen,

ich habe folgenden +/- Increment und Decrement Button. Kann ich dort einen Maximalwert setzen?

Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

Vorab danke für die Antworten!

HTML:

 <div class="wrapper">
   <span class="minus">-</span>
   <span class="num">01</span>
   <span class="plus">+</span>
</div>

CSS:

.wrapper{
 height: 120px;
 min-width: 380px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #FFF;
 border-radius: 12px;
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
 width: 100%;
 text-align: center;
 font-size: 55px;
 font-weight: 600;
 cursor: pointer;
 user-select: none;
}
.wrapper span.num{
 font-size: 50px;
 border-right: 2px solid rgba(0,0,0,0.2);
 border-left: 2px solid rgba(0,0,0,0.2);
 pointer-events: none;
}

JavaScript:

const plus = document.querySelector(".plus"),
   minus = document.querySelector(".minus"),
   num = document.querySelector(".num");
   let a = 1;
   plus.addEventListener("click", ()=>{
     a++;
     a = (a < 10) ? "0" + a : a;
     num.innerText = a;
   });
   minus.addEventListener("click", ()=>{
     if(a > 1){
       a--;
       a = (a < 10) ? "0" + a : a;
       num.innerText = a;
     }
   });

...zur Frage

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zur Frage

Webseite: Kennt sich jemand damit aus?

Und zwar brauche ich kurz hilfe. Ich möchte dass man im Registrier-Formular ein Profilbild auswählen kann. Wenn man Angemeldet ist, soll das eigene PB oben rechts in der Ecke angezeigt werden.

HTML-Code (Formular):

<div class="container">
      <div class="box">
		  <div class="scroll">
        <form action="" method="POST" class="login-email">
          <p class="login-text">Registrieren</p>
		<div class="profile-pic-div">
            <img src="img/default-pb.jpg" id="photo">
			<input type="file" id="file">
			<label for="file" id="uploadBtn">Profilbild Wählen</label>
          </div>
          <div class="input-group">
            <input type="text" placeholder="Benutzername" name="username" value="<?php echo $username; ?>" required>
          </div>
          <div class="input-group">
            <input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Passwort" name="password" value="<?php echo $_POST['password']; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Wiederhole das Passwort" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
          </div>
          <div class="input-group">
           <button name="submit" class="login-btn">Registrieren</button>
          </div>
          <p class="login-register-text">Du hast bereits ein Konto? <a href="https://www.klexxstube.com/anmelden">Melde dich an</a></p>
        </form>
			 </div>
      </div>
    </div>

Hier der Code zum Wechseln vom PB (JS):

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');


file.addEventListener('change', function() {
	const choosedFile = this.files[0];
	
	if (choosedFile) {
		
		const reader = new FileReader();
		
		reader.addEventListener('load', function() {
			img.setAttribute('src', reader.result);
		});
		
		reader.readAsDataURL(choosedFile);
	}
});

Vielleicht habt ihr auch eine komplett andere Version wie man so etwas schaffen kann.

LG Klexxsy

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

Wie kann ich in C# mit Pfeiltasten die Cursor-Position verändern?

Guten Tag,

ich will, dass, wenn ich in einer Konsolenanwendung die jeweiligen Pfeiltasten drücke, sich dann auch die Cursor-Position ändert.

Ich habe es gerade so:

Console.SetWindowSize(80, 24);
Console.SetBufferSize(80, 24);
Console.SetCursorPosition(0, 0);
Console.Clear();

int down = 0;
int up = 0;
int left = 0;
int right = 0;

do
{
  ConsoleKeyInfo Taste;
  Taste = Console.ReadKey(false);

  if (Taste.Key == ConsoleKey.DownArrow)
  {
    do
    {
      down++;
      Console.SetCursorPosition(0, down);
    }
    while (true == false);
  }

  if (Taste.Key == ConsoleKey.UpArrow)
  {
    do
    {
      up--;
      Console.SetCursorPosition(0, up);
    }
    while (true == false);
  }

  if (Taste.Key == ConsoleKey.RightArrow)
  {
    do
    {
      right++;
      Console.SetCursorPosition(right, 0);
    }
    while (true == false);
  }

  if (Taste.Key == ConsoleKey.LeftArrow)
  {
    do
    {
      left--;
      Console.SetCursorPosition(left, 0);
    }
    while (true == false);
  }
}
while (true == true);

Das Problem aber ist: Wenn ich nach unten gehe und dann nach rechts gehen will, dass der Cursor wieder an den Anfang springt.

Was auch nicht funktioniert ist: Wenn ich nach links oder nach oben gehen will. Weil das -- nicht so funktioniert, wie es soll.

...zur Frage

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

JavaScript +/- Increment and Decrement Number in 5er Schritten?

Hallo zusammen,

ich habe folgenden +/- Increment and Decrement Select Button.

Bei +/- ändert sich der Wert immer 1. Dies möchte ich allerdings in 5er Schritten. Hat da jemand eine Lösung?

HTML:

</div>

CSS:

.wrapper{

height: 120px;

min-width: 380px;

display: flex;

align-items: center;

justify-content: center;

background: #FFF;

border-radius: 12px;

box-shadow: 0 5px 10px rgba(0,0,0,0.2);

}

.wrapper span{

width: 100%;

text-align: center;

font-size: 55px;

font-weight: 600;

cursor: pointer;

user-select: none;

}

.wrapper span.num{

font-size: 50px;

border-right: 2px solid rgba(0,0,0,0.2);

border-left: 2px solid rgba(0,0,0,0.2);

pointer-events: none;

}

JavaScript:

const plus = document.querySelector(".plus"),

minus = document.querySelector(".minus"),

num = document.querySelector(".num");

let a = 1;

plus.addEventListener("click", ()=>{

a++;

a = (a < 10) ? "0" + a : a;

num.innerText = a;

});

minus.addEventListener("click", ()=>{

if(a > 1){

a--;

a = (a < 10) ? "0" + a : a;

num.innerText = a;

}

});

...zur Frage

Wie kann ich eine zufällige Weiterleitung auf andere Website vom Cookie-Fenster aus realisieren?

Hallo,

ich wollte bei meiner Website von einem Cookie-Fenster auf eine zufällige Website weiterleiten. Man klickt also auf "Ablehnen" und wird zu einer der von mir angegebenen Websites geleitet. Ich kenne mich mit JavaScript und HTML nicht gut genug aus, um etwas wie das zu machen.

Hier ist das Cookie-Fenster bis jetzt:

<style>
  #mbmcookie {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #D8D8D8;
    padding: 20px;
    font-size: 14px;
    font-family: verdana;
  }

  #mbmcookie a.button {
    cursor: pointer;
    background: #A4A4A4;
    padding: 8px 20px;
    margin-left: 10px;
    border-radius: 5px;
    font-weight: bold;
    float: right;
  }

  #mbmcookie a.button:hover {
    background-color: #aaa;
  }

  #mbmcookie p.cookiemessage {
    display: block;
    padding: 0;
    margin: 0;
  }
</style>
<div id="mbmcookie">
  <a onClick="var d = new Date(); d = new Date(d.getTime() +1000*60*60*24*730);var w = false; w = false; document.cookie = 'mbmcookie=1; expires='+ d.toGMTString() + ';'; document.getElementById('mbmcookie').style.display = 'none';" class="button">Akzeptieren</a>
  <a href="https://www.google.com"onClick="var d = new Date(); d = new Date(d.getTime() +1000*60*60*24*730);var w = true; w = true; document.cookie = 'mbmcookie=1; expires='+ d.toGMTString() + ';'; document.getElementById('mbmcookie').style.display = 'none';" class="button">Ablehnen</a>
  <p class="cookiemessage">Diese Website verwendet Cookies..
</div>
<script>
  var r = 0;
  a = document.cookie;

  while (a != '') {
    while (a.substr(0, 1) == ' ') {
      a = a.substr(1, a.length);
    }

    cn = a.substring(0, a.indexOf('='));

    if (a.indexOf(';') != -1) {
      cw = a.substring(a.indexOf('=') + 1, a.indexOf(';'));
    }
    else {
      cw = a.substr(a.indexOf('=') + 1, a.length);
    }

    if (cn == 'mbmcookie') {
      r = cw;
    }

    i = a.indexOf(';') + 1;

    if (i == 0) {
      i = a.length
    }

    a = a.substring(i, a.length);
  }

  if (r == '1')
    document.getElementById('mbmcookie').style.display = 'none';
</script>

...zur Frage

Js loop?

 <script>
       let alarm = new Audio('alarm.mp3');
       let timerStarted = false;
       function startTimer() {
           if (!timerStarted) {
               let startTime = new Date().getTime();
               let fiveMinutes = 1000 * 60 * 5;
               let endTime = startTime + fiveMinutes;
               setInterval(function() {
                   let timeLeft = endTime - new Date().getTime();
                   if (timeLeft > 0) {
                       let minutes = timeLeft / (1000 * 60);
                       minutes = Math.floor(minutes);
                       let seconds = (timeLeft / 1000) % 60;
                       seconds = Math.round(seconds);
                       seconds = ('0' + seconds).slice(-2);
                       let text = '0' + minutes + ' : ' + seconds;
                       timer.innerHTML = text;
                   } else {
                       alarm.play();
                       timer.innerHTML = '00 : 00';
                   }
               }, 1000);
               timerStarted = true;
           }
       }
   </script>

Ich möchte diese Aktion gerne loopen (dass der timer immer neu startet nach dem Alarm) wie geht das?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen