Wie kann man den Code erst aktivieren, wenn er weiter unten steht?

Bei meiner Testseite habe ich Code im HTML & JS Format, der das Bild ab einem gewissen Scroll wert ändert, aber dieser Code befindet sich nicht am Anfang der Seite sondern weiter unten. Wenn ich bereits am Anfang der Seite scrolle, werden die Werte gezählt und wenn ich dann zum Code gelange, wird bereits das Endbild angezeigt. Wie kann ich sicherstellen, dass der Effekt erst eintritt wenn ich zum relevanten Abschnitt scrolle?

Html:

  <a href="#!" class="brand-logo">
    <img src="http://placekitten.com/200/200">
  </a>

Javascript:

$(document).ready(function() {
    $(window).on("scroll", function() {
      var scrollPos = $(this).scrollTop();
      if (scrollPos >= 1000) {
        // Bild - 1
        $(".brand-logo img").attr("src", "http://placekitten.com/300/300");
      } else if (scrollPos >= 500) {
        // Bild - 2
        $(".brand-logo img").attr("src", "http://placekitten.com/400/400");
      } else {
        // Standard - Bild
        $(".brand-logo img").attr("src", "http://placekitten.com/200/200");
      }
    });
  });

1 Antwort

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmiersprache, Programmieren & Softwareentwicklung

26.11.2023, 13:38

Berechne halt die Scrollposition relativ zum Start der Box.

Ich würde das aber generell anders bauen. Du baust das so um, dass das "position"-Attribut so gesetzt ist, dass die Box mitscrollt und dann oben kleben bleibt ("sticky" ist da denke ich der passende Wert).

Sobal das passiert sollte dann das Scrollen der äußeren Box deaktiviert werden ("overflow"-Attribut). Und das der Box mit den Bildern wird aktiviert.
Mit dem Scroll-Wert desr Box mit den Bildern baust du dann eine Animation.

Sobald du in der Box ganz unten angelangt bist wird, sobald weitergescrollt wird, wieder auf den Scroll der äußeren Box gewechselt. Die position wird von "sticky" auf irgendetwas anderes gewechselt, damit die Box aus dem Sichtfeld gescrollt werden kann.

Und die Bilder, die platzierst du dann beispielsweise einfachd irekt untereinander in der Box. Der Overflow wird so eingestellt, dass die unteren Bilder anfangs verdeckt sind.

bob1021

Beitragsersteller

26.11.2023, 13:44

Vielen Dank für die ausführliche Beschreibung! Dein Ansatz die Box mithilfe von sticky zu positionieren und dann Scroll-Ereignisse zu nutzen um Animationen auszulösen klingt interessant und machbar. Um das umzusetzen brauche ich eine Kombination aus CSS für die Positionierung und das Styling der Boxen sowie JavaScript um die Scroll-Ereignisse zu überwachen und Animationen auszulösen. Ich werd versuchen deine Antwort umzusetzen

Destranix

26.11.2023, 13:48

@bob1021

Das tolle an der Lösung ist auch, dass du recht wenig eingreifen musst. Die Box fügt sich in die Seite direkt ein, die Bilder kannst du evtl. auch ohne irgendwelche Effekte anzeigen. Dann musst du quasi nur vier Events betrachten:

Die Box ist von unten am Seitenbeginn angekommen.
Die Box wurde zum Ende gescrollt.
Die Box ist von oben am Seitenbeginn angekommen.
Die Box wurde zum Anfang gescrollt

Ähnliche Beiträge

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zum Beitrag

PHP/Passwortvergleich: Warum kommt immer wieder eine Fehlermeldung?

Hallo!

Ich will ein Passwort, das eingegeben wird, vergleichen. Doch es kommt immer wieder diese Fehlermeldung:

Eingegebenes Passwort: n1234
admin:238 Benutzername: nadine
admin:242 Uncaught ReferenceError: form is not defined
  at validatePassword (admin:242:18)
  at HTMLButtonElement.onclick (admin:161:100)

Der Code im AdminController sieht so aus:

public function validatePassword(Request $request, $userName) {
  try {
    $password = $request->input('password');

    // Benutzer anhand des Benutzernamens finden
    $user = User::where('username', $userName)->first();

    // Debugging-Informationen in das Log schreiben
    \Log::info('Benutzername: ' . $userName);
    \Log::info('Benutzer gefunden: ' . ($user ? 'Ja' : 'Nein'));

    if (!$user) {
      return response()->json(['valid' => false, 'message' => 'Benutzer nicht gefunden']);
    }

    // Überprüfen, ob das gespeicherte Passwort im Bcrypt-Format ist
    $passwordInfo = password_get_info($user->password);
    \Log::info('Passwort-Algorithmus: ' . $passwordInfo['algoName']);

    if ($passwordInfo['algoName'] !== 'bcrypt') {
      return response()->json(['valid' => false, 'message' => 'Das gespeicherte Passwort verwendet nicht den Bcrypt-Algorithmus.']);
    }

    // Passwortüberprüfung
    $passwordCheck = Hash::check($password, $user->password);
    \Log::info('Passwort korrekt: ' . ($passwordCheck ? 'Ja' : 'Nein'));

    if ($passwordCheck) {
      return response()->json(['valid' => true]);
    }
    else {
      return response()->json(['valid' => false, 'message' => 'Ungültiges Passwort']);
    }
  }
  catch (\Exception $e) {
    \Log::error('Fehler bei der Passwortvalidierung: ' . $e->getMessage());
    return response()->json(['valid' => false, 'message' => 'Serverfehler. Bitte versuchen Sie es später erneut.'], 500);
  }
}

Und im admin blade so:

function showPasswordModal(route, userName) {
  console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
  $('#passwordModal').modal('show');
  $('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
  $('#passwordForm').data('userName', userName);
  console.log(userName);
}

function validatePassword() {
  console.log('validatePassword() wurde aufgerufen');
  var enteredPassword = document.getElementById('passwordInput').value;
  var userName = $('#passwordForm').data('userName');
  console.log('Eingegebenes Passwort:', enteredPassword);
  console.log('Benutzername:', userName);

  $.ajax({
    type: 'POST',
    url: form.action,//$('#passwordForm').attr('action'), // Stellen Sie sicher, dass dies die richtige Route ist
    data: {
      '_token': '{{ csrf_token() }}',
      'password': enteredPassword
    },
    success: function(response) {
      console.log('Server-Antwort:', response);

      if (response.valid) {
        $('#payForm').submit();
      }
      else {
        alert(response.message || 'Falsches Passwort! Bitte versuche es erneut.');
      }
    },
    error: function(xhr, status, error) {
      console.error('AJAX-Fehler:', error);
      alert('Fehler beim Validieren des Passworts. Bitte versuche es später erneut.');
    }
  });

Warum kommt immer wieder eine Fehlermeldung? Ich habe schon alles probiert und das schon seit Stunden! Danke.

...zum Beitrag

Wie kann ich JavaScript-Code in Processing-Code umschreiben?

Hallo,

also ist es möglich, einen Java-Code in einen Processing-Code umzuschreiben oder besser gesagt, könnte jemand helfen? Ich bin noch sehr am Anfang, habe aber einen Code gefunden, der mir sehr gut gefällt und mit dem ich gerne ein bisschen herumprobieren würde. Nur funktioniert er eben in Processing nicht und mit Java kenne ich mich noch weniger aus, darum würde ich ihn gerne umschreiben.

So sieht das Ganze aus:

let shapes = [];
let colors = ["#ffc857", "#e9724c", "#c5283d", "#481d24", "#255f85", "#a5bccc"];

function setup() {
  createCanvas(1000, 800);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  scale(1.4);
  rotate(random(PI));
  translate(-width / 2, -height / 2);
  background(random(colors));
  let seg = int(random(25, 45));
  let w = width / seg;

  for (let i = 0; i < seg; i++) {
    for (let j = 0; j < seg; j++) {
      let x = i * w;
      let y = j * w;

      if ((i + j) % 2 == 0) {
        shapes.push(createVector(x + w / 2, y + w / 2, w * 2.01));
      }
    }
  }

  shuffle(shapes, true)
  noStroke();

  for (let s of shapes) {
    let rnd = int(random(4));
    shuffle(colors, true);
    push();
    translate(s.x, s.y);
    fill(random(colors));

    if (rnd == 0)
      circle(0, 0, s.z);
    else if (rnd == 1)
      square(0, 0, s.z);
    else if (rnd == 2) {
      let n = int(random(1, 5));
      
      for (let i = 0; i < n; i++) {
        let ss = map(i, 0, n, s.z, 0);
        fill(colors[i]);
        circle(0, 0, ss);
      }
    }
    else if (rnd == 3) {
      let n = int(random(1, 10));

      for (let i = 0; i < n; i++) {
        let ss = map(i, 0, n, s.z, 0);
        fill(colors[i % colors.length]);
        square(0, 0, ss);
      }
    }

    pop();
  }
}

function draw() {
}

...zum Beitrag

XHR nutzt GET anstatt POST?

Mit folgendem code versuche ich zweck logins auf meinen Server zuzugreifen

var r = new XMLHttpRequest();

r.open("POST", "/user/login", true);
r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

r.onreadystatechange = function () {

    if (r.readyState != 4 || r.status != 200) return;

    console.log(r.responseText);
            
    if (r.responseText == '?incorrect') {

        console.log('wrong password');

    }
    else if (r.responseText == 'correct') window.location.replace('/user/');

};

r.send('pwd=' + document.querySelector('#pwd-input').value);

Wenn ich den Code ausführe, steht in der Console der Seitenquelltext als Ergebnis. Der Server (Express) registriert eine GET request und auch im Netzwerktab von Chrome wird die request Methode mit GET angegeben. Hat jemand eine Idee warum und was ich versuchen könnte, außer Alternativen zur XHR zu nutzen?

...zum Beitrag

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

...zum Beitrag

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zum Beitrag

Warum funktioniert mein Websockets- Server nicht?

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed:

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

...zum Beitrag

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zum Beitrag

Javascript Seitenübergreifend?

Hallo,

ich möchte in einen Html Code einen Javascript Code für Lesezeichen einfügen. Also ich habe eine Seite mit vielen Texten (Seite x), zu jedem Text gibt es einen Button, der das jeweilige Lesezeichen hinzufügen soll. Wenn dieser Knopf gedrückt wird, dann soll ein derzeit unsichtbarer Container (display: none;) auf display:flex; bzw. Sichtbar gestellt werden (in Seite y).

Der Code der diese Funktion ausführen soll wäre derzeit:

function textfield1() {

var x = document.getElementById("th1");

if (x.style.display === "none") {

x.style.display = "block";

} else {

x.style.display = "none";

}

Dieser Code wird natürlich nur auf Seite x ausgeführt
kann mir jemand helfen, dass dieser Container dann auf Seite y gezeigt wird?

...zum Beitrag

JQuery Bei Scrollen Datensätze nachladen

Hallol, ich möchte gerne Datensätze in einem DIV mit overflow: auto und einer festen Höhe nachladen über AJAX. Bisher ist es mit dem nachfolgenden Code so, dass nur nachgeladen wird wenn man auf der Seite nach unten scrollt.

Wie muss man den Code verändern, dass wenn man in dem DIV runterscrollt, die Datensätzte geladen werden?

    $(document).ready(function() {
    start = 0;
    count = 5;
    for (var i = 0; i < 1; i++){
        loadcontent(); 
    }
});
 
function loadcontent() {
    $("div.loader").show();    
     
    $.ajax({
        type: 'get',
        url: '/includes/ajax.php',
        async: false,
        data: { start : start, count : count },
        success: function (html){
            if(html){
                $('.container').append(html);
                start = start + 5;
            }else{
                $('.end').html('<p>Keine weiteren Posts!</p>');
            }
        }
         
    }) 
 
    $("div.loader").fadeOut('normal');     
}
 
$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){       
            loadcontent();         
    }
});

Vielen Dank.

...zum Beitrag

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

...zum Beitrag

JavaScript: Warum springt die Galerie immer wieder zum ersten Bild zurück?

Hallo,

ich habe auf meiner Seite eine Galerie mit einigen Bildern. Diese kann ich öffnen/schließen und durchklicken.

