Javascript-forum
Portal

Durchsuche Foren

(Erweiterte Suche)

Foren-Statistiken
» Mitglieder: 43.431
» Neuestes Mitglied: 12betno1
» Foren-Themen: 506
» Foren-Beiträge: 2.095

Komplettstatistiken

Benutzer Online
Momentan sind 163 Benutzer online
» 0 Mitglieder
» 162 Gäste
Bing

Aktive Themen
What are the psychologica...
Forum: Css
Letzter Beitrag: azaviona
Vor 3 Stunden
» Antworten: 0
» Ansichten: 5
div(tabelle) neugeladen b...
Forum: Javascript
Letzter Beitrag: Sempervivum
Gestern, 14:58
» Antworten: 1
» Ansichten: 18
Ajax Abfrage
Forum: Php
Letzter Beitrag: taxlegit24
Gestern, 06:43
» Antworten: 3
» Ansichten: 361
Probleme Firebase Databas...
Forum: Javascript
Letzter Beitrag: PrimoCenturio
22.04.2024, 14:15
» Antworten: 4
» Ansichten: 120
Verbindung von Entscheidu...
Forum: Javascript
Letzter Beitrag: Ashriel
16.04.2024, 11:02
» Antworten: 3
» Ansichten: 111
Neu laden ohne Scrolling
Forum: Javascript
Letzter Beitrag: Tom
16.04.2024, 08:48
» Antworten: 0
» Ansichten: 35
Formularfelder addieren u...
Forum: Javascript
Letzter Beitrag: heena123
16.04.2024, 08:03
» Antworten: 17
» Ansichten: 373
FMOVIES
Forum: Javascript
Letzter Beitrag: xomanig690
16.04.2024, 07:07
» Antworten: 0
» Ansichten: 40
Spam gelöscht
Forum: Ankündigungen,Neuigkeiten
Letzter Beitrag: rzscout
10.04.2024, 23:37
» Antworten: 0
» Ansichten: 179
Reihenfolge der Karten
Forum: Brauche Javascript / Userscript
Letzter Beitrag: hardee
10.04.2024, 17:54
» Antworten: 4
» Ansichten: 121

Lightbulb Fetch Problem mit Sidebar Toggle (DOM, template)
Geschrieben von: tiger5nrg - 03.03.2024, 22:29 - Forum: Javascript - Antworten (7)

Hallo zusammen,

ich arbeite derzeit an einer Hobby-Website und versuche, eine Sidebar mit einem Toggle-Button zu implementieren. Leider habe ich Schwierigkeiten mit der Funktionalität des Toggles und hoffe, dass mir hier jemand weiterhelfen kann.

Das Problem besteht darin, dass die Sidebar nicht wie erwartet sichtbar wird, wenn der Toggle-Button geklickt wird. Die Sidebar sollte erscheinen, wenn der Button geklickt wird, und verschwinden, wenn er erneut geklickt, bzw. die Seite gescrollt wird. Zusätzlich sollte die Sidebar automatisch erscheinen, wenn die Bildschirmbreite größer als 590 Pixel ist, und verschwinden, wenn sie kleiner als 590 Pixel ist.

Eigentlich funktioniert alles - bis auf die Klick-Aktivierung auf den kleineren Viewports. Es ist zu Haare ausreißen - Ich habe schon alles mögliche ausprobiert.

1. Ich habe sicherzustellen versucht, dass das JavaScript erst ausgeführt wird, nachdem der Inhalt der Sidebar geladen wurde. Dafür habe ich die Funktion initializeSidebarToggle() in das then-Block der Fetch-Anfrage platziert, um sicherzustellen, dass sie erst ausgeführt wird, wenn der Sidebar-Inhalt geladen ist.

2. Ich habe auch überprüft, ob die Event-Listener ordnungsgemäß hinzugefügt werden, und ob die Bedingungen in den Funktionen handleResize() und handleScroll() korrekt sind, um die Sidebar je nach Bildschirmbreite ein- und auszublenden.

Leider konnte ich das Problem trotz dieser Versuche nicht lösen. Es scheint, als ob der Toggle-Button nicht richtig mit der Sidebar verknüpft ist oder dass es ein Problem mit der Sichtbarkeit der Sidebar gibt.

Die Konsole im Browser zeigt "active" richtig an bei einem Klick - nur ändert sich optisch an der Seite nichts, also die Sidebar wird nicht sichtbar. Auch logs werden richtig angezeigt, wenn Ich einen einfüge. Könnte es da ein Clash mit CSS:

Code:
.sidebar {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 2rem;
  background-color: var(--first-color);
  width: 3.5rem;
  border-right: .1px solid var(--first-color-alt);
  z-index: 1;
  padding-top: 2rem;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.sidebar.active {
  transform: translateX(0) !important;
}

.sidebar-toggle {
  position: fixed;
  top: 1rem;
  left: 3.5rem;
  background-color: var(--first-color);
  border-radius: 0 0 .5rem 0;
  width: 1.5rem;
  height: 3rem;
  cursor: pointer;
  cursor: pointer;
  transition: transform 0.3s ease;
}

oder den breakpoints geben?
Code:
@media screen and (min-width: 590px){
  .sidebar {
    transform: translateX(0);
  }
  .sidebar-toggle {
    display: none;
  }
  .contact__container{
    grid-template-columns: 360px;
    justify-content: center;
  }
  .footer__copy-group {
    width: 60%;
  }
  .footer__container {
    margin-left: 4rem;
  }
  .policy__section {
    padding: 2rem 4rem 2rem 4rem;
  }
}

Die sidebar wird jeweils auf den html Seiten als template geladen:
<div id="sidebar"></div>

Die Reihenfolge der geladenen JS Dateien:
<!--================ MAIN JS ================-->
    <script src="assets/js/main.js"></script>
    <script src="assets/js/template.js"></script>
    <script src="assets/js/sidebar.js"></script>

Hier ist der relevante JavaScript-Code (sidebar.js), den ich derzeit verwende:
Code:
function initializeSidebarToggle() {
    const sidebar = document.getElementById('sidebar');
    const sidebarToggle = document.getElementById('sidebar-toggle');

    function toggleSidebar() {
        const sidebarContainer = document.getElementById('sidebar');
        sidebarContainer.classList.toggle('active');
    }
   
    function handleResize() {
        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
        if (viewportWidth >= 590) {
            sidebar.classList.add('active');
            sidebarToggle.style.display = 'none'; // Hide sidebar toggle button on larger screens
        } else {
            sidebar.classList.remove('active');
            sidebarToggle.style.display = 'block'; // Show sidebar toggle button on smaller screens
        }
    }

    function handleScroll() {
        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
        if (viewportWidth < 590) {
            sidebar.classList.remove('active');
        }
    }

    // Attach event listeners
    sidebarToggle.addEventListener('click', toggleSidebar);
    window.addEventListener('resize', handleResize);
    window.addEventListener('scroll', handleScroll);

    // Set the initial state of the sidebar
    handleResize();
}

// Load sidebar template and initialize sidebar toggle functionality after the content is loaded
window.addEventListener('DOMContentLoaded', () => {
    const sidebarContainer = document.getElementById('sidebar');
    fetch('sidebar.html')
        .then(response => response.text())
        .then(data => {
            sidebarContainer.innerHTML = data;
            initializeSidebarToggle();
        })
        .catch(error => console.error('Error loading sidebar template:', error));
});

Ich würde mich sehr über Unterstützung bei der Lösung dieses Problems freuen. Vielen Dank im Voraus für eure Hilfe!

Drucke diesen Beitrag

  function mit ID-Serie
Geschrieben von: Nullcheck - 24.02.2024, 11:40 - Forum: Javascript - Antworten (3)

Hallo zusammen,
ist es möglich eine einmal aufgeführte Funktion mit unterschiedlichen onclick Links zu nutzen?

Um Inhalte nachzuladen, habe ich jede Überschrift mit einem Link und folgendem onclick: ($2 - kommt von PHP)

Code:
onclick="lade_'.$2.'"()


Bei 5 Überschriften habe ich dann 5 mal:
Code:
<script>
$.get('../URL', function(data){";
    $('#lade".$2."').html(data);";
})";
</script>


<div id="lade'.$2.'">  Zeigt nachgeladenen Inhalt für Überschrift X</div>

Es funktioniert so prima, doch bei viel Inhalt zB. 100 Überschriften habe ich 100 mal den unteren Teil zum nachladen.
Ist es möglich den unteren Teil nur einmal auszugeben und mit einer ID oder so anzusprechen?

Drucke diesen Beitrag

Exclamation Problem bei Online-Kurs (simple return funktion)
Geschrieben von: Mandrax - 23.02.2024, 09:22 - Forum: Javascript - Antworten (1)

Hallo,

ich mache gerade bei edx.org einen online-Kurs Make your own app. Die ersten Inhalte (HTML & CSS) waren für mich mehr oder weniger Wiederholung. Bei Javascript wird jetzt aber viel weniger erklärt und stattdessen gesagt: Hier sind 50 Links, lies. Big Grin 

Beim ersten Test scheitere ich jetzt schon an einer einfachen return Funktion. Die Aufgabe steht links. Wenn sie gelöst ist, sollte automatisch ein grüner Haken kommen. Die Klammern habe ich auf Anraten von ChatGPT ergänzt. Auch ohne ists nicht richtig (obwohl ja links die Formel angegeben wird).

Was übersehe ich? Danke für eure Hilfe!
[Bild: ypRBbmV]



Angehängte Dateien Thumbnail(s)
   
Drucke diesen Beitrag

  Javascript passwortabfrage
Geschrieben von: Dirk07 - 15.02.2024, 14:23 - Forum: Javascript - Antworten (3)

Hallo zusammen ich habe da ein Problem und zwar möchte ich eine passwortabfrage mit Javascript realisieren den Scrip habe ich soweit und ja ich weiß das es nicht sicher ist und ausgelesen werden kann

<html>
<head>
<title>rab</title>
<div style="display:block" id="formular"><center> 
<script language="javascript"> 
function pasuser(form) {
if (form.pass.value=="test") {                
    document.getElementById ("hidden").style.display = "block"; 
    document.getElementById ("formular").style.display = "none"; 
} else {
alert("Invalid Password") 
}
}
</script>
 
<h1>Password:</h1>
<form name="login"> 
<input name="pass" select="on" type="password" align="center"><br> 
<input type="button" value="Login" onClick="pasuser(this.form)"> 
<input type="Reset"></center> 
</form>
</div>
 
Mein Problem ist jetzt aber das nichts geschieht wenn das Passwort richtig ist was muss ich machen damit ich nach richtigem Passwort zu Seite xyz.html weitergeleitet werde

Drucke diesen Beitrag

  Rayano
Geschrieben von: Rayano - 08.02.2024, 07:59 - Forum: Seid ihr neu ? - Antworten (1)

Auch wenn ich mich ungerne Vorstelle, mache ich das der Vollständigkeitshalber mal.

Ich bin David, mitte 30 und befinde mich derzeit im LTA oder Reha verfahren. Mein Ziel ist, eine Umschulung zum Fachinformatiker für Anwendungsentwicklung. Deswegen mache ich gerade seit November ein Berufliches Training.

Mein Ziel ist es aktuell nicht, den Perfekten Code zu schreiben, sondern Algorithmen zu lernen.

Deswegen habe ich auch bereits mit Verschiedenen Sprachen das Selbe Programm erstellt. Es war ein Umrechnner der in der Lage ist von Dezimal in Dualdezimal umzurechnen. Diese habe ich in Python, Java und Javascript geschrieben.

Mit dem Programmieren habe ich allerdings erst im November so richtig angefangen, davor war es eher schreiben mit viel KI hilfe.

Mein aktuelles Projekt soll ein Quiz ähnlich wie "Wer wird Millionär" werden. Ich möchte damit verschiedene Funktion und Algorithmen kennenlernen. Z.B. die verwendung von Cookies die ich für die Bestenliste nutzen werde. Oder ebend, die Verwendung einer Fremddatei/ -Sprache um die Fragen zu Organiesieren.

Drucke diesen Beitrag

  Allgemeine Frage zu SQL
Geschrieben von: Rayano - 07.02.2024, 15:06 - Forum: Datenbanken - Antworten (4)

Hallo zusammen ich bin neu hier.

ich mache gerade seit ein paar wochen meine Ersten Schritte mit Java, Javascript und Python.

mein aktuelles Projekt ist ein kleines Quiz das von der Grundfunktion bereits zu 80% fertig ist.

ich habe mir überlegt meine Frage für das Quiz in einer Datenbank zu Organiesieren.

meine Frage währe kann ich datenbanken offline nutzen, und kann ich mein Spiel teilen (an freunde) ohne das die sich zusätzliche Sachen installieren müssen, wenn ich SQL nutze?

Drucke diesen Beitrag

  Java script geht nicht
Geschrieben von: Mick62 - 04.02.2024, 17:32 - Forum: Javascript - Antworten (2)

Der Titel für Irre, denn es liegt wohl an mir, weil ich was scripting  angeht ahnungslos bin.
Habe mir bei codepen was runtergeladen von dem ich dachte damit arbeiten könnte. Aber bisher hat noch nichts von Codepen so richtig funktioniert was js angeht.
Ich habe davon keine Ahnung weis aber wie man es normalerweise einbindet
Das habe ich herunter gelade und für mich html- und css-mässig angepasst.
https://codepen.io/tutsplus/pen/XWZqGgX

Da läuft es. 

Bei mir auf dem Server nicht.

Und ich habe nicht den geringsten Schimmer


Code:
<!DOCTYPE html">
<html><head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <style>
 

* {
  box-sizing: border-box;
}

body {
  max-width: 1440px;
  margin: auto;
}

.slider-wrapper {
  margin: 1rem;
  position: relative;
  overflow: hidden;

}

.slides-container {
  height: calc(100vh - 2rem);
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}


.slide-arrow {
  position: absolute;
  display: flex;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 4rem;
  background-color: white;
  border: none;
  width: 2rem;
  font-size: 3rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 100ms;
}

.slide-arrow:hover,
.slide-arrow:focus {
  opacity: 1;
}

#slide-arrow-prev {
  left: 0;
  padding-left: 0.25rem;
  border-radius: 0 2rem 2rem 0;
}

#slide-arrow-next {
  right: 0;
  padding-left: 0.75rem;
  border-radius: 2rem 0 0 2rem;
}

.slide {
  width: 100%;
  /* height: 100%; */
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;


}
.slide > img {
  width: 80%;
  height: 80%;


}

.slide:nth-child(1) {
  background-color: #49b293;
}

.slide:nth-child(2) {
  background-color: #b03532;
}

.slide:nth-child(3) {
  background-color: #6a478f;
  margin: 0;
}

.slide:nth-child(4) {
  background-color: #da6f2b;
}


</style>


</head>
<body>
<!-- <section id="galerie"> -->
        
  <section class="slider-wrapper">
    <button class="slide-arrow" id="slide-arrow-prev">
      ‹
    </button>
    <button class="slide-arrow" id="slide-arrow-next">
      ›
    </button>
    <div class="slides-container"  id="slides-container">
      <div class="slide"><img src="images/walach1.jpg" alt="Image 1"></div>
      <div class="slide"><img src="images/walach2.jpg" alt="Image 2"></div>
      <div class="slide"><img src="images/walach3.jpg" alt="Image 3"></div>
      <div class="slide"><img src="images/walach4.jpg" alt="Image 4"></div>
      <div class="slide"><img src="images/walach5.jpg" alt="Image 5"></div>
      <div class="slide"><img src="images/walach6.jpg" alt="Image 6"></div>
      <div class="slide"><img src="images/walach7.jpg" alt="Image 7"></div>
      <div class="slide"><img src="images/walach8.jpg" alt="Image 8"></div>
      <div class="slide"><img src="images/walach9.jpg" alt="Image 9"></div>
    </div>
  </section>

         
    
    
  <script>
    
    const slidesContainer = document.getElementById("slides-container");
  const slide = document.querySelector(".slide");
  const prevButton = document.getElementById("slide-arrow-prev");
  const nextButton = document.getElementById("slide-arrow-next");
 
  nextButton.addEventListener("click", () => {
    const slideWidth = slide.clientWidth;
    slidesContainer.scrollLeft += slideWidth;
  });
 
  prevButton.addEventListener("click", () => {
    const slideWidth = slide.clientWidth;
    slidesContainer.scrollLeft -= slideWidth;
  });
   
    </script>

</body></html>
Drucke diesen Beitrag

  if ohne Klammern {
Geschrieben von: Matze_ - 02.02.2024, 10:00 - Forum: Javascript - Antworten (2)

Hallo,
darf ich bei if die Klammern { } weglassen? 
Also z.B. schreiben:

if (X==Y) return true;

oder

if (X==Y)
    return true;
else
    return false;

Drucke diesen Beitrag

  if Abfrage mit übergebenen Variablen
Geschrieben von: Prominenter - 30.01.2024, 11:54 - Forum: Javascript - Antworten (4)

Hi@all

Ich übergebe an ein HTML Template entsprechende Variablen (this), welche dann in der Ausgabe ersetzt werden.
Soweit so gut, funktioniert.

Hier habe ich eine Checkbox.
<input type="checkbox" id="{{this.commentId}},{{this.id}}" name="attbox[]">

In dieser muss abhängig vom Wert der Variable noch checked=true und disabled=true gesetzt werden.
if ( {{this.file_name}} ) == 'datei.txt' { checked=true, disabled=true}


Hab schon folgendes probiert:
<input type="checkbox" id="{{this.commentId}},{{this.id}}" name="attbox[]" javascript: if({{this.file_name}}) == 'datei.txt' {checked=true, disabled=true}>

<input type="checkbox" id="{{this.commentId}},{{this.id}}" name="attbox[]" checked={{this.file_name}} != 'datei.txt' ? 'false' : 'true'>

Ich bekomme es einfach nicht hin.
Bitte Hilfe - danke !!!

Thx@all

Drucke diesen Beitrag

  Audio html5 Javascript
Geschrieben von: HB24 - 27.01.2024, 13:37 - Forum: Javascript - Antworten (1)

Kann mir jemand helfen?

Ich habe ein Javascript Funktion die jede Sekunde durchlaufen wird.
Dann wenn eine Bedingung erfüllt ist, soll ein Audio Sound abspielen.
Das funktioniert bei FireFox und Crome aber nicht bei Safari auf dem iPad.
Setze ich bei Audio zu Kontrolle das "controls" hinzu, ist der Player sichtbar und der Sound kann abgespielt werden. Also kann auch Safari html5.
Aber das soll ja ohne controls funktionieren.

Code:
Html <body> Teil.
<audio id="audiofile" preload="auto" loop>
  <source src="/sound/message.mp3" type="audio/mpeg">
</audio>


Script Teil
if(array[2] == "00:00:00")  //Funktion Fertig
          {
    document.getElementById('audiofile').play();
            alert('CDL-Fertig!');
    window.location.href = Ziel;
          }


Wäre Dankbar für jede Info

Drucke diesen Beitrag