1. Weiterleitung zu NetzLiving.de
  2. Forum
    1. Unerledigte Themen
  3. zum neuen Forum
  • Anmelden
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Seiten
  • Forum
  • Erweiterte Suche
  1. Informatik Forum
  2. Webmaster & Internet
  3. Entwicklung

Frage für meine Hausarbeit

  • aless
  • 3. Januar 2025 um 15:20
  • Unerledigt
Hallo zusammen,

das Informatik-Forum geht in den Archivmodus, genaue Informationen kann man der entsprechenden Ankündigung entnehmen. Als Dankeschön für die Treue bekommt man von uns einen Gutscheincode (informatikforum30) womit man bei netzliving.de 30% auf das erste Jahr sparen kann. (Genaue Infos sind ebenfalls in der Ankündigung)

Vielen Dank für die Treue und das Verständnis!
  • aless
    Punkte
    32
    Beiträge
    5
    • 3. Januar 2025 um 15:20
    • #1

    Hallo ihr Lieben :)

    Ich studiere AI und bin im ersten Semester. Jetzt schreibe ich gerade eine Hausarbeit über HTML und CSS und bin bei position: … angekommen.

    Gibt es eine Möglichkeit für die Beispiele Buttons zu erstellen, die dann beim Klick die entsprechende position-Eigenschaft annehmen?

    Danke schon mal für eure Hilfe :)

  • aless 3. Januar 2025 um 15:23

    Hat den Titel des Themas von „Hausarbeit“ zu „Frage für meine Hausarbeit“ geändert.
  • PixelPatron
    Punkte
    4.131
    Beiträge
    733
    • 3. Januar 2025 um 15:56
    • #2

    Hallo und herzlich willkommen!

    Meinst du sowas?

    position - CSS: Cascading Style Sheets | MDN
    Die position CSS Eigenschaft legt fest, wie ein Element in einem Dokument positioniert wird. Die Eigenschaften top, right, bottom und left bestimmen die…
    developer.mozilla.org
  • aless
    Punkte
    32
    Beiträge
    5
    • 3. Januar 2025 um 17:27
    • #3

    Hallo und danke?

    Das ist zwar gut, aber leider nicht das, was ich brauche!

    Der Button soll sich im Fließtext befinden und im Browser dann anklickbar sein.

    Also wie z.B. der Button auf dem Bild, dass der dann beim Klick auf position:fixed springt!

    Bilder

    • IMG_9031.jpg
      • 404,49 kB
      • 1.200 × 1.600
  • PixelPatron
    Punkte
    4.131
    Beiträge
    733
    • 3. Januar 2025 um 17:52
    • #4

    Also wenn ich rein auf seine Frage antworte: Ja die gibt es. Ich verstehe aber nicht genau was du meinst denke ich. Brauchst du Beispiele für Buttons die fixed, relativ absolut etc sind?

  • aless
    Punkte
    32
    Beiträge
    5
    • 3. Januar 2025 um 18:54
    • #5

    Ich brauche einen Button, der nicht die ganze Zeit auf der zugewiesenen Positionswigenschaft ist, sondern nur die beim anklicken auf die verschiedenen Positionen springt und bei erneutem Klick zurück. Und da brauche ich für jede der Eigenschaften von position: … einen anderen Button. Ich würde nur gerne wissen, wie ich einen Button mit dieser Verhaltensweise erstellen kann

  • Beitrag von PixelPatron (3. Januar 2025 um 20:07)

    Dieser Beitrag wurde vom Autor aus folgendem Grund gelöscht: Moment lol (3. Januar 2025 um 20:12).
  • PixelPatron
    Punkte
    4.131
    Beiträge
    733
    • 3. Januar 2025 um 20:16
    • #7

    Keine Ahnung ob ich es jetzt verstanden habe aber ich habe einfach mal gebaut was ich denke was du suchst ..

    Code
    <button id="toggleButton">Toggle Properties</button>
    <script>
      const button = document.getElementById("toggleButton");
      const properties = [
        { property: "position", value: "static" },
        { property: "position", value: "relative" },
        { property: "position", value: "absolute" },
        { property: "position", value: "fixed" },
        { property: "position", value: "sticky" },
      ];
      let currentIndex = 0;
    
      button.addEventListener("click", () => {
        const { property, value } = properties[currentIndex];
        button.style[property] = value;
        currentIndex = (currentIndex + 1) % properties.length;
      });
    </script>
    Alles anzeigen

    Also der Button toggelt bei Klick quasi immer seine style eigenschaft position. Hab nur die 5 genommen aber es gibts ja noch die "globalen" ... ich hoffe ich konnte dir etwas helfen.

    Nachtrag: Gerade nochmal nachgedacht .. man kann natürlich auch je Positions Eigenschaft einen button erstellen und den dann nur dieses eine eigenschaft toggeln lassen.

    Falls du sowas suchst wäre das vielleicht eher etwas:

    Code
    <button id="toggleButton">Toggle Style</button>
    
    <script>
      const button = document.getElementById("toggleButton");
      let isToggled = false;
    
      button.addEventListener("click", () => {
        isToggled = !isToggled;
        button.style.position = isToggled ? "static" : "relative";
      });
    </script>
    Alles anzeigen

    Einmal editiert, zuletzt von PixelPatron (3. Januar 2025 um 20:28)

  • aless
    Punkte
    32
    Beiträge
    5
    • 3. Januar 2025 um 20:38
    • #8

    Super lieb, vielen Dank für deine Mühen!!☺️

    Ich probiere es direkt mal aus, wenn meine Kinder schlafen?

  • PixelPatron
    Punkte
    4.131
    Beiträge
    733
    • 3. Januar 2025 um 21:04
    • #9
    Zitat von aless

    Ich probiere es direkt mal aus, wenn meine Kinder schlafen?

    Fühl ich. Meine sind grade im Schlaf Modus .. fahren grade runter deswegen hatte ich ebend zeit mir das genauer durchzulesen :D

  • aless
    Punkte
    32
    Beiträge
    5
    • 4. Januar 2025 um 10:58
    • #10

    Soooo, ich bin jetzt endlich dazu gekommen, das auszuprobieren und es ist genau das, was ich möchte!! Es ist perfekt, vielen Dank?


    Ja, ist nicht immer leicht mit den Kleinen, aber es lohnt sich ?

  • PixelPatron
    Punkte
    4.131
    Beiträge
    733
    • 4. Januar 2025 um 11:15
    • #11

    Klasse! Freut mich wenn dir hier geholfen werden konnte.

    Wenn du wieder eine Frage hast hau einfach raus. Und wenn du Bock hast kannst du uns ja Mal deine Hausarbeit in Funktion zeigen.

Ähnliche Themen

  • Smalltalk - Chatten, Diskutieren....

    • Maximilian Rupp
    • 13. April 2023 um 15:03
    • Smalltalk

Tags

  • css
  • html
  • frage
  1. Datenschutzerklärung
  2. Impressum