Leider habe ich das Problem, dass wenn ich mich durch die Galerie durchklicke, er leider, warum auch immer, wieder zurück zum ersten Bild springt, anstatt die Bilder komplett durchzulaufen.

Ich finde den Fehler nicht.

HTML Code:

<div class="gallery-container">
  <div class="gallery" id="gallery">
    <!--Erste Reihe-->
    <img src="1_1.webp" alt="Bild 1_1" onclick="openModal();currentSlide(1)" class="hover-shadow cursor gallery-img" data-index="1">
    <img src="1_2.webp" alt="Bild 1_2" onclick="openModal();currentSlide(2)" class="hover-shadow cursor gallery-img" data-index="2">
    <img src="2.1.webp" alt="Bild 2_1" onclick="openModal();currentSlide(3)" class="hover-shadow cursor gallery-img" data-index="3">

    usw. bis

    <img src="8_2.webp" alt="Bild 8_2" onclick="openModal();currentSlide(23)" class="hover-shadow cursor gallery-img" data-index="23">
    <img src="8_3.webp" alt="Bild 8_3" onclick="openModal();currentSlide(24)" class="hover-shadow cursor gallery-img" data-index="24">
  </div>
  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      <!-- Fügen Sie für jedes Bild in der Galerie eine Modal Slide hinzu -->
      <div class="mySlides">
        <img src="1_1.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="1_2.webp" style="width:100%">

        bis

      <div class="mySlides">
        <img src="8_2.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="8_3.webp" style="width:100%">
      </div>
    </div>

    <!-- Vorwärts/Rückwärts Kontrollen -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>

JavaScript:

function currentSlide(n) {
  showSlidesModal(slideIndex = n);
}

function showSlidesModal(n) {
  var i;
  var slidesModal = document.getElementsByClassName("mySlides");

  if (n > slidesModal.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slidesModal.length
  }

  for (i = 0; i < slidesModal.length; i++) {
    slidesModal[i].style.display = "none";
  }

  slidesModal[slideIndex - 1].style.display = "block";
}

var galleryImages = document.getElementsByClassName("gallery-img");

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].onclick = function(event) {
    openModal();
    currentSlide(parseInt(event.target.getAttribute('data-index')));
  }
}

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].setAttribute('data-index', i + 1);
}

window.onclick = function(event) {
  if (event.target == document.getElementById('myModal')) {
    closeModal();
  }
}

function plusSlides(n, modal = false) {
  var slides;

  if (modal) {
    slides = document.getElementsByClassName("mySlides");
  }
  else {
    slides = document.getElementsByClassName("slide");
  }

  slideIndex += n;

  if (slideIndex > slides.length) {
    slideIndex = 1
  }

  if (slideIndex < 1) {
    slideIndex = slides.length
  }

  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";

  if (!modal) {
    resetAnimations(slides[slideIndex - 1]);
  }
}

document.querySelector(".modal .prev").onclick = function() {
  plusSlides(-1, true);
};
document.querySelector(".modal .next").onclick = function() {
  plusSlides(1, true);
};

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

showSlides(slideIndex);

...zum Beitrag

Lua: Wieso wird das Label nicht geändert?

Hallo Leute!

Es ist vielleicht ein bisschen komisch, Fragen zum Programmieren hier zu stellen, aber ich komme wirklich einfach nicht weiter.

Ich habe dieses Lua-Skript geschrieben, welches die Geschwindigkeit und ein TextLabel eines Spielers ändern soll, wenn er mit einem Baum Interagiert.

Mein Problem ist, dass wenn ich interagiere, zwar die Geschwindigkeit geändert wird, jedoch nicht das Label. Außerdem wird beides nicht auf den richtigen Wert gesetzt, nachdem man aus dem Spiel und wieder hineingeht.

Außerdem wird kein Fehlercode angezeigt.

Das Skript:

local Players = game:GetService("Players")
local DataStoreService = game:GetService("DataStoreService")
local speedDataStore = DataStoreService:GetDataStore("PlayerSpeedData12")
local tree = workspace:FindFirstChild("Tree2")
if tree then
local prompt = tree.Part.Attachment.ProximityPrompt
if prompt then
prompt.Triggered:Connect(function(player)
-- Überprüfen, ob der Player ein gültiger Spieler ist
if player and player:IsA("Player") then
local userId = player.UserId
local success, hasInteracted = pcall(function()
return speedDataStore:GetAsync("HasInteracted_" .. userId)
end)
if success and hasInteracted then
warn("Player has already interacted with the tree")
return
end
local character = player.Character
if character then
local humanoid = character:FindFirstChildOfClass("Humanoid")
if humanoid then
-- Erhöhe die Geschwindigkeit
if humanoid.WalkSpeed then
humanoid.WalkSpeed = (humanoid.WalkSpeed or 16) + 0.5
end
end
-- Erhöhe den Wert des TextLabels
local playerGui = player:WaitForChild("PlayerGui")
if playerGui then
local screenGui = playerGui:FindFirstChild("ScreenGui") 
if screenGui then
local textLabel = screenGui:FindFirstChild("SpeedFrame"):FindFirstChild("SpeedCounter"):FindFirstChild("Speed")
if textLabel and textLabel:IsA("TextLabel") then
wait(0.1)
local successText, savedText = pcall(function()
return speedDataStore:GetAsync("SpeedText_" .. userId)
end)
if successText and savedText then
textLabel.Text = savedText
else
textLabel.Text = "1.00"
end
-- Speichere den aktualisierten Text
pcall(function()
speedDataStore:SetAsync("SpeedText_" .. userId, textLabel.Text)
end)
end
else
warn("ScreenGui nicht gefunden")
end
else
warn("PlayerGui nicht gefunden")
end
else
warn("Character nicht gefunden")
end
local success, errorMessage = pcall(function()
speedDataStore:SetAsync("HasInteracted_" .. userId, true)
if humanoid then
speedDataStore:SetAsync("WalkSpeed_" .. userId, humanoid.WalkSpeed)
end
end)
if not success then
warn("Fehler beim Speichern der Daten: " .. errorMessage)
end
else
warn("Ungültiger Spieler")
end
end)
else
warn("ProximityPrompt nicht gefunden")
end
else
warn("Tree2 nicht gefunden")
end
Players.PlayerAdded:Connect(function(player)
local userId = player.UserId
local success, savedSpeed = pcall(function()
return speedDataStore:GetAsync("WalkSpeed_" .. userId)
end)
local successText, savedText = pcall(function()
return speedDataStore:GetAsync("SpeedText_" .. userId)
end)
if success then
player.CharacterAdded:Connect(function(character)
local humanoid = character:WaitForChild("Humanoid")
if savedSpeed and humanoid then
if humanoid.WalkSpeed then
humanoid.WalkSpeed = savedSpeed
end
end
local playerGui = player:WaitForChild("PlayerGui")
if playerGui then
local screenGui = playerGui:FindFirstChild("ScreenGui") 
if screenGui then
local textLabel = screenGui:FindFirstChild("SpeedFrame"):FindFirstChild("SpeedCounter"):FindFirstChild("Speed")
if textLabel and textLabel:IsA("TextLabel") then
wait(0.1)
if successText and savedText then
textLabel.Text = savedText
else
textLabel.Text = "0"
end
else
warn("TextLabel nicht gefunden")
end
else
warn("ScreenGui nicht gefunden")
end
else
warn("PlayerGui nicht gefunden")
end
end)
else
warn("Fehler beim Laden der gespeicherten Geschwindigkeit für Spieler " .. userId)
end
end)

Ich wäre wirklich sehr dankbar, wenn mir jemand weiterhelfen kann!

...zum Beitrag

Verstehe nicht, warum es falsch ist?

// loggen der Variabeln-Name für den Login-Button //

let loggen = document.getElementById("login");


loggen.addEventListener("click", function() {
  
// eingabeFeld ist der Name für das Inputfeld //  
let eingabeFeld = document.getElementById("field");

eingabeFeld.value;
if (eingabeFeld.includes("huso1234")) {
alert("Ja, das Passwort ist richtig");
}
else {
    alert("Das Passwort ist falsch");
}
eingabeFeld.textContent = "";
});

Funktioniert halt einfach nicht. Es handelt sich hierbei um die Programmiersprache JavaScript. Es kommt kein Alert und am Ende geht der Text auch nicht weg vom Inputfeld.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen