HTML5 – die neusten Beiträge

JQuery Code umschreiben value "1" und value "2"?

Kann man den Code so umschreiben oder ändern, dass wenn man zurück auf keine_dieser_Krankheiten anklickt, dass dann alle Felder _Erkrankungen den value "1" zurück bekommen?

$(document).ready(function() {
  let krankheitenCheckboxes = $("input[type='checkbox'][name$='_Erkrankungen']").not("#keine_dieser_Krankheiten");
  let keineCheckbox = $("#keine_dieser_Krankheiten");
  
  function updateValues() {
    krankheitenCheckboxes.each(function() {
      let hiddenInput = $("input[type='hidden'][name$='_Erkrankungen']");
      if ($(this).prop("checked")) {
        hiddenInput.val("2");
      } else {
        hiddenInput.val("1");
      }
    });
  }
  
  krankheitenCheckboxes.on("change", function() {
    if ($(this).prop("checked")) {
      keineCheckbox.prop("checked", false);
      $("input[type='hidden'][name='keine_dieser_Krankheiten']").val("1");
    }
    updateValues();
  });
  
  keineCheckbox.on("change", function() {
    if (keineCheckbox.prop("checked")) {
      // Setzt alle _Erkrankungen Felder auf "1"
      krankheitenCheckboxes.each(function() {
        $(this).prop("checked", false);
        let hiddenInput = $("input[type='hidden'][name$='_Erkrankungen']");
        hiddenInput.val("1");
      });
      $("input[type='hidden'][name='keine_dieser_Krankheiten']").val("2");
    } else {
      $("input[type='hidden'][name='keine_dieser_Krankheiten']").val("1");
    }
    updateValues();
  });
  
  updateValues();
});
HTML, Webseite, JavaScript, HTML5, Code, JQuery, Programmiersprache, Script, Webentwicklung, Frontend

Wieso geht der Code nicht?

Hallo

Ich möchte mit js ein Programm bauen, welches meinen Körper erkennt und dort drauf dann ein T-Shirt-Modell legt. Also so eine virtuelle Garderobe quasi. Wieso geht der Code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Try-On Final</title>
<style>
 body { margin: 0; overflow: hidden; }
 #webcam {
  position: absolute;
  transform: scaleX(-1);
  opacity: 0.5;
  z-index: 1;
 }
 #output {
  position: absolute;
  z-index: 2;
 }
