Durchsuche Foren

(Erweiterte Suche)

Foren-Statistiken
» Mitglieder: 43.212
» Neuestes Mitglied: adberryseo
» Foren-Themen: 501
» Foren-Beiträge: 2.036

Komplettstatistiken

Benutzer Online
Momentan sind 104 Benutzer online
» 0 Mitglieder
» 102 Gäste
Bing, Google

Aktive Themen
CSS Animationen verbinden
Forum: Css
Letzter Beitrag: envoy
Vor 10 Stunden
» Antworten: 2
» Ansichten: 17
Fetch Problem mit Sidebar...
Forum: Javascript
Letzter Beitrag: Sempervivum
Gestern, 12:58
» Antworten: 6
» Ansichten: 124
Ajax Abfrage
Forum: Php
Letzter Beitrag: Sempervivum
17.03.2024, 19:31
» Antworten: 2
» Ansichten: 23
Formular mit Datum und Uh...
Forum: Javascript
Letzter Beitrag: rzscout
15.03.2024, 16:40
» Antworten: 3
» Ansichten: 74
Navigation verhält sich b...
Forum: jQuery
Letzter Beitrag: Mick62
14.03.2024, 12:11
» Antworten: 0
» Ansichten: 30
Bildauswahl Reset
Forum: Javascript
Letzter Beitrag: envoy
13.03.2024, 15:05
» Antworten: 2
» Ansichten: 48
Zugriff auf Properties ei...
Forum: Javascript
Letzter Beitrag: Sempervivum
07.03.2024, 15:45
» Antworten: 3
» Ansichten: 97
über "Fetch" Json Array/O...
Forum: Javascript
Letzter Beitrag: mat-sche
06.03.2024, 15:07
» Antworten: 36
» Ansichten: 1.273
Strategic Support: Consid...
Forum: Ankündigungen,Neuigkeiten
Letzter Beitrag: lisawilson
04.03.2024, 10:30
» Antworten: 0
» Ansichten: 62
The Sinematic Pineapple: ...
Forum: Php
Letzter Beitrag: sinematic-pineapple
29.02.2024, 12:55
» Antworten: 0
» Ansichten: 176

  CSS Animationen verbinden
Geschrieben von: envoy - Gestern, 13:36 - Forum: Css - Antworten (2)

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
.html   circle_animation.html (Größe: 1,08 KB / Downloads: 2)
Drucke diesen Beitrag

  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
.php   action.php (Größe: 1,01 KB / Downloads: 1)
.php   config.php (Größe: 154 Bytes / Downloads: 1)
.php   index.php (Größe: 5,21 KB / Downloads: 1)
Drucke diesen Beitrag

  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>

Drucke diesen Beitrag

  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

Drucke diesen Beitrag

  Bildauswahl Reset
Geschrieben von: envoy - 12.03.2024, 21:24 - Forum: Javascript - Antworten (2)

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>

Drucke diesen Beitrag

  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)
   
Drucke diesen Beitrag

  Strategic Support: Considering Online Course
Geschrieben von: lisawilson - 04.03.2024, 10:30 - Forum: Ankündigungen,Neuigkeiten - Keine Antworten

The notion of hire someone to do my online course has sparked discussions within the online education community. It's essential to approach this idea with a 
discerning mindset, understanding the potential benefits and pitfalls.
Instead of solely relying on external assistance, explore the realm of online exam help services. These services discreetly contribute to your understanding of course material, aiding in exam preparation without compromising the learning process. It's about finding a balanced approach that aligns with ethical considerations.
Before deciding to hire someone, delve into the available resources at your disposal. Online education offers a wealth of tools to enhance your comprehension without sacrificing the integrity of the learning experience. Embrace the support wisely, ensuring your journey remains both enriching and ethically sound. Happy learning!

Drucke diesen Beitrag

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

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

  The Sinematic Pineapple: Crafting Cinematic Excellence
Geschrieben von: sinematic-pineapple - 29.02.2024, 12:55 - Forum: Php - Keine Antworten

The Sinematic Pineapple, a visionary in production companies in Los Angeles . As a premier TV commercial production company , we blend creativity and innovation to give your brand a captivating edge. Elevate your narrative with our expert team, ensuring your message resonates with audiences. Choose The Sinematic Pineapple for a visual journey that transcends expectations, making us the preferred choice in the vibrant landscape of Los Angeles' production industry.


The Sinematic Pineapple, a visionary in production companies in Los Angeles . As a premier TV commercial production company , we blend creativity and innovation to give your brand a captivating edge. Elevate your narrative with our expert team, ensuring your message resonates with audiences. Choose The Sinematic Pineapple for a visual journey that transcends expectations, making us the preferred choice in the vibrant landscape of Los Angeles' production industry.

Drucke diesen Beitrag

  Kamagra 100 Mg: A Comprehensive Guide to Erectile Dysfunction Treatment
Geschrieben von: yamautirobson - 29.02.2024, 07:31 - Forum: DataTables - Keine Antworten

The main purpose of the drug Kamagra 100 Mg is to treat erectile dysfunction. One of its primary ingredients, sildenafil, works by widening blood vessels and increasing blood flow to the penis, which makes it easier to maintain an erection. This medication is usually taken approximately one hour prior to engaging in sexual activity. It is classified as a phosphodiesterase type 5 (PDE5) inhibitor. Not more than once a day should be used, and depending on the individual, kamagra's effects can take anywhere from 30 to 60 minutes to manifest. It's critical to adhere to recommended dosages and be mindful of any possible adverse effects, such as allergic reactions and visual problems.

Drucke diesen Beitrag