Javascript-forum

Durchsuche Foren

Foren-Statistiken

» Mitglieder: 43.373
» Neuestes Mitglied: Tom
» Foren-Themen: 503
» Foren-Beiträge: 2.085

Komplettstatistiken

Benutzer Online

Momentan sind 89 Benutzer online
» 0 Mitglieder
» 88 Gäste
Bing

Aktive Themen

Neu laden ohne Scrolling
Forum: Javascript
Letzter Beitrag: Tom
Vor 1 Stunde
» Antworten: 0
» Ansichten: 1

Formularfelder addieren u...
Forum: Javascript
Letzter Beitrag: heena123
Vor 1 Stunde
» Antworten: 17
» Ansichten: 333

FMOVIES
Forum: Javascript
Letzter Beitrag: xomanig690
Vor 2 Stunden
» Antworten: 0
» Ansichten: 11

Verbindung von Entscheidu...
Forum: Javascript
Letzter Beitrag: Zaayan
13.04.2024, 18:24
» Antworten: 2
» Ansichten: 51

Spam gelöscht
Forum: Ankündigungen,Neuigkeiten
Letzter Beitrag: rzscout
10.04.2024, 23:37
» Antworten: 0
» Ansichten: 127

Reihenfolge der Karten
Forum: Brauche Javascript / Userscript
Letzter Beitrag: hardee
10.04.2024, 17:54
» Antworten: 4
» Ansichten: 64

Variable aus Funktion zur...
Forum: Javascript
Letzter Beitrag: Kai_Behncke
27.03.2024, 14:58
» Antworten: 2
» Ansichten: 110

Probleme mit Canvas
Forum: Javascript
Letzter Beitrag: Sempervivum
27.03.2024, 09:28
» Antworten: 5
» Ansichten: 238

Bildauswahl Reset
Forum: Javascript
Letzter Beitrag: Sempervivum
25.03.2024, 05:38
» Antworten: 6
» Ansichten: 228

HTML Tabelle filtern + Na...
Forum: Javascript
Letzter Beitrag: Sempervivum
24.03.2024, 17:31
» Antworten: 1
» Ansichten: 135

Class in PHP While ansprechen

Geschrieben von: saturnus - 19.03.2024, 10:00 - Forum: Javascript - Antworten (4)

Hallo

Ich habe div. Datensätze die aus einer Datenbank kommen. Innerhalb dieser Datensätze möchte ich ein onclick Event setzen, der nur für die jeweilige Zeile gültig ist.

PHP-Code:
while($row=$result->fetch_object()){
                if($frage != $row->frage){
                    echo '<div class="col-lg-12 frage">'.$row->frage.'</div>';
                }
                echo '<div class="col-lg-4">';
                echo '<a href="#" class="box a'.$row->id_fragen.'"><span class="border rounded-circle letter" id="'.$row->question.'">'.$row->letters.'</span> '.$row->solutions.'</a>';;
                echo '</div>';
                $frage = $row->frage;
            } 

Erklärung:
Ich möchte jetzt gerne eine CSS Klasse hinzufügen, resp. entfernen, je nach dem, was geklickt wurde (toggleClass). Pro Zeile sind 3 Antworten zum anklicken möglich. Je nach dem was geklickt wurde, soll der Text via CSS markiert werden. Eine zuvor geklickte Antwort soll wieder neutral werden. Das soll aber nur für die betroffene Zeile gültig sein.
Als Ansatz hab ich das:

Code:
$(document).ready(function(){

    $('.box').click(function(){

        $('.box').removeClass('box-active');

        $(this).addClass('box-active');

    });

});

Bin für einen Tipp dankbar!

CSS Animationen verbinden

Geschrieben von: envoy - 18.03.2024, 13:36 - Forum: Css - Antworten (8)

	Hallo, ich habe 2 einzelne CSS @keyframe Animationen, einmal einen pulsierenden circle und eine animierte Positionsänderung und möchte diese gerne in einer Animation verbinden, sodass der pulsierende circle seine Position verändert. Wie kann ich diese beiden Animationen in eine packen? Viele Grüße Angehängte Dateien circle_animation.html (Größe: 1,08 KB / Downloads: 3)

Ajax Abfrage

