Webseite – die neusten Beiträge

Verwandte Themen
haveyou
15.01.2025, 12:28

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
1 Antwort
0815Ideen
13.01.2025, 01:24
Mit Bildern
Mit Links

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
2 Antworten
paypalapi
10.01.2025, 16:58

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
4 Antworten
haveyou
09.01.2025, 20:44

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
1 Antwort

Meistgelesene Beiträge zum Thema Webseite
Mehr meistgelesene Fragen zu Webseite