</style>
</head>
<body>
<video id="webcam" autoplay playsinline></video>
<canvas id="output"></canvas>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script>
const video = document.getElementById('webcam');
const output = document.getElementById('output');
let net, scene, camera, renderer, shirt;
let bodyPosition = { x: 0, y: 0, width: 0, height: 0 };
async function setupWebcam() {
 try {
  const stream = await navigator.mediaDevices.getUserMedia({
   video: {
    width: { ideal: 640 },
    height: { ideal: 480 },
    facingMode: 'user'
   }
  });
  video.srcObject = stream;
  
  return new Promise(resolve => {
   video.onloadedmetadata = () => {
    output.width = video.videoWidth;
    output.height = video.videoHeight;
    resolve();
   };
  });
 } catch (error) {
  console.error('Webcam error:', error);
  alert('Bitte Webcam-Zugriff erlauben!');
 }
}
function initThreeJS() {
 scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera(
  60,
  output.width / output.height,
  0.1,
  1000
 );
 camera.position.set(0, 0, 2);
 renderer = new THREE.WebGLRenderer({
  canvas: output,
  alpha: true,
  antialias: true
 });
 renderer.setClearColor(0x000000, 0);
 // Beleuchtung
 const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
 scene.add(ambientLight);
 const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
 directionalLight.position.set(0, 2, 5);
 scene.add(directionalLight);
 loadShirtModel();
}
async function loadShirtModel() {
 const loader = new THREE.GLTFLoader();
 try {
  const gltf = await loader.loadAsync('tshirt_model.glb');
  shirt = gltf.scene;
  
  // Material-Anpassung
  shirt.traverse(child => {
   if (child.isMesh) {
    child.material = new THREE.MeshPhongMaterial({
     color: 0xffffff,
     transparent: true,
     opacity: 0.9,
     depthWrite: false
    });
   }
  });
  shirt.scale.set(0.3, 0.3, 0.3);
  scene.add(shirt);
  console.log('T-Shirt Modell geladen');
 } catch (error) {
  console.error('Modellfehler:', error);
  addFallbackCube();
 }
}
function addFallbackCube() {
 const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
 const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
 shirt = new THREE.Mesh(geometry, material);
 scene.add(shirt);
}
function calculateBodyPosition(segmentation) {
 const data = segmentation.data;
 let minX = Infinity, maxX = -Infinity;
 let minY = Infinity, maxY = -Infinity;
 for (let y = 0; y < segmentation.height; y++) {
  for (let x = 0; x < segmentation.width; x++) {
   if (data[y * segmentation.width + x] === 1) {
    minX = Math.min(minX, x);
    maxX = Math.max(maxX, x);
    minY = Math.min(minY, y);
    maxY = Math.max(maxY, y);
   }
  }
 }
 if (minX !== Infinity) {
  bodyPosition = {
   x: (minX + maxX) / 2,
   y: (minY + maxY) / 2,
   width: maxX - minX,
   height: maxY - minY
  };
 }
}
function updateShirtPosition() {
 if (!shirt) return;
 // Koordinatenumrechnung
 const x = (bodyPosition.x / output.width - 0.5) * 2;
 const y = -(bodyPosition.y / output.height - 0.5) * 2;
 
 shirt.position.set(x, y, 0);
 
 // Skalierung basierend auf Körpergröße
 const scaleFactor = bodyPosition.height / output.height * 2;
 shirt.scale.set(scaleFactor, scaleFactor, scaleFactor);
}
async function detectBody() {
 try {
  // Ganzkörper-Segmentierung
  const segmentation = await net.segmentPerson(video, {
   segmentationThreshold: 0.7,
   internalResolution: 'high',
   maxDetections: 1
  });
  calculateBodyPosition(segmentation);
  updateShirtPosition();
  // Rendering
  const ctx = output.getContext('2d');
  ctx.clearRect(0, 0, output.width, output.height);
  renderer.render(scene, camera);
  requestAnimationFrame(detectBody);
 } catch (error) {
  console.error('Detektionsfehler:', error);
 }
}
(async () => {
 await setupWebcam();
 net = await bodyPix.load({
  architecture: 'ResNet50',
  outputStride: 32,
  quantBytes: 2
 });
 initThreeJS();
 detectBody();
})();
</script>
</body>
</html>

Freundliche Grüsse

HTML, Webseite, CSS, JavaScript, HTML5, Code, Datenbank, Programmiersprache, Webentwicklung, Frontend

JavaScript: Wie kann ich eine große Tabelle schneller sortieren?

Hallo zusammen,

ich habe eine große Tabelle in meiner ASP.NET Core Razor Pages Anwendung, die ich clientseitig mit JavaScript sortieren möchte.

Allerdings dauert die Sortierung bei einer großen Datenmenge zu lange, und ich suche nach einer performanten Lösung.

Meine aktuelle Implementierung:

Ich nutze Array.sort() und vergleiche Strings und Zahlen entsprechend, das funktioniert aber das ist nicht effizient genug.

Besonders wenn die Tabelle viele Zeilen (z. B. >10.000) hat, wird die Sortierung langsam.

Meine Anforderungen:

✅ Die Sortierung muss komplett in JavaScript (clientseitig) erfolgen

✅ Sie muss sowohl Texte (Strings mit Umlaute, Sonderzeichen, etc.) als auch Zahlen (inkl. Währungen mit €) schnell sortieren

✅ Die Tabelle wird nachträglich dynamisch mit Daten befüllt (also keine initiale Sortierung im Backend möglich)

✅ Die Lösung soll sehr schnell auch bei großen Datenmengen sein

Ich habe bereits probiert:

❌ Array.sort() (wird langsam bei vielen Zeilen)

❌ localeCompare() (korrekt für Strings, aber langsam)

❌ TypedArrays für Zahlenwerte (bringt nicht genug Speed)

Gibt es eine bessere Möglichkeit, eine HTML-Tabelle performant zu sortieren?

Vielleicht mit Web Worker, einer anderen Datenstruktur oder anderen Algorithmen?

oder gibt es andere Funktionen/Möglichkeiten, die ich noch probieren kann?

hier mein aktueller Ansatz:

Tabelle:

    <div class="col-lg-9 col-md-7 col-12">
      <div class="table-container">
        <table class="table-modern table-hover w-100" id="statistikTable">
          <thead>
            <tr>
              <th onclick="sortTable(0, this)">Datum <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(1, this)">PID <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(2, this)">Nachname <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(3, this)">Vorname <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(4, this)">Rechnungsnetto <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(5, this)">Belegnummer <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
            </tr>
          </thead>
          <tbody>
            @if (Model.StatistikData != null && Model.StatistikData.Rows.Count > 0)
            {
              foreach (DataRow row in Model.StatistikData.Rows)
              {
                <tr>
                  <td>@(((DateTime)row["Datum"]).ToString("dd.MM.yyyy"))</td>
                  <td>@row["PID"]</td>
                  <td>@row["KundeNachname"]</td>
                  <td>@row["KundeVorname"]</td>
                  <td>@Convert.ToDecimal(row["Rechnungsnetto"]).ToString("N2")</td>
                  <td>@row["Belegnummer"]</td>
                </tr>
              }
            }
            else
            {
              <tr>
                <td colspan="6" class="text-center">Keine Daten gefunden</td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>

meine sort Funktion:

  function sortTable(columnIndex, header) {
    const table = document.getElementById("statistikTable");
    const tbody = table.tBodies[0];
    const rows = Array.from(tbody.rows);
    const ascending = table.dataset.sortOrder !== "asc";

    const isNumericColumn = !isNaN(parseFloat(rows[0].cells[columnIndex].textContent.replace("€", "").replace(",", ".").trim()));

    let sortedRows;
    if (isNumericColumn) {
      sortedRows = rows
        .map(row => ({
          element: row,
          value: parseFloat(row.cells[columnIndex].textContent.replace("€", "").replace(",", ".").trim()) || 0
        }))
        .sort((a, b) => ascending ? a.value - b.value : b.value - a.value);
    } else {
      const collator = new Intl.Collator("de", { numeric: true, sensitivity: "base" });
      sortedRows = rows
        .map(row => ({
          element: row,
          value: row.cells[columnIndex].textContent.trim()
        }))
        .sort((a, b) => ascending ? collator.compare(a.value, b.value) : collator.compare(b.value, a.value));
    }

    const fragment = document.createDocumentFragment();
    sortedRows.forEach(({ element }) => fragment.appendChild(element));
    tbody.appendChild(fragment);

    table.dataset.sortOrder = ascending ? "asc" : "desc";

    updateSortIcons(header, ascending);
  }

  function updateSortIcons(header, ascending) {
    document.querySelectorAll(".sort-icon").forEach(icon => {
      icon.src = "/img/dgvsort.png";
      icon.style.display = "inline";
    });

    const icon = header.querySelector(".sort-icon");
    if (icon) {
      icon.src = ascending ? "/img/dgvsortup.png" : "/img/dgvsortdown.png";
      icon.style.display = "inline";
    }
  }

Freue mich über jede Hilfe! 😊

HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Programmiersprache, Webdesign, Webentwicklung, Frontend

Frage zu Responsive Nav, Burger Button?

Hi, also ich verstehe hier folgendes nicht :

Warum das Hamburger Symbol bei bei zutreffender Mediaquerry "@media (max-width: 768px)", angezeigt wird, denn schließlich ist doch der ".menu-toggle" auf "display: none;" ???

Eventuell verstehe ich es richtig, dass durch ".classList.toggle('nav-active');" in der "function toggleMenu()" irgendwie der Burger aktiviert wird, durch eine versteckte VanillaJS Funktion, aber wie genau?

Danke

LG

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Meine Website</title>
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: Arial, sans-serif;
       }
       body {
           display: flex;
           flex-direction: column;
           align-items: center;
       }
       .navbar {
           width: 100%;
           background-color: #333;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 15px;
       }
       .logo {
           color: white;
           font-size: 24px;
           font-weight: bold;
       }
       .nav-links {
           list-style: none;
           display: flex;
       }
       .nav-links li {
           margin: 0 15px;
       }
       .nav-links a {
           color: white;
           text-decoration: none;
           font-size: 18px;
       }
       .menu-toggle {
           display: none;
           font-size: 24px;
           color: white;
           cursor: pointer;
       }
       @media (max-width: 768px) {
           .nav-links {
               display: none;
               flex-direction: column;
               background-color: #333;
               position: absolute;
               top: 60px;
               right: 0;
               width: 100%;
               text-align: center;
           }
           .nav-links li {
               padding: 10px 0;
           }
           .menu-toggle {
               display: block;
           }
           .nav-active {
               display: flex;
           }
       }
   </style>
</head>
<body>
   <nav class="navbar">
       <div class="logo">Mein Logo</div>
       <span class="menu-toggle" onclick="toggleMenu()">&#9776;</span>
       <ul class="nav-links">
           <li><a href="#">Home</a></li>
           <li><a href="#">Über</a></li>
           <li><a href="#">Leistungen</a></li>
           <li><a href="#">Kontakt</a></li>
       </ul>
   </nav>
   <script>
       function toggleMenu() {
           document.querySelector('.nav-links').classList.toggle('nav-active');
       }
   </script>
</body>
</html>


ps:Ok hat sich geklärt...ich depp habe übersehen das die unteren css eigenschaften ja in der Mediaquerry drinne sind
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webdesign, Webentwicklung

PHP: Wie kann ich die Videoladezeit verbessern?

Hallo,

ich habe folgendes Problem:

Ich habe diese PHP-Datei erstellt und bei mir auf meinem iPhone lädt es die Videodatei sehr langsam bis gar nicht. Wenn ich aber auf PC im gleichen Netflix schaue, lädt es sehr schnell.

Ich habe es bei anderen Freunden testen lassen, die auch ein iPhone haben. Bei der einen Person lädt es auch sehr schnell, bei der anderen auch nicht, so wie bei mir. Bei mir lädt es immer nur schnell, wenn ich mobile Daten anhabe.

Die Videodateien sind 2-7 GB groß.

Vielleicht kann jemand eine Lösung für mich finden, das zu beheben. Wichtig ist, dass ich die Größe der Videodateien nicht verkleinern kann. Das heißt, es muss trotzdem schnell die Videodatei laden.

Ich sage schon einmal danke an die Person, die sich die Zeit und Mühe nimmt, mir zu helfen.

Bei einer Verbindung mit dem normalen Heimnetz sieht es auf dem iPhone so aus:

Wenn ich über LTE (mobile Daten) lade:

Der PHP-Code:

<?php 
  require 'db.php'; // Die Datenbankverbindung einbinden
  require 'is_premium.php'; // Die Datenbankverbindung einbinden

  // Überprüfen, ob eine ID übergeben wurde
  if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
    die('Ungültige Film-ID.');
  }

  $movie_id = intval($_GET['id']);
  // Film aus der Datenbank abfragen
  $stmt = $db->prepare('SELECT * FROM movies WHERE id = ?');
  $stmt->bind_param('i', $movie_id);
  $stmt->execute();
  $result = $stmt->get_result();

  if ($result->num_rows === 0) {
    die('Film nicht gefunden.');
  }

  $movie = $result->fetch_assoc();
  $stmt->close();
  $db->close();

  // Erkennen, ob die URL ein lokales Video ist oder über HTTPS geladen werden soll
  $is_local_video = strpos($movie['video'], 'uploads/videos/') === 0;
  $is_https = strpos($movie['video'], 'https://') === 0;
  $thumbnail = htmlspecialchars($movie['thumbnail']); // Thumbnail aus der Datenbank
?>
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo htmlspecialchars($movie['name']); ?> - MovieVel</title>
  <style>
   #css code
  </style>
</head>
<body>
  <div class="container">
    <div class="movie-detail">
      <h1><?php echo htmlspecialchars($movie['name']); ?></h1>
      <!-- Movie Video -->
      <div class="<?php echo $is_local_video ? 'video-container' : 'iframe-container'; ?>">
        <div class="play-btn">
          &#9654; <!-- Play-Symbol -->
        </div>
        <?php if ($is_local_video): ?>
          <!-- Video für progressive Web-Optimierung mit Bild-in-Bild-Unterstützung -->
          <video id="video-player" controls autoplay preload="auto" poster="<?php echo $thumbnail; ?>"
              onclick="this.requestPictureInPicture()" muted playsinline>
            <source src="<?php echo htmlspecialchars($movie['video']); ?>" type="video/mp4">
            Ihr Browser unterstützt dieses Videoformat nicht.
          </video>
        <?php elseif ($is_https): ?>
          <iframe 
            src="<?php echo htmlspecialchars($movie['video']); ?>" 
            allowfullscreen>
          </iframe>
        <?php else: ?>
          <p>Video konnte nicht geladen werden. Überprüfen Sie die URL oder die Serverkonfiguration.</p>
        <?php endif; ?>
      </div>
      <!-- Movie Description -->
      <div class="description-box">
        <h2>Über den Film</h2>
        <p><?php echo htmlspecialchars($movie['description']); ?></p>
      </div>
      <!-- Back Button -->
      <a href="index.php" class="back-btn">Zurück zur Übersicht</a>
    </div>
  </div>
  <script>
    const video = document.getElementById('video-player');
     
    // Überprüfen, ob Picture-in-Picture unterstützt wird
    if ('pictureInPictureEnabled' in document) {
      video.addEventListener('click', async () => {
        try {
          // Versuchen, Bild-in-Bild zu aktivieren
          if (document.pictureInPictureElement !== video) {
            await video.requestPictureInPicture();
          } else {
            // Wenn das Video schon im Bild-in-Bild-Modus ist, es wieder schließen
            await document.exitPictureInPicture();
          }
        } catch (err) {
          console.error('Fehler beim Wechseln in den Bild-in-Bild-Modus:', err);
        }
      });
    }
  </script>
</body>
</html>
Bild zum Beitrag
Homepage, SQL, HTML, Webseite, CSS, JavaScript, HTML5, Code, Datenbank, MySQL, PHP, Webdesign, Webentwicklung, phpMyAdmin

Wie kann der Scroll-Button ausgeblendet werden bzw. eingeblendet?

Warum funktioniert es nicht, der Button bleibt von Anfang bis Ende der Seite eingeblendet.

Ich möchte eine JS -Funktion schreiben, die diesen Button erst einblendet, wenn der Nutzer ein Stück weit herunter gescrollt hat. Ebenso soll der Button versteckt werden, wenn der Nutzer wieder nach oben gescrollt hat.

Mein bisheriger Code:

HTML:  
   <a href="#" id="topButton">Nach oben</a>

CSS: 
#topButton {
    position: fixed;
    bottom: 20px; /* Abstand vom unteren Rand */
    right: 30px; /* Abstand vom rechten Rand */
    background-color: #007BFF; /* Blau */
    color: white; /* Weißer Text */
    padding: 10px 15px; /* Innenabstand */
    border: none; /* Kein Rand */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
    text-decoration: none; /* Keine Unterstreichung */
    font-size: 14px; /* Schriftgröße */
    cursor: pointer; /* Zeiger-Hand-Symbol */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animation */
  }


  #topButton:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
    transform: translateY(-2px); /* Leichtes Anheben beim Hover */
  }


  #topButton:active {
    transform: translateY(0); /* Zurücksetzen bei Klick */
  }

JavaScript:
// Element auswählen
let topButton = document.getElementById("topButton");


// Scroll-Event-Listener hinzufügen
window.addEventListener("scroll", function() {
  // Zeigt den Button an, wenn mehr als 50px gescrollt wurde
  if (window.scrollY > 50) {
    topButton.style.display = "block"; // Button wird sichtbar
  } else {
    topButton.style.display = "none"; // Button wird versteckt
  }
});


// Klick-Event für den Button
topButton.addEventListener("click", function(event) {
  event.preventDefault(); // Standard-Aktion verhindern
  window.scrollTo({
    top: 0, // Scrollt nach oben
    behavior: "smooth" // Sanftes Scrollen
  });
});
Homepage, App, Programm, HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code

Warum scrollt es automatisch nach oben, wenn ich auf den Slider klicke (siehe bitte meine letzte Frage für Code)?

Wenn ich auf den Slider klicke, dann scrollt es danach nicht mehr nach unten, sondern geht automatisch nach oben. Woran könnte das Problem liegen?

HTML:

<article id="ÜberschriftAnfang">
  <h1>Michael Jackson - The King of Pop</h1>
  
  <!-- Slideshow Container -->
  <div class="slideshow-container">
   
    <!-- Slide 1 -->
    <div class="mySlides fade active" style="display:block">
      <div class="numbertext">1 / 3</div>
      <img src="Background picture.jpg" style="width:100%" alt="Background Image">
    </div>

    <!-- Slide 2 -->
    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="papers.co.jpg" style="width:100%" alt="Background Image 2">
    </div>

    <!-- Slide 3 -->
    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="5m6XCzF.jpg" style="width:100%" alt="Background Image 3">
    </div>

    <!-- Navigation Arrows -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

  </div>

  <!-- Dots Navigation -->
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</article>

JS:

let slideIndex = 1;
showSlides(slideIndex); // Startet die Slideshow und zeigt das erste Bild an.

