Js observer Fehler?

Hallo liebe Community,

ich habe die programmierter Seite eines YouTubes (https://github.com/kevin-powell/navbar-change-on-scroll/tree/master/nav-change-finished)

eingesetzt und ausprobiert. Ziel war es dass sich die navigationsbar oben farblich ändert beim scrollen. Ich bekomme aber immer bei der letzen Zeile im JS Code einen Fehler. Bekommt ihr den auch und wie kann ich diesen beheben?

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, JavaScript

05.09.2021, 15:36

Bekommt ihr den auch (...)?

Nein.

Ich habe mir für einen Test lediglich das Paket (hier > Code > Download ZIP) heruntergeladen, entpackt und in einen Unterordner eines lokalen Webservers geworfen. Aber auch ohne Webserver (über file:///...) funktioniert der Effekt, wie erwartet.

Fehlermeldungen konnte ich in der Browserkonsole (nach mehrmaligem Hoch-/Herunterscrollen) nicht wahrnehmen. Das gilt für unterschiedliche Webbrowser (Chrome, Firefox, Opera, Brave, ...).

und wie kann ich diesen beheben?

Man kann nur mutmaßen, dass du den Quellcode geändert hast. Der schnellste und einfachste Lösungsweg wäre es, die Änderungen rückgängig zu machen (am besten, indem du alles einfach mit den Originaldateien überschreibst).

Ansonsten als erste Abarbeitungsliste:

Es muss ein HTML-Element im Dokument geben, welches ein class-Attribut besitzt, in dessen Wert home-intro enthalten ist. Im Originalcode ist das das erste section-Element.

<section class="home-intro">

Das Skript darf erst ausgeführt werden, sobald das HTML-Dokument geladen wurde. Daher hat der Entwickler die script-Einbindung auch erst vor dem schließenden body-Tag vorgenommen.

TheKing4

Beitragsersteller

09.09.2021, 12:04

Ohh das mit Script am Ende war das Problem. Tausend dank dir

Ähnliche Beiträge

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zum Beitrag

JS Navbar klappt nicht, Hilfe?

Hallo,

Ich wollte mal nach Hilfe fragen, da mein Mobile Menu für die Navigation nicht klappt.

Ich kann das Menu öffnen wenn ich beim Event Listener den . durch ein , ersetze aber kann dann nichts anklicken da es sich direkt Schließt

const selectElement = (element) => document.querySelector(element);


selectElement('.nav-menu-icons').addEventListener('click', () => {
    selectElement('nav').classList.toggle('active');
});

...zum Beitrag

Bei "Klick" - Copy to Clipboard - HTML, Js?

Moin!

Ich suche nach einer Lösung für meine Webseite.

Gerne würde ich verschiedene Wörter oder Textausschnitte anbieten, die bei "Click" automatisch in die Zwischenablage des Nutzers wandern.

Gibt es dafür eine einfache Lösung, mit einem HTML-Schnippsel oder einem WP-PlugIn?

Vielen Dank im voraus!

Schönen Sonntag! :)

...zum Beitrag

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zum Beitrag

Welche Programmiersprachen sollte man für Websites kennen?

Ich weiß, dass HTML eine Auszeichnungssprache ist, deswegen ja auch "Markup Language"😇

...zum Beitrag

Suche kostenlose Alternative für fullPage.js?

Guten Abend!

Ich habe vor ein Webinterface für einen Monitor zu programmieren, der gewisse Daten aus einer Datenbank abfragt und übersichtlich anzeigt.. An sich ist das auch kein Problem, ich würde jedoch gerne so ein "Fullscreen Slideshow Design" bauen. Hierzu wäre das fullPage.js Framework (bzw. Libary) perfekt geeignet. Für dieses benötigt man aber eine Lizens, die nur für zugelassene Open-Source Projekte kostenlos ist und ansonsten Geld kostet. Jetzt frage ich mich, ob es da nicht ein alternatives Framework bzw. eine alternative Libary gibt.

Needed help, PLEASE.

Danke schonmal im Vorraus.

...zum Beitrag

Welchen Hoster könnt Ihr empfehlen?

Ich suche einen Web Hoster für ein kleines Web Projekt was natürlich möglichst günstig sein soll und dennoch stabil laufen muss. Es müssen zu diesem Projekt auf jeden Fall mehrere Domains beziehungsweise Webseiten gehostet werden. Was könnt ihr da empfehlen?

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

Css Element mit position:fixed überdeckt Elemente?

Ich habe in CSS eine Navigationsbar mit der Eigenschaft position:fixed, da ich möchte, dass sie mitkommt beim Scrollen. Jedoch überlagert sie am Anfang ebenso etwas, was ich eben nicht will.

Demnach ist meine Frage, wie ich das ganze so mache, dass die Navigationsleiste zu Beginn nicht schon ein Element überdeckt.

Navigation:

.nav{
  position: fixed;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  background-color: #4A9188;
  color: #ffffff;
}

...zum Beitrag

Programmierung eines kleinen Spiels mit html, css und jquery?

Hallo!

Ich studiere seit einem Semester Mediendesign und lerne dabei auch etwas über das Programmieren (bisher html, css und jquery), welches aber nicht meine Stärke ist.

Nun sollen wir als Klausurersatzleistung ein kleines Spiel programmieren und ich bin in etwas überfordert.

Eine Idee habe ich aber die Umsetzung fällt mir schwer.

Erstmal weiß ich nicht wie ich die Seiten, die aufeinander folgen sollen, wenn man z.B. einen "Weiter"-Button klickt, verknüpft.

Ich glaube sowas kann ich mit iFrames machen aber wie gesagt, ich bin wirklich noch Anfänger auf dem Gebiet.

Hier ein Beispiel, wie ich das meine: http://studienarbeiten.bib.de/lernsoftware/schatz_von_gizeh/spielstart.html

Also, wie kann ich meine aufeinanderfolgenden Spieleseiten verbinden?

...zum Beitrag

TypeError: Cannot read properties of undefined (reading 'checkHealth')?

Hallo, ich habe einen error der mir sagt das checkHealth undefined ist wenn ich über npm devDeploy ausführe. Dort soll eigentlich meine Datei deployCommands.ts ausgeführt werden er geht aber erst in meine main.ts rein und dort tritt der fehler auf. Wenn ich aber nur dev ausführe was die main aufrufen soll und den Bot startet kommt kein fehler.

DeployCommands.ts: https://pastebin.com/5YAUhLfb

main.ts: https://pastebin.com/nWjvk3UD

package.json: https://pastebin.com/qV7ThnVW

Git Repo: https://github.com/luka-lta/byteBuddy_bot

/home/luka-lta/projects/PhpStorm/byteBuddy_bot/main.ts:6
ApiUtil.checkHealth().then((healthy) => {
        ^
TypeError: Cannot read properties of undefined (reading 'checkHealth')
    at Object.<anonymous> (/home/luka-lta/projects/PhpStorm/byteBuddy_bot/main.ts:6:9)
    at Module._compile (node:internal/modules/cjs/loader:1378:14)
    at Module.m._compile (/home/luka-lta/.nvm/versions/node/v21.6.2/lib/node_modules/ts-node/src/index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
    at Object.require.extensions.<computed> [as .ts] (/home/luka-lta/.nvm/versions/node/v21.6.2/lib/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1212:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1028:12)
    at Module.require (node:internal/modules/cjs/loader:1237:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/home/luka-lta/projects/PhpStorm/byteBuddy_bot/src/value/ByteBuddyChannel.ts:2:1)

...zum Beitrag

Node js Mailer?

Hab das ausprobiert emails zu versend mit Text aber wie kann ich dazu noch eine jpg/png datei hinzufügen die im selben ordner ist.

Zum beispiel unter dem

text: 'That was easy!',

Image: path: "bild.jpg"


var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'youremail@gmail.com',
    pass: 'yourpassword'
  }
});

var mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yahoo.com',
  subject: 'Sending Email using Node.js',
  text: 'That was easy!'
};

transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});

Der code ist ein beispiel von https://www.w3schools.com/nodejs/nodejs_email.asp

...zum Beitrag

Random Seiten anzeigen lassen (HTML/JavaScript)?

Hallo, ich will ein Quiz programmieren, damit es aber nicht langweilig wird, sollen immer neue Seiten kommen mit Fragen. (Die einzelnen Fragen mit den Seiten habe ich gemacht). Aber kann man das irgendwie Programmieren das wenn man auf ein Button gedrückt hat das dann eine zufällige HTML Seite kommt. (z.B. ich habe die Dateien 1.html 2.html 3.html) Kann ich es programmieren wenn man auf ein Button drückt dass dann entweder 1 2 oder 3 kommt? Ich habe es schwierig formoliert ich hoffe, ihr versteht es trotzdem.

Danke im Vorraus!

...zum Beitrag

Welche Methode ist die Beste?

Meine Website besteht aus mehreren Unterseiten welche sich vom Layout nicht unterscheiden. Wenn ich zum Beispiel einen neuen Punkt in der Navigation einbinden will, muss ich das auf jeder Seite einzelnd machen. Mein Plan ist es nun quasi eine foundation.html zu haben, mit folgendem Code

<html>
  <head>
    <title></title>
    usw.
  </head>
  <body>
    <nav>Home etc</nav>
    <main id="point_of_deployment">

    <main/>
    <footer>Footer Zeugs<footer/>
  </body>
</html>

Und weitere Unterdatein die dann den Intalt der Seite Tragen:

index.html, kontakt.html etc.

<p>Text</p>
<img />
usw.

Sodass z.B. index.html die foundation.html um sich herum importiert.

Ich hätte gedacht man macht das z.B. mit PHP. Das habe ich soweit auch schon zum laufen gebracht, finde aber den Weg nicht sehr elegant.

Was haltet ihr für die beste, eleganteste und einfachste Möglichkeit?

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen