HTML – 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

PHP Fehler?

Moinsen Leude,

Ich bin gerade etwas am verzweifeln. Ich arbeite noch nicht so lange mit php und stoße die ganze zeit immer wieder auf den gleichen fehler:

Warning: Undefined array key "password" in C:\xampp\htdocs\website\metropolisx\index.php on line 21

Hier die PHP-Datei um die es geht:

<?php
session_start();
require_once "includes/config.php"; // Datenbankverbindung

$error = "";

// Nur fortfahren, wenn das Formular per POST abgesendet wurde
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Überprüfen, ob die Felder 'username' und 'password' in $_POST gesetzt sind
    $username = isset($_POST['username']) ? $_POST['username'] : '';
    $password = isset($_POST['password']) ? $_POST['password'] : '';

    // Überprüfen, ob beide Felder nicht leer sind
    if (!empty($username) && !empty($password)) {
        // Datenbankabfrage, um den Benutzer zu finden
        $stmt = $pdo->prepare("SELECT * FROM accounts WHERE USERNAME = ?");
        $stmt->execute([$username]);
        $user = $stmt->fetch();

        // Wenn der Benutzer existiert und das Passwort korrekt ist
        if ($user && password_verify($password, $user['password'])) {
            $_SESSION['user'] = $user['username'];
            // Weiterleitung zum Dashboard
            header("Location: pages/dashboard.php");
            exit();
        } else {
            $error = "Falsche Anmeldedaten!";
        }
    } else {
        // Fehlermeldung, wenn eines der Felder leer ist
        $error = "Bitte Benutzername und Passwort eingeben!";
    }
}
?>

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | MetropolisX</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="login-container">
    <h2>MetropolisX - Login</h2>

    <?php if ($error): ?>
        <p class="error"><?php echo htmlspecialchars($error); ?></p>
    <?php endif; ?>

    <form method="post">
        <input type="text" name="username" placeholder="Benutzername" required>
        <input type="password" name="password" placeholder="Passwort" required>
        <button type="submit">Anmelden</button>
    </form>
</div>

</body>
</html>

Wenn einer von euch weiß warum ich diesen fehler die ganze zeit kriege, gebt gerne bescheid. Danke schonmal im vorraus :D

SQL, HTML, Webseite, Code, Datenbank, MySQL, PHP, Programmiersprache, Webdesign, Webentwicklung

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

Domain mit Sepa oder Psc mieten?

Moin Leute,

Ich bin 17 Jahre alt und habe gestern mit dem Programmieren angefangen. Ich habe mir ein Portfolio gecoded (HTML und CSS) um einfach mal irgendwo anzufangen. Da ich letzte Woche die Schule beendet habe und mich aktuell für Ausbildungsplätze als Systemintegrator bewerbe, möchte ich diese Website gerne öffentlich machen. (Bisher ist sie sozusagen nur die HTML datei auf meinem PC.)

Das problem hierbei ist, dass ich meinen Laptop natürlich nicht 24/7 laufen lassen kann um diese selber zu hosten. Ich habe vor mir einen V-Server über Zap-Hosting zu mieten, da ich mich demnächst auch z.B. an API's heran tasten möchte. (Zap-hosting hab ich früher schon benutzt um mir meine Minecraft Server zu mieten. Fand die eigentlich immer günstig und zuverlässig.)

Bei Zap-Hosting kann ich sogut wie alles mit z.B. Paysafe, zap-coins (guthaben) oder sofortüberweisung bezahlen. Jedoch keine Domains.

Ich habe ein Bankkonto, was beudeutet, dass Sepa-Mandate oder Sofort Überweisungen möglich wären.

Jetzt habe ich bei anderen Webseiten wie z.B. Ionos geschaut, um mir eine Domain zu mieten, aber alle wollen entweder PayPal oder Kreditkarte (Geht beides nicht, da ich erst in 2 Monaten 18 werde)

Meine Frage an euch währe jetzt, kennt ihr seriöse webseiten, bei denen man Domains mit Sepa, Sofort-Überweisung oder Paysafe-Karten mieten kann?

Danke schonmal im vorraus für eure hilfreichen Antworten,

Ben :)

PS: Meine Eltern nach ihrer Kreditkarte/PayPal zu fragen ist keine Option (Persönliche Gründe)

HTML, Webseite, Domain, Webentwicklung, Webhosting

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

Jimdo Element Widget/HTML einfügen funktioniert nicht?

Hallo zusammen, vielleicht hat jemand mittlerweile eine Lösung für folgendes Problem. Ich habe bereits einen ähnlichen Post gefunden, der einige Jahre alt, aber leider zu keiner Lösung gekommen ist.

Ich möchte gerne ein Widget bei Jimdo einbauen und habe nicht die Möglichkeit den Button "Inhalt einfügen" anzuklicken. Es gibt lediglich "Block einfügen". Darüber wird ausgegraut "Inhalt einfügen angezeigt.

Ich habe hier das kostenpflichtige Komplettpaket mit Domain und die Auswahl Baukastenprinzip. Liegt es daran? 

Ich bezweifle es, ja es ist ein Baukastenprinzip, unter denen nicht alles individualisierbar ist, aber aus genau diesem Grund gibt es ja nun einmal Widgets, habe also noch Hoffnung. 

Ausprobiert habe ich: 

- nach Jimdo Anleitung "Wie füge ich ein Widget ein?" https://help.jimdo.com/hc/de/articles/115005947286-Wie-f%C3%BCge-ich-Widgets-ein

- einen anderen Browser verwendet

- einen anderen PC verwendet 

- einen anderen Mitmenschen gefragt, der ebenfalls Webseiten baut, falls ich sekundenschafe :)

1. Hat jemand eine Lösung dafür?

(Abgesehen davon einen anderen Anbieter wie Wix, Wordpress, o. ä. zu nutzen) 

2. Hat Jimdo keine Möglichkeit Quelltext zu bearbeiten oder ein Widget einzufügen und der Button ist ein Überbleibsel einer alten Version?

Ich frage mich, wenn es den Button "Inhalt einfügen" gibt und er lediglich inaktiv ist, muss ich ihn ja irgendwie aktivieren können, sonst würde es rein logisch keinen Sinn machen, dass er mir für die Website-Bearbeitung angezeigt wird. 

Freue mich auf eure Tipps

Bild zum Beitrag
Homepage, HTML, Webseite, Button, Content, Jimdo, Webdesign, Baukastensystem

Bestes WordPress Hosting für 5.95€?

Ich habe damals eine WordPress Website für einen Kunden erstellt bei All-Inkl und habe das Privat Paket (4.99€) mit Zusatzoption SSL-Erweiterung (0,95€) Zusatzoption SSL-Erweiterung.
Es hat 3 Domains Inklusive aber wir brauchen das garnicht mehr da die alten Domains nichtmehr indexiert sind, die haupt domain reicht maximal 2 Domains.

Der Punkt ist aber das die Seite mit WordPress gemacht wurde und Elementor, trotz Optimierungen kommt es nicht auf so tolle Ergebnisse.


Und der zweite Punkt ist er möchte nichts wirklich ändern an dem Design und möchte seine Videos drinne lassen.

Sind hochwertig produziert und schöne Videos gehen 1-2 Minuten und sollen für ihn der Hauptfokus sein.

  • Ob ein CDN etwas bringen würde denke ich nicht da die Kunden ausschließlich lokal sind. CDN ist doch eher etwas für Weltweit.
  • Bilder sind alle auf Webp Konvertiert mit 92% Beibehaltung der Qualität, da habe ich bereits massiv eingespart ohne sichtbaren Qualitätsverlust
  • Video ist etwas schwierig zu Komprimieren / Qualität zu verringern, es wäre mir lieber wenn es ein Widget gebe für Elementor das die eigenschaft wie Youtube hätte aber ohne YouTube das man das Video selber auf "auto" laden würde erstmal und zeit gewinnt. Ob webm einen großen unterschied macht bin ich mir nicht sicher
  • Caching Plugin habe ich "WP Optimize" und auch HTML,CSS,JS minimieren aktiviert, bisher keine Konflikte oder Fehler.
  • Das Cookie Plugin verlangsamt auch stark die Ladezeiten ist mir aufgefallen, kennt ihr ein sehr leichtgewichtiges und cleanes Cookie Opt Plugin womit man auch Google Maps Consent einholen kann?

Ich kann also nur die technische Seite Optimieren und denke mit einem besseren Hosting das nicht Allgemein ist wie All Inkl ich einen höheren Score erreichen kann beim Speed Test.

Homepage, HTML, Webseite, WordPress, JavaScript, CMS, PHP, SEO, Strato, Webdesign, Webentwicklung, Webhosting, Webserver, all-inkl, divi, Hetzner, Elementor, hostinger, Elementor Pro, ionos

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

Meistgelesene Beiträge zum Thema HTML