function plusSlides(n) {
  showSlides(slideIndex += n);
}

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

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");

  // Überprüfen, ob der slideIndex größer als die Anzahl der Slides ist
  if (n > slides.length) {
    slideIndex = 1; // Setze den Index auf 1, wenn er größer ist als die Anzahl der Slides
  }

  // Überprüfen, ob der slideIndex kleiner als 1 ist
  if (n < 1) {
    slideIndex = slides.length; // Setze den Index auf die letzte Slide, wenn er kleiner ist als 1
  }

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

  // Alle Dots zurücksetzen
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  // Zeige das aktuelle Bild und Dot
  slides[slideIndex - 1].style.display = "block";  
  dots[slideIndex - 1].className += " active";
}

CSS: siehe Antwort

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend

Website lädt Datei nicht hoch, warum?

Moin, kennt sich vielleicht jemand mit PHP und Html aus und weiß warum beim Upload der Datei nicht das Script "upload.php" ausgeführt wird? Versuche mich gerade beim Scripten, stehe allerdings gerade voll auf dem Schlauch... Danke!

<?php include 'header.php'; ?>
<?php
if(!isset($_SESSION['email'])){
  header('location:login.php');
  $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
}
 ?>
      <div class="breadcrumb">
        <div class="container">
            <a class="breadcrumb-item" href="index.php">Home</a>
            <span class="breadcrumb-item active">Welecome <?php echo $_SESSION['email'] ?></span>
            <span class="breadcrumb-item active">Upload Video</span>
        </div>
    </div>
    <section class="static about-sec">
        <div class="container">
            <h1>Upload Video</h1>
            <div class="form">
                <form class="" action="videoUpload.php" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="hidden" name="id" value="">
                            <label for="name">Name of Video:</label>
                            <input type="text" name="name" value="" placeholder="Fantasy World" required>
                            <label for="video_url">Video URL</label>
                            <input type="file" name="video_url" required>
                            <label for="description">Description</label>
                            <input type="text" name="description" value="" placeholder="">
                            <label for="category">Category</label>
                            <select name="category">
                              <option value="Classic">Classic</option>
                              <option value="Adventerous">Adventerous</option>
                              <option value="Nature">Nature</option>
                              <option value="Others">Others</option>
                            </select>
                          </div>
                        </div>
							<div class="col-lg-8 col-md-12">
							<form action="upload.php" method="post" enctype="multipart/form-data">
							<input type="submit" class="btn black" value="Upload Image" name="submit">
							</form>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>


    <?php include 'footer.php';?>
HTML, Webseite, HTML5, Code, Datenbank, MySQL, PHP, Programmiersprache, Webdesign, Webentwicklung

Wie kann ich einen Button nach dem Laden einer Webseite aktiviert aussehen lassen?

Ich habe mir für mein Intranet ein kleines Video-Portal programmiert - das eigentlich ganz gut funktioniert.
Oben gibt es eine aufklappbare Ansicht mit Haupt und Unterkategorien und wenn eine Unter-Kategorie angeklickt wird öffnet sich die Seite mit einer Übersicht relevanter Videos.

Die Haupt-Kategorie gebe ich als URL-Parameter mit -> das funktioniert auch und es wird verdeckt die zu letzt verwendete Hauptkategorie angewählt.

Was nicht funktioniert, ist den Button für die aktuelle Hauptkategorie im Reitermenü so hervor zu heben als wenn er angeklickt wurde - bzw. den Button zu aktivieren.

JavaScript:

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;


  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }


  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

PHP-Script:


$cat = "Musik";
if (isset($_GET['cat']))
{
$cat = ($_GET['cat']);
}

echo '<details><summary> Kategorien: </summary>';
echo '<div class="tab">';

echo '<button type="button" name="Musik" class="tablinks" onclick="openCity(event, \'Musik\')">Musik</button>
<button type="button"  name="Anleitungen" class="tablinks" onclick="openCity(event, \'Anleitungen\')">Anleitungen</button>
<button type="button"  name="Kochen" class="tablinks" onclick="openCity(event, \'Kochen\')">Kochen</button>
<button type="button"  name="Backen" class="tablinks" onclick="openCity(event, \'Backen\')">Backen</button>
<button type="button"  name="Heimwerken" class="tablinks" onclick="openCity(event, \'Heimwerken\')">Heimwerken</button>';
  
echo '</div>';

echo '<!-- Tab content -->
<div id="Musik" class="tabcontent">
<div style="column-count: 5;">
'.$category_Musik.'
</div>
</div>

<div id="Anleitungen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Anleitungen.'
</div>
</div>

<div id="Kochen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Kochen.'
</div>
</div>

<div id="Backen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Backen.'
</div>
</div>

<div id="Heimwerken" class="tabcontent">
<div style="column-count: 5;">
'.$category_Heimwerken.'
</div>
</div>';

echo '</details>';

echo '<SCRIPT type="text/javascript" language="JavaScript">
openCity(event, \''.$cat.'\'); 
</SCRIPT>';

CSS-Definitionen:



/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}


/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

so sieht es aus:

so soll es nach dem Laden der Seite aussehen:

Hat jemand eine Idee wie ich den Button für die aktuelle Kategorie beim Laden der Seite automatisch aktivieren kann?

Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Webdesign, Webentwicklung

JavaScript: Wie kann ich Daten zwischen zwei Dateien verteilen?

Hallo zusammen,

ich bitte euch um Hilfe bei meinem Problem. Und zwar muss ich im Studium eine Seite so nachbauen, dass ich mittels einer Filterauswahl eine Liste ausgeben kann.

Letztens haben wir gelernt, dass wir den Code anhand Komponenten aufteilen sollen. Ich habe also die Komponenten Titelleiste (wo der Filter, Logo und Titel enthalten sein sollte), Tabelle und Filter erstellt.

Zudem gibt es ja diese Hauptdatei App.js. In einem ersten Schritt habe ich in der Filter.js Funktionen geschrieben, um meine Daten gemäß der möglichen Suchbegriffe zu filtern und habe den aktuellen Wert, welcher vom Nutzer gewählt wird, in einem useState abgespeichert.

Wie kann ich diesen Wert nun der Tabelle.js übergeben, damit dort anhand der Filterung die Ausgabe generiert werden kann?

ChatGPT hat mir geraten, die Daten zuerst in die App.js zu schreiben. Aber wie geht das? Wie komme ich von einem Child in das Parent?

Ich denke, ihr erkennt, dass ich leider noch sehr unerfahren im Programmieren bin.

Folgend die Codes:

App.js:

const Titelseite = () => {
  return (
    <div className="titelseite-container">
      <BasicTable />
    </div>
  );
};

const Tabelle = () => {
  return (
    <div className="tabelle">
      <div>Tabellenleiste</div>
    </div>
  );
};

function App() {
  const [service_ausg, setService] = useState("");
  const [anbieter_ausg, setAnbieter] = useState("");
  const handleServiceChange = (value) => {
    setService(value);
  };
  const handleAnbieterChange = (e) => {
    setAnbieter(e);
  };

  return (
    <div className="App">
      <Titelleiste>
        <Filter
          onChangeService={handleServiceChange}
          onChangeAnbieter={handleAnbieterChange}
        />
        <BasicTable />
      </Titelleiste>
      <Titelseite />
    </div>
  );
}

export default App;

Titelleiste.js:

import Grid from "@mui/material/Grid2";
import { Filter } from "./Filter";
import { useState } from "react";
import data from "./data/tableData.json";

export const Titelleiste = () => {
  const getData = (data) => {
    console.log("Ich bin in Titelleiste und komme von Filter");
  };

  return (
    <Grid container spacing={2}>
      <Grid item size={4}>
        <p>
          <img src="geoharvester.png" width="100px" height="50px" />
        </p>
      </Grid>
      <Grid item size={4}>
        <p>Ein Katalog für schweizer Geodienste</p>
      </Grid>
      <Grid item size={4} container justifyContent="flex-end">
        <p>
          <Filter onChange={getData} />
        </p>
      </Grid>
    </Grid>
  );
};

Filter.js :

import "./App.css";
import { useState } from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormHelperText from "@mui/material/FormHelperText";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import data from "./data/tableData.json";
import { App } from "./App";