Geschrieben von: BinButz - 17.03.2024, 12:55 - Forum: Php - Antworten (2)

	Hallo, ich beiße mir die Zähne an meinem Script aus.... Der Filter funktioniert einfach nicht und ich verstehe nicht warum... Bin seit Stunden dran.... HILFE!! Angehängte Dateien action.php (Größe: 1,01 KB / Downloads: 1) config.php (Größe: 154 Bytes / Downloads: 1) index.php (Größe: 5,21 KB / Downloads: 1)

Navigation verhält sich bei Breakpoint zu mobilen Ansicht suboptimal

Geschrieben von: Mick62 - 14.03.2024, 12:11 - Forum: jQuery - Keine Antworten

Hallo und Guten Tag
Hab hier Eine Navigation die ich mit Hilfe eines Tutorial erstellt habe. Ich habe mir das schön angepasst.
Doch wenn ich es im Browserfenster zusammen schiebe wird das Menue ab dem Breackpoint direkt aufgeklappt angezeigt.
Es soll sich aber erst nach Aufforderung öffnen. Ich selbst bin mit Javascript nur rudimentär vertraut

hier ist mal der gesamter code: Das script ist ganz unten

Code:
<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Nav</title>

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

  </head>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

      list-style: none;

      box-sizing: border-box;

      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    }

    body::after {

      content: "Resize Viewport ↘";

      position: fixed;

      bottom: 1em;

      right: 1em;

      opacity: 0.5;

      font-size: 0.8em;

      border-bottom: 1px solid rgba(0, 0, 0, 0.5);

    }

    .top-navigation {

      width: 100%;

      float: left;

      background-color: darkcyan;

      position: fixed;

      z-index: 1000;

      display: flex;

      justify-content: space-between;

      align-items: center;

    }

    .logo {

      display: block;

      padding: 1em;

    }

    .logo img {

      display: block;

      width: 100%;

      max-width: 100px;

    }

    nav {

      display: flex;

      align-items: center;

    }

    nav ul {

      display: flex;

      justify-content: flex-end;

      align-items: center;

    }

    nav li {

      margin: 0 10px;

    }

    nav a {

      display: block;

      text-decoration: none;

      color: white;

      border-top: 1px solid rgba(0, 0, 0, 0.5);

      padding: 1em;

      white-space: nowrap;

    }

    nav a:hover {

      background: rgba(0, 0, 0, 0.2);

      color: white;

    }

    #toggle-nav {

      background: rgba(0, 0, 0, 0.2);

      display: block;

      position: absolute;

      right: 0;

      top: 0;

      padding: 1.1rem;

      color: white;

      cursor: pointer;

    }

    #toggle-nav:hover {

      background: rgba(0, 0, 0, 0.4);

      color: white;

    }

    header {

      margin-top: 60px;

      width: 100%;

      min-height: 100vh;

      float: left;

    }

    h1 {

      font-size: 24px;

    }

    p {

      font-size: 16px;

    }

    .top-fix {

      display: flex;

      justify-content: start;

      align-items: center;

      min-height: 50vh;

      background-color: aquamarine;

    }

    .bottom-flex {

      display: flex;

      justify-content: start;

      align-items: center;

      min-height: 50vh;

      background-color: lightcoral;

    }

    @media screen and (min-width: 800px) {

      .top-navigation {

        flex-direction: row;

        align-items: center;

      }

      nav {

        float: right;

        width: auto;

        display: flex;

        align-items: center;

      }

      nav a {

        border: none;

      }

      nav li {

        width: auto;

        padding: 0;

      }

      #toggle-nav {

        display: none;

      }

    }

    @media screen and (max-width: 800px) {

      .top-navigation {

        flex-direction: column;

        text-align: center;

      }

      .logo {

        text-align: left;

        width: 100%;

        padding-left: 1em;

      }

      .logo img {

        max-width: 18%;

        height: auto;

      }

      nav {

        width: 100%;

      }

      nav ul {

        display: inline-block;

        padding: 0;

        text-align: center;

        width: 100%;

      }

      nav li {

        display: block;

        margin: 10px 0;

        width: 100%;

      }

      nav a {

        display: block;

        text-decoration: none;

        color: white;

        border-top: 1px solid rgba(0, 0, 0, 0.5);

        padding: 1em;

      }

    }

  </style>

  <body>

    <div class="top-navigation">

      <a href="#" class="logo"><img src="../images/logo" alt="Logo" /></a>

      <div id="toggle-nav">Menu</div>

      <nav>

        <ul>

          <li><a href="#">Link 1</a></li>

          <li><a href="#">Link 2</a></li>

          <li><a href="#">Link 3</a></li>

          <li><a href="#">Link 4</a></li>

          <li><a href="#">Link 5</a></li>

        </ul>

      </nav>

    </div>

    <header>

      <!-- Header-Inhalt -->

      <section class="top-fix">

        <h1>header teil 1</h1>

        <p>Mit öjähäjhi iupiuhgofogzpg.</p>

      </section>

      <section class="bottom-flex">

        <h1>header teil 2</h1>

        <p>Mit öjähäjhi iupiuhgofogzpg.</p>

      </section>

    </header>

    <script

      type="text/javascript"

      src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"

    ></script>

    <script>

      $(document).ready(function () {

        $("html").addClass("js");

        var navToggle = ['<div id="toggle-nav">Menu</div>'].join("");

        $("header").append(navToggle);

        // Hinzugefügten Code

        $("nav a").on("click", function () {

          if (menu.is(":visible")) {

            menu.slideUp();

          }

        });

      });

      $(function () {

        var pull = $("#toggle-nav");

        menu = $("nav");

        menuHeight = menu.height();

        $(pull).on("click", function (e) {

          e.preventDefault();

          menu.slideToggle();

        });

        $(window).resize(function () {

          var w = $(window).width();

          if (w > 320 && menu.is(":hidden")) {

            menu.removeAttr("style");

          }

        });

      });

    </script>

  </body>

</html>

Formular mit Datum und Uhrzeit

Geschrieben von: Lisa_33 - 14.03.2024, 08:26 - Forum: Javascript - Antworten (3)

Hallo an Alle,

ich brauche mal wieder eure Hilfe...

In einem Formular wähle ich über "input type=date" ein Datum aus.
Jetzt soll ein Dropdown erscheinen, in dem alle Uhrzeiten angezeigt werden, die für einen bestimmten
Wochentag in der Datenbank hinterlegt sind.

Habe jetzt schon alles mögliche versucht mit "datepicker" und "chained select", komme aber nicht weiter.

Vielleicht bin ich hier im Javascript-Forum falsch, aber der Versuch ist es wert.
Wäre euch echt dankbar für jeden Tipp.

LG
Lisa

Bildauswahl Reset

Geschrieben von: envoy - 12.03.2024, 21:24 - Forum: Javascript - Antworten (6)

Hallo, ich habe 2 separate Bildauswahl-Elemente. Ich möchte beide, wenn ich auf den Button Reset drücke, jeweils auf das 1. Bild zurücksetzten. Einzeln kann ich ansprechen, weiß aber nicht, wie ich beide gleichzeitig zurücksetzten kann?
<button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(all???)')">reset</button>
Viele Grüße
</head> <body> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'left')">left</button> <button class="tablinks" onclick="openCity(event, 'right')">right</button>

Code:
    </div>

    <div id="left" class="tabcontent">

        <img id="bannerImage_left" src="01.jpg">

        <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_left')" style="cursor:pointer; margin-left:40px; margin-right:40px">

        <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">

        <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">

    </div>

    <div id="right" class="tabcontent">

        <img id="bannerImage_right" src="01.jpg" "">

        <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_right')" style="cursor:pointer; margin-left:40px; margin-right:40px">

        <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">

        <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">

    </div>

    <div>

    <button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(**all???**)')">reset</button>

    </div>

    <script>

Zugriff auf Properties einer Webseite

Geschrieben von: SilverArrow99 - 07.03.2024, 07:29 - Forum: Javascript - Antworten (3)

Hallo,

ich weiß gerade nicht so ganz wie ich das ganze nennen soll bzw. ob ich es korrekt verordne.
Ich versuche mir gerade ein Skript für eine Webseite zu bauen und ich bekomme nur eine Bestätigung ob das funktioniert über diese Properties im Browser. Allerdings habe ich keine Ahnung wie ich darauf zugreifen kann, bzw. wie diese properties wirklich heißen damit ich danach korrekt googeln könnte.

mich interessieren hierbei die Properties mit den Werten ::after.

Ich hab jetzt schon mit paar Dingen versucht die mir copilot vorgeschlagen hat, aber da ich die genaue Bezeichnung dafür nicht kenne komme ich damit auch nicht weiter.

Angehängte Dateien Thumbnail(s)

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:

<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!

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?

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)

Seiten (50): « Zurück 1 2 3 4 5 … 50 Weiter »

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken