Code – die besten Beiträge

Verwandte Themen
Rolajamo
20.04.2024, 12:00

HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

  • ...dass Content 1 von Opacity 100 auf 0 geht
  • ...dass Content 1 in Minus Y-Richtung 20px bewegt wird
  • ...dass Content 2 von Opacity 0 auf 100 geht
  • ...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>
Animation, Technik, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
HosenFcker
16.04.2024, 00:02

Minecraft 1.20.4 - Eclipse Programmierung, kann keine Imports machen?

Ich möchte mit Java ein Plugin für 1.20.4 programmieren und habe mir ein Code von ChatGPT schreiben lassen.

package de.diamanthoe.plugin;

import org.bukkit.Material;

import org.bukkit.Particle;

import org.bukkit.command.Command;

import org.bukkit.command.CommandSender;

import org.bukkit.command.CommandExecutor;

import org.bukkit.configuration.ConfigurationSection;

import org.bukkit.configuration.file.FileConfiguration;

import org.bukkit.entity.Player;

import org.bukkit.inventory.Inventory;

import org.bukkit.inventory.ItemStack;

import org.bukkit.inventory.meta.ItemMeta;

import org.bukkit.plugin.java.JavaPlugin;

import org.bukkit.Location;

public class NaviSystem extends JavaPlugin implements CommandExecutor {

  @Override

  public void onEnable() {

    // Register commands

    getCommand("navi").setExecutor(this);

  }

  @Override

  public boolean onCommand(CommandSender sender, Command cmd, String label, String[] args) {

    if (!(sender instanceof Player)) {

      sender.sendMessage("Dieser Befehl kann nur von Spielern ausgeführt werden.");

      return true;

    }

    Player player = (Player) sender;

    if (cmd.getName().equalsIgnoreCase("navi")) {

      if (args.length >= 1) {

        if (args[0].equalsIgnoreCase("save")) {

          if (args.length >= 2) {

            savePoint(args[1], player.getLocation());

            sender.sendMessage("Punkt gespeichert unter: " + args[1]);

          } else {

            sender.sendMessage("Verwendung: /navi save [Name]");

          }

        } else {

          if (args.length >= 3) {

            try {

              double x = Double.parseDouble(args[0]);

              double y = Double.parseDouble(args[1]);

              double z = Double.parseDouble(args[2]);

              Location target = new Location(player.getWorld(), x, y, z);

              createParticleTrail(player, target);

            } catch (NumberFormatException e) {

              sender.sendMessage("Ungültige Koordinaten.");

            }

          } else {

            sender.sendMessage("Verwendung: /navi <x y z>");

          }

        }

      } else {

        sender.sendMessage("Verwendung: /navi <x y z>");

      }

    }

    return true;

  }

  private void createParticleTrail(Player player, Location target) {

    Location playerLocation = player.getLocation();

    player.spawnParticle(Particle.REDSTONE, playerLocation, 0, target.getX(), target.getY(), target.getZ(), 10);

  }

  private void savePoint(String name, Location location) {

    FileConfiguration config = getConfig();

    config.set("points." + name + ".world", location.getWorld().getName());

    config.set("points." + name + ".x", location.getX());

    config.set("points." + name + ".y", location.getY());

    config.set("points." + name + ".z", location.getZ());

    saveConfig();

  }

  private void openPointsGUI(Player player) {

    Inventory gui = getServer().createInventory(null, 9, "Gespeicherte Punkte");

    ConfigurationSection pointsSection = getConfig().getConfigurationSection("points");

    if (pointsSection != null) {

      for (String pointName : pointsSection.getKeys(false)) {

        ConfigurationSection pointConfig = pointsSection.getConfigurationSection(pointName);

        if (pointConfig != null) {

          String worldName = pointConfig.getString("world");

          double x = pointConfig.getDouble("x");

          double y = pointConfig.getDouble("y");

          double z = pointConfig.getDouble("z");

          ItemStack pointItem = createPointItem(worldName, x, y, z);

          gui.addItem(pointItem);

        }

      }

    }

    player.openInventory(gui);

  }

  private ItemStack createPointItem(String worldName, double x, double y, double z) {

    ItemStack item = new ItemStack(Material.COMPASS);

    ItemMeta meta = item.getItemMeta();

    meta.setDisplayName(worldName + " - " + x + ", " + y + ", " + z);

    item.setItemMeta(meta);

    return item;

  }

}

Das Problem ist, dass da total viel rot unterstrichen wird, was wahrscheinlich auf die Imports zurückzuführen ist. Die Imports selbst sind teilweise ebenso rot interstrichen (org.bukkit).

Ich benutze das JDK 17 und Java SE 1.8.

Java, Minecraft, Code, Minecraft Server, Programmiersprache, Bukkit, Spigot
1 Antwort
marcus09421
08.04.2024, 12:04
Mit Links

Warum funktioniert mein Websockets- Server nicht?

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed: 

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Python 3
1 Antwort

Meistgelesene Beiträge zum Thema Code

Mehr meistgelesene Fragen zu Code