export const Filter = ({ onChangeService, onChangeAnbieter }) => {
  let array_service = data.map((element) => element.service);
  let array_service_ausg = [...new Set(array_service)]; //* new "Set", entfernt automatisch die Duplikate und erstellt ein neues Objekt. Das neue Objekt wird mittels den "..." in eine Liste gespeichert
  let array_anbieter = data.map((element) => element.anbieter);
  let array_anbieter_ausg = [...new Set(array_anbieter)];
  const funService = (e) => {
    const [service_ausg, setService] = useState("");
    setService(e.target.value);
  };
  const funAnbieter = (e) => {
    TransferAnbieter(e.target.value);
  };

  return (
    <div>
      <form>
        <Select name="service" onChange={funService} sx={{ width: 100 }}>
          {array_service_ausg.map((service) => (
            <MenuItem value={service}>{service}</MenuItem>
          ))}
        </Select>
      </form>
      <Select name="anbieter" onChange={funAnbieter} sx={{ width: 100 }}>
        {array_anbieter_ausg.map((anbieter) => (
          <MenuItem value={anbieter}>{anbieter}</MenuItem>
        ))}
      </Select>
      <br />
    </div>
  );
};

Nach einigen Stunden, die ich bereits in die Recherche meines Problems investiert habe, danke ich euch herzlich für eure Hilfe.

Bild zum Beitrag
HTML, IT, Webseite, JavaScript, HTML5, Code, Informatik, Programmiersprache, Softwareentwicklung, Webentwicklung, Frontend, React

JavaScript/html2pdf: Wieso werden die Seiten nicht richtig gedruckt?

Hi, ich möchte mit JavaScript und den Bibliotheken JsBarcode und html2pdf Barcodes generieren, einen Text oberhalb des Barcodes ausgeben und diesen dann als PDF speichern, um damit Etiketten mit Barcodes zu drucken.

Leider habe ich dabei aber das Problem, dass meine Seiten immer weiter nach oben geschoben werden und somit dann ein Label auf zwei Seiten gedruckt wird.

Kennt jemand das Problem oder kann mir dabei helfen?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html2pdf</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <style>
      .label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60mm;
        height: 30mm;
        margin: 0;
        padding: 0;
      }

      .label-text-center {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      svg {
        width: auto;
        height: 60%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper" id="element-to-print">
      <div class="label">
        <p class="label-text-center">headline01</p>
        <p class="label-text-center">headline01</p>
        <svg id="barcode" class="label-image-center"></svg>
      </div>
    </div>
    <script>
      // Generiere Barcodes für alle SVGs mit der Klasse "barcode"
      JsBarcode("#barcode", "5901234123457", { format: "EAN13" });

      // PDF-Optionen
      var opt = {
        margin: 0,
        filename: 'barcodes.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: [60, 30], orientation:'landscape' }
      };
      // Erstelle das PDF und speichere es
      html2pdf().set(opt).from(document.getElementById('element-to-print')).save();
    </script>
  </body>
</html>
Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webentwicklung, Frontend, node.js

Website erstellen - Mit Lua/Luau möglich?

Ist es eigentlich möglich, mit Lua oder Luau eine qualitative Website mit komplexem Layout und 3D-Elementen zu erstellen, oder kommt man um den JavaScript nicht herum?

Ich bin Anfänger (habe noch mich noch nie mit programmieren/coden vertraut gemacht) und möchte damit beginnen, zu lernen, wie man einen Code zu einer Website transformiert, habe mich damit aber noch nicht auseinandergesetzt (ich habe bisher noch keine Erfahrung mit coden von Websites). Und ja, bisher habe ich keine einzelne Zeile Code geschrieben und kenne mich auch nicht wirklich aus. Jedenfalls, für mich wäre es effizienter und eventuell auch besser, mich mit Lua vertraut zu machen, aber da ich dazu nichts gefunden habe, habe ich die Befürchtung, dass JavaScript nicht zu umgeben ist. Und so bin ich auf gutefrage.net gekommen, wie jeder, wenn er etwas sucht.

Kurzgefasst interessiert mich, ob man mit Lua folgendes tun kann:

  • Eine Website mit 3D-Effekten erstellen
  • Eine Website mit Animationen erstellen
  • Komplexe Layouts Wirklichkeit werden lassen

Ich bin noch ein richtiger Anfänger, aber mich würden eure Antwort und euer Wissen interessieren, damit ich weiß, was für die Zukunft besser ist (schließlich möchte ich eine Programmiersprache für die Erstellung von Websites lernen und dieses Wissen auch festigen, nicht umher springen von Programmiersprache zu Programmiersprache), denn es ist ja klar, dass ich erst klein beginnen würde (keine komplexen Layouts, Animationen, ...).

Danke!

Homepage, App, HTML, Webseite, CSS, JavaScript, HTML5, lua, Programmiersprache, Webdesign, Webentwicklung

Meistgelesene Beiträge zum Thema HTML5