CSS – die neusten Beiträge

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

Elemente in css linksbündig?

Hey, also ich habe ein project in der dynamisch html Seiten generiert werden. Eine Seite sieht folgendermaßen aus:


<body tabindex="0" class=" jspsych-display-element" style="margin: 0px; height: 100%; width: 100%;">
    <div id="jspsych-progressbar-container"><span>Completion Progress</span>
        <div id="jspsych-progressbar-outer">
            <div id="jspsych-progressbar-inner" style="width: 12.5%;"></div>
        </div>
    </div>
    <div class="jspsych-content-wrapper">
        <div id="jspsych-content" class="jspsych-content">
            <style id="jspsych-survey-multi-choice-css">
                .jspsych-survey-multi-choice-question {
                    margin-top: 3em;
                    margin-bottom: 2em;
                    text-align: left;
                    height: 75vh
                }

                .jspsych-survey-multi-choice-text span.required {
                    color: darkred;
                }

                .jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {
                    text-align: center;
                }

                .jspsych-survey-multi-choice-option {
                    line-height: 2;
                }

                .jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option {
                    display: inline-block;
                    margin-left: 1em;
                    margin-right: 1em;
                    vertical-align: top;
                }

                label.jspsych-survey-multi-choice-text input[type='radio'] {
                    margin-right: 1em;
                }

                html {
                    scroll-behavior: smooth;
                }

                #jspsych-progressbar-container {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    z-index: 1000;
                }

                .bottom-spacer {
                    height: 10vh
                }
            </style>
            <form id="jspsych-survey-multi-choice-form">
                <div id="jspsych-survey-multi-choice_container_0" class="question-container"></div>
                <div id="jspsych-survey-multi-choice-0" class="jspsych-survey-multi-choice-question">
                    <p class="jspsych-survey-multi-choice-text survey-multi-choice"><b>Gender: Please select your
                            gender<b></b></b><span class="required">*</span></p>
                    <div id="jspsych-survey-multi-choice-option-0-0" class="jspsych-survey-multi-choice-option"><input
                            type="radio" name="jspsych-survey-multi-choice-response-0"
                            id="jspsych-survey-multi-choice-response-0-0" value=" Male" required=""><label
                            class="jspsych-survey-multi-choice-text" for="jspsych-survey-multi-choice-response-0-0">
                            Male</label></div>
                    <div id="jspsych-survey-multi-choice-option-0-1" class="jspsych-survey-multi-choice-option"><input
                            type="radio" name="jspsych-survey-multi-choice-response-0"
                            id="jspsych-survey-multi-choice-response-0-1" value=" Female"><label
                            class="jspsych-survey-multi-choice-text" for="jspsych-survey-multi-choice-response-0-1">
                            Female</label></div>
                    <div id="jspsych-survey-multi-choice-option-0-2" class="jspsych-survey-multi-choice-option"><input
                            type="radio" name="jspsych-survey-multi-choice-response-0"
                            id="jspsych-survey-multi-choice-response-0-2" value=" Diverse"><label
                            class="jspsych-survey-multi-choice-text" for="jspsych-survey-multi-choice-response-0-2">
                            Diverse</label></div>
                </div><input type="submit" class="jspsych-survey-multi-choice jspsych-btn" value="Continue">
                <div class="bottom-spacer"></div>
            </form>
        </div>
    </div>
</body>

Jetzt versuche ich sobald ein solches form in der html Seite ist, alles linksbündig ist. Aber nur dann. Ich bekomme es leider nicht hin. Habe es mit javascipt und text-align gemacht, funktioniert aber nicht.

HTML, Webseite, CSS, JavaScript

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

Custom Cursor wird nicht angezeigt?

Die Programmierung von meiner Bildergalerie (Slider) hat mir ein paar Schwiergkeiten bereitet...schlussendlich habe ich chatgpt gefragt und der hat mir direkt einen Code ausgespuckt- der funktioniert auch soweit so gut allerdings werden die Mouse-Cursor immer noch nicht richtig angezeigt. Eigentlich sollten diese eigene Bilder anzeigen, je nachdem über welche seite des Bildes man sich bewegt. Weiß jemand wie/ob man so etwas programmieren kann bzw. wo mein Fehler liegen könnte?

- Die Bilder liegen aufjeden Fall im selben Ordner wie index2.html

Hier der vollständige Code:

<!DOCTYPE html>

<html lang="de">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Bild-Slider mit benutzerdefiniertem Cursor</title>

 <style>

  body {

   font-family: Arial, sans-serif;

   display: flex;

   justify-content: center;

   align-items: center;

   height: 100vh;

   margin: 0;

   background-color: #f0f0f0;

  }

  .slider-container {

   position: relative;

   width: 500px;

   height: 300px;

   overflow: hidden;

   border: 2px solid #ccc;

   border-radius: 10px;

  }

  .slider-images {

   display: flex;

   transition: transform 0.5s ease-in-out;

  }

  .slider-images img {

   width: 100%;

   height: 100%;

   object-fit: cover;

  }

  /* Unsichtbare, transparente Boxen für Cursorsteuerung */

  .slider-nav {

   position: absolute;

   top: 0;

   width: 20%; /* Nur ein schmaler Bereich am linken und rechten Rand */

   height: 100%;

   background-color: transparent;

   z-index: 2;

  }

  /* Linke Box: Cursor ändert sich beim Hover */

  .slider-nav.left {

   left: 0;

   cursor: url('pfeillinks.png') 22 22, auto; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */

  }

  /* Rechte Box: Cursor ändert sich beim Hover */

  .slider-nav.right {

   right: 0;

   cursor: url('pfeilrechts.png') 22 22, auto; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */

  }

  /* Hover-Effekt: Cursor als Pointer, wenn er über den Boxen schwebt */

  .slider-nav.left:hover {

   cursor: url('pfeillinks.png') 22 22, pointer; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */

  }

  .slider-nav.right:hover {

   cursor: url('pfeilrechts.png') 22 22, pointer; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */

  }

 </style>

</head>

<body>

<div class="slider-container">

 <div class="slider-images">

  <img src="https://via.placeholder.com/500x300/FF5733" alt="Bild 1">

  <img src="https://via.placeholder.com/500x300/33C4FF" alt="Bild 2">

  <img src="https://via.placeholder.com/500x300/75FF33" alt="Bild 3">

 </div>

 <!-- Unsichtbare Boxen für die Linke und Rechte Navigation -->

 <div class="slider-nav left" onclick="changeSlide('prev')"></div>

 <div class="slider-nav right" onclick="changeSlide('next')"></div>

</div>

<script>

 let currentIndex = 0;

 const images = document.querySelectorAll('.slider-images img');

 const totalImages = images.length;

 function changeSlide(direction) {

  if (direction === 'next') {

   currentIndex = (currentIndex + 1) % totalImages;

  } else if (direction === 'prev') {

   currentIndex = (currentIndex - 1 + totalImages) % totalImages;

  }

  const sliderImages = document.querySelector('.slider-images');

  sliderImages.style.transform = `translateX(-${currentIndex * 100}%)`;

 }

</script>

</body>

</html>

Ich bin jedem der sich mit dem Problem beschäftigt dankbar! (:

Computer, HTML, Webseite, programmieren, CSS, Code, Programmiersprache, Webdesign, Webentwicklung, Cursor, Galerie, slider

Programmiermentor, Aspergerautismus?

Guten Tag,

Ich bin 24 Jahre alt und habe einen Asperger-Autismus, wegen welchem es mir sehr schwer fällt, einen normalen Job zu behalten, da mich die meisten als Arrogant, Komisch, o.Ä. empfinden.

Daher will ich mir ein Fundament aufbauen im Bereich Programmieren, damit ich so eventuell dann irgendwann, in einem für mich erträglichen Arbeitsumfeld, arbeiten kann.

Von der Intelligenz her reicht es vollkommen, jedoch habe ich ein kleines Defizit; Wenn ich ein ganzes Thema neu anfange, habe ich viele Fragen, welche ich meist, von einem Mentor, beantwortet bekommen muss, sonst überstrapaziert es mich und ich krieg keinen klaren Kopf mehr. Sobald ich ein solides Fundament aufgebaut habe, kann ich selbstständig darauf aufbauen. Jedoch besitze ich noch kein derartiges Fundament. Lediglich HTML kann ich sagen, dass mein Fundament relativ gut ist. CSS jedoch merke ich, dass mir dieser Mentor fehlt.

Ich würde einen engagieren und bezahlen, jedoch fehlen mir die finanziellen Mitteln, weswegen das keine Option ist…

Lange Rede, kurzer Sinn: Kennt Ihr jemanden, der eventuell bereit wäre, ein solcher Mentor zu sein?

Ich könnte mich anderweitig revanchieren, indem ich Aufträge für ihn erfülle, sobald ich dazu fähig bin.

Ich wäre froh über eine Antwort und bitte nur Antworten, wenn Ihr eine Lösung habt. Ich will kein Mitleid oder sonstiges, sondern einfach eine Lösung finden.

vielen lieben Dank und ich freue mich auf eine Rückmeldung!

Lernen, HTML, IT, programmieren, CSS, JavaScript, Asperger-Syndrom, Autismus, mentor, Umschulung, Asperger-Autimus

Warum wirft htmlspecialchars einen Syntaxfehler in meinem PHP-Webshop-Code?

<?php
include 'db.php';

$query = "SELECT * FROM products";
$result = $conn->query($query);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Webshop</title>
    <style>
        /* Basic styling for the body */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Styling for the main heading */
        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        /* Container for all products */
        .products-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        /* Individual product card */
        .product-card {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 200px;
            text-align: center;
            padding: 15px;
            transition: transform 0.2s;
        }

        .product-card:hover {
            transform: scale(1.05);
        }

        /* Styling for the product image */
        .product-card img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            transition: opacity 0.2s;
        }

        .product-card img:hover {
            opacity: 0.8;
        }

        /* Styling for product name */
        .product-card h2 {
            font-size: 1.2em;
            color: #333;
            margin: 10px 0;
        }

        /* Styling for product description and price */
        .product-card p {
            color: #666;
            font-size: 0.9em;
            margin: 5px 0;
        }

        .product-card .price {
            font-weight: bold;
            color: #2a9d8f;
        }

        /* Link styling */
        a {
            text-decoration: none;
            color: inherit;
        }
    </style>
</head>
<body>
    <h1>Products</h1>
    <div class="products-container">
        <?php while ($product = $result->fetch_assoc()): ?>
            <div class="product-card">
                <a href="product.php?id_product=<?= htmlspecialchars( $product['id_product']) ?>">
                    <h2><?= htmlspecialchars( $product['produktname']) ?></h2>
                    <!-- Make the image clickable to open the product details page -->
                    <img src="<?= htmlspecialchars($product['image_url']) ?>" alt="<?= htmlspecialchars($product['produktname']) ?>">
              
                <p><?= htmlspecialchars($product['produktbeschreibung']) ?></p>
                <p class="price">Price: €<?= htmlspecialchars($product['preis_pro_prod']) ?></p>
                  </a>
            </div>
        <?php endwhile; ?>
    </div>
</body>
</html>
HTML, CSS

Fokus-Keyphrase Yoast SEO - Beispiel?

Bin noch relativ neu mit SEO obwohl ich schon lange Webentwicklung mache und WordPress nutze und da ist das bekannteste wahrscheinlich Yoast SEO (oder Rank math). Ich hatte Yoast installiert und überall mit ChatGPT lesbare Titel erstellen lassen zb. Startseite – Fitnessstudio Firma XY | Fitness in Dortmund, Essen & Hamburg
Bei Fokus-Keywords habe ich [Firma XY Fitness Dortmund Essen Hamburg Kraftsport Kardio Zirkeltraining Bodybuilding Gruppentraining Personal Training Sauna [bekannter Inhaber]] ohne Komma.
(Als einfaches Beispiel, es geht nicht um Fitness).
Ich denke mal dass ich das Fokus Keyword falsch verstanden habe und das man auch nur 1 einziges Fokus Keyword haben darf wie [Personal Training]?
Und man stark auf einen Vorteil gegenüber der Konkurenz gehen soll mit dem Keyword wie das Personal Training im Vordergrund steht und nichts anderes oder nichts anderes als Erholungssport (Zumindest im Free Plan glaube ich).
Die Sache ist aber das dieses Unternehmen beispielsweise einfach "nur" besser ist (ist nicht mein unternehmen deswegen sag ich die wahrheit) als die anderen.

Es ist klar das Fitness Studios alle dasselbe anbieten, ähnliche Preise haben und alle wahrscheinlich gut sind. Nur wenn dieses Unternehmen allgemein besser ist und nicht das Rad neu erfindet oder mit irgendeinem Quatsch wirbt was macht man da ? Einfach "Premium" oder "Hochwertig" nutzen ? Das machen schon die Konkurenz obwohl es garnicht so ist anhand der Website Qualität.
Gibt es Gruppen wo man andere Leute mal drüber gucken lassen kann und nach der Meinung Fragen kann ?
Englisch Sprachige Foren kenne ich bringt mir aber nicht viel wenn sie die Sprache nicht können und ich möchte nicht Outsourcen sondern SEO besser verstehen und erlernen als Webentwickler. Die Technische Seite kenne ich schon wie Performance und Ladezeiten, Nutzerfreundlichkeit darauf habe ich geachetet. Nur ist Yoast SEO und Wordpress etwas anders als wenn man mit React/Next.js arbeitet

Computer, Marketing, Homepage, Internet, Browser, Web, HTML, IT, Webseite, CSS, WordPress, JavaScript, Suchmaschine, CMS, Drupal, Informatik, PHP, Programmiersprache, SEO, Typo3, Webdesign, Webentwicklung, React, SEO-Tool, Laravel

Meistgelesene Beiträge zum Thema CSS