Webentwicklung – die neusten Beiträge

Verwandte Themen
stealthuser
01.11.2024, 06:40
Mit Bildern

Wie kann ich einen Button nach dem Laden einer Webseite aktiviert aussehen lassen?

Ich habe mir für mein Intranet ein kleines Video-Portal programmiert - das eigentlich ganz gut funktioniert.
Oben gibt es eine aufklappbare Ansicht mit Haupt und Unterkategorien und wenn eine Unter-Kategorie angeklickt wird öffnet sich die Seite mit einer Übersicht relevanter Videos.

Die Haupt-Kategorie gebe ich als URL-Parameter mit -> das funktioniert auch und es wird verdeckt die zu letzt verwendete Hauptkategorie angewählt.

Was nicht funktioniert, ist den Button für die aktuelle Hauptkategorie im Reitermenü so hervor zu heben als wenn er angeklickt wurde - bzw. den Button zu aktivieren.

JavaScript:

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;


  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }


  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

PHP-Script:


$cat = "Musik";
if (isset($_GET['cat']))
{
$cat = ($_GET['cat']);
}

echo '<details><summary> Kategorien: </summary>';
echo '<div class="tab">';

echo '<button type="button" name="Musik" class="tablinks" onclick="openCity(event, \'Musik\')">Musik</button>
<button type="button"  name="Anleitungen" class="tablinks" onclick="openCity(event, \'Anleitungen\')">Anleitungen</button>
<button type="button"  name="Kochen" class="tablinks" onclick="openCity(event, \'Kochen\')">Kochen</button>
<button type="button"  name="Backen" class="tablinks" onclick="openCity(event, \'Backen\')">Backen</button>
<button type="button"  name="Heimwerken" class="tablinks" onclick="openCity(event, \'Heimwerken\')">Heimwerken</button>';
  
echo '</div>';

echo '<!-- Tab content -->
<div id="Musik" class="tabcontent">
<div style="column-count: 5;">
'.$category_Musik.'
</div>
</div>

<div id="Anleitungen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Anleitungen.'
</div>
</div>

<div id="Kochen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Kochen.'
</div>
</div>

<div id="Backen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Backen.'
</div>
</div>

<div id="Heimwerken" class="tabcontent">
<div style="column-count: 5;">
'.$category_Heimwerken.'
</div>
</div>';

echo '</details>';

echo '<SCRIPT type="text/javascript" language="JavaScript">
openCity(event, \''.$cat.'\'); 
</SCRIPT>';

CSS-Definitionen:



/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}


/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

so sieht es aus:

so soll es nach dem Laden der Seite aussehen:

Hat jemand eine Idee wie ich den Button für die aktuelle Kategorie beim Laden der Seite automatisch aktivieren kann?

Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Webdesign, Webentwicklung
1 Antwort
Inkognito-Nutzer
21.10.2024, 18:19

Wie erstelle ich eine simple HTML Website mit Github Pages?

Moin,

ich verstehs wirklich nicht. Habs jetzt online als auch mit dem Github Desktop Client versucht und ich kriegs nicht hin. Es gibt Videos von vor 3 Jahren die das erklären, dann die offizielle Erklärung von Github selbst und die Erklärung von ChatGPT und nichts scheint zu funktionieren.

Ich versuch mal zu erklären was ich versucht habe: Scheinbar muss ich meinen Benutzername als Name meines Repositories angeben und in diesem Format schreiben: username.github.io. Mein Username ist beispielsweise jetzt Johannes623, das heißt meine Repository soll johannes623.github.io heißen. Außerdem soll die Repository öffentlich sein und eine README-File enthalten. Soweit so gut.

Als nächstet aktiviert man Github Pages in den Einstellungen. Dort wählt man dann "Deploy from a branch" und dann "main und /root" als Branch aus. Jetzt geht man zurück zur README-Datei und fügt dort den Code der Website ein. Danach geht man zurück zur Github Pages Seite und schaut ob die Website unter der Domain erreichbar ist.

So wurde es mir erklärt. Problem ist nur, dass all das hier nicht funktioniert.

Kann mir jemand sehr simpel und strukturiert erklären, wie ich es hinbekomme eine Website zu erstellen? Und am besten noch dazu erklären, wie ich eine Custom Domain zu dieser Website hinzufügen kann? (Hab eine bei einem anderen Anbieter gekauft).

Vielen vielen Dank schonmal im Vorraus!!

Homepage, HTML, Webseite, CSS, JavaScript, Code, Webdesign, Webentwicklung, Webhosting, github
1 Antwort
flaviozettel
17.10.2024, 20:44
Mit Bildern

JavaScript: Wie kann ich Daten zwischen zwei Dateien verteilen?

Hallo zusammen,

ich bitte euch um Hilfe bei meinem Problem. Und zwar muss ich im Studium eine Seite so nachbauen, dass ich mittels einer Filterauswahl eine Liste ausgeben kann.

Letztens haben wir gelernt, dass wir den Code anhand Komponenten aufteilen sollen. Ich habe also die Komponenten Titelleiste (wo der Filter, Logo und Titel enthalten sein sollte), Tabelle und Filter erstellt.

Zudem gibt es ja diese Hauptdatei App.js. In einem ersten Schritt habe ich in der Filter.js Funktionen geschrieben, um meine Daten gemäß der möglichen Suchbegriffe zu filtern und habe den aktuellen Wert, welcher vom Nutzer gewählt wird, in einem useState abgespeichert.

Wie kann ich diesen Wert nun der Tabelle.js übergeben, damit dort anhand der Filterung die Ausgabe generiert werden kann?

ChatGPT hat mir geraten, die Daten zuerst in die App.js zu schreiben. Aber wie geht das? Wie komme ich von einem Child in das Parent?

Ich denke, ihr erkennt, dass ich leider noch sehr unerfahren im Programmieren bin.

Folgend die Codes:

App.js:

const Titelseite = () => {
  return (
    <div className="titelseite-container">
      <BasicTable />
    </div>
  );
};

const Tabelle = () => {
  return (
    <div className="tabelle">
      <div>Tabellenleiste</div>
    </div>
  );
};

function App() {
  const [service_ausg, setService] = useState("");
  const [anbieter_ausg, setAnbieter] = useState("");
  const handleServiceChange = (value) => {
    setService(value);
  };
  const handleAnbieterChange = (e) => {
    setAnbieter(e);
  };

  return (
    <div className="App">
      <Titelleiste>
        <Filter
          onChangeService={handleServiceChange}
          onChangeAnbieter={handleAnbieterChange}
        />
        <BasicTable />
      </Titelleiste>
      <Titelseite />
    </div>
  );
}

export default App;

Titelleiste.js:

import Grid from "@mui/material/Grid2";
import { Filter } from "./Filter";
import { useState } from "react";
import data from "./data/tableData.json";

export const Titelleiste = () => {
  const getData = (data) => {
    console.log("Ich bin in Titelleiste und komme von Filter");
  };

  return (
    <Grid container spacing={2}>
      <Grid item size={4}>
        <p>
          <img src="geoharvester.png" width="100px" height="50px" />
        </p>
      </Grid>
      <Grid item size={4}>
        <p>Ein Katalog für schweizer Geodienste</p>
      </Grid>
      <Grid item size={4} container justifyContent="flex-end">
        <p>
          <Filter onChange={getData} />
        </p>
      </Grid>
    </Grid>
  );
};

Filter.js :

import "./App.css";
import { useState } from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormHelperText from "@mui/material/FormHelperText";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import data from "./data/tableData.json";
import { App } from "./App";

export const Filter = ({ onChangeService, onChangeAnbieter }) => {
  let array_service = data.map((element) => element.service);
  let array_service_ausg = [...new Set(array_service)]; //* new "Set", entfernt automatisch die Duplikate und erstellt ein neues Objekt. Das neue Objekt wird mittels den "..." in eine Liste gespeichert
  let array_anbieter = data.map((element) => element.anbieter);
  let array_anbieter_ausg = [...new Set(array_anbieter)];
  const funService = (e) => {
    const [service_ausg, setService] = useState("");
    setService(e.target.value);
  };
  const funAnbieter = (e) => {
    TransferAnbieter(e.target.value);
  };

  return (
    <div>
      <form>
        <Select name="service" onChange={funService} sx={{ width: 100 }}>
          {array_service_ausg.map((service) => (
            <MenuItem value={service}>{service}</MenuItem>
          ))}
        </Select>
      </form>
      <Select name="anbieter" onChange={funAnbieter} sx={{ width: 100 }}>
        {array_anbieter_ausg.map((anbieter) => (
          <MenuItem value={anbieter}>{anbieter}</MenuItem>
        ))}
      </Select>
      <br />
    </div>
  );
};

Nach einigen Stunden, die ich bereits in die Recherche meines Problems investiert habe, danke ich euch herzlich für eure Hilfe.

Bild zum Beitrag
HTML, IT, Webseite, JavaScript, HTML5, Code, Informatik, Programmiersprache, Softwareentwicklung, Webentwicklung, Frontend, React
1 Antwort
CoSci
07.10.2024, 23:11
Mit Bildern
Mit Links

JavaScript/html2pdf: Wieso werden die Seiten nicht richtig gedruckt?

Hi, ich möchte mit JavaScript und den Bibliotheken JsBarcode und html2pdf Barcodes generieren, einen Text oberhalb des Barcodes ausgeben und diesen dann als PDF speichern, um damit Etiketten mit Barcodes zu drucken.

Leider habe ich dabei aber das Problem, dass meine Seiten immer weiter nach oben geschoben werden und somit dann ein Label auf zwei Seiten gedruckt wird.

Kennt jemand das Problem oder kann mir dabei helfen?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html2pdf</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <style>
      .label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60mm;
        height: 30mm;
        margin: 0;
        padding: 0;
      }

      .label-text-center {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      svg {
        width: auto;
        height: 60%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper" id="element-to-print">
      <div class="label">
        <p class="label-text-center">headline01</p>
        <p class="label-text-center">headline01</p>
        <svg id="barcode" class="label-image-center"></svg>
      </div>
    </div>
    <script>
      // Generiere Barcodes für alle SVGs mit der Klasse "barcode"
      JsBarcode("#barcode", "5901234123457", { format: "EAN13" });

      // PDF-Optionen
      var opt = {
        margin: 0,
        filename: 'barcodes.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: [60, 30], orientation:'landscape' }
      };
      // Erstelle das PDF und speichere es
      html2pdf().set(opt).from(document.getElementById('element-to-print')).save();
    </script>
  </body>
</html>
Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webentwicklung, Frontend, node.js
2 Antworten
Talbor
14.09.2024, 22:06

Programmieren in C: Probleme mit der IDE?

Hallo! Im Studienvorbereitungskurs habe ich C gelernt. Wir haben die IDE "Devcpp" genutzt. An der Uni hat auch alles wunderbar geklappt, aber Zuhause bleibt das Programm nicht stehen. Ein "Hello World" z.B. kann ich nicht sehen, weil es die Konsole schließt, sobald das Programm durch ist.

Da das Programm bei mir auch nicht schön dargestellt ist (mit manchen Programmen hat mein Rechner irgendwie ein Problem, dass irgendwas mit der Auflösung nicht stimmt und das Programm irgendwie unscharf ist - aber anderes Thema), habe ich mir gedacht, die IDE zu wechseln und ein paar auszuprobieren.

Ich würde übrigens gerne gute Tipps annehmen. Ich brauche an sich nicht viel, weil ich es erst gelernt habe. Ein Programm, was mir eine Datei erstellt, ein bisschen farbig unterstützt und vielleicht auch bei der Eingabe (automatische zweite Klammer oder so), ein Debugger wäre auch ganz nett, in Python habe ich gern mit dem gearbeitet.. Oh, und ich möchte lokal arbeiten können..

Ich habe dann aber CodeLite und CodeBlocks ausprobiert und das hat irgendwie gar nicht funktioniert.. Ich bekam zwei Mal die Fehlermeldung, dass ich keinen Compiler hätte. In CodeLite kann ich gar nicht erst das Programm ausführen, welches ich geschrieben habe, in CodeBlocks klappt es, aber ich bekomme eine Fehlermeldung ganz am Anfang, dass der Complier fehlt und der Debugger ist ausgegraut.

Ich habe mich damit überhaupt nicht beschäftigt, sondern wollte einfach nur ein paar simple Programme rein aus Spaß ander Freude programmieren, ich bin ein wenig verunsichert und wirklich schlau bin ich aus dem Internet nicht geworden. Ich habe nur die Programmierkenntnisse, weil es mir Spaß gemacht hat.. Mehr aber auch nicht... :I

Kann mir jemand weiterhelfen, was ich tun muss, damit alles funktioniert? ^^"

Computer, App, IT, programmieren, IDE, Code, Programmiersprache, Softwareentwicklung, Webentwicklung, C (Programmiersprache), Entwicklungsumgebung
2 Antworten
aeskulap787
10.09.2024, 19:41

Wie kann man ein weitverzweigtes Geflecht aus if/else-Anweisungen in Python (oder in anderen Programmiersprachen) programmieren?

Wenn man als absoluter Laie in Programmierung im Internet zur if/else-Anweisung (egal, in welcher Programmiersprache) recherchiert, wird man schnell feststellen, dass die Infos, die man hier findet, nicht allzu reichhaltig sind.

Das höchste der Gefühle, was einem beigebracht wird, ist folgenden Dialog zu programmieren: "Welche Sprache sprechen Sie?" - "Französisch." - "Wollen Sie sich auf Französisch weiter unterhalten?" Ende.

Man lernt nicht, wie man mit dem Programm weitermachen kann, falls die Antwort des Benutzers "Ja" sein sollte. Man erfährt gar nichts. Was zu finden ist, ist, wie man EINE FRAGE STELLT und dann auf EINE ANTWORT zu dieser Frage reagieren kann. Das war's.

Ich wüsste gern, wie man das weiterspinnen kann. Wie man eine ganz lange Unterhaltung mit allen möglichen Antwortmöglichkeiten programmieren kann. So wie bei einem Windows-Installationassistenten, der dafür sorgt, dass Windows unter hundert verschiedenen Arten auf die Art installiert wird, wie der Benutzer es will.

Wenn die Benutzer dieser Seite keine Antwort auf die Frage haben, weil sie es selbst nicht wissen, ist das überhaupt kein Problem. Man trifft immer wieder einen It-Profi, der es vielleicht weiß.

Allerdings lässt sich extrem leicht feststellen, dass irgendwelche Teenies oder Leute, die auf dem geistigen Niveau von (nicht sehr gut erzogenen) Teenies stehengeblieben sind, es sich zum Hobby machen, auf dieser Seite unvorstellbar bösartig und beleidigend zu antworten. Es ist völlig egal, was man fragt, egal ob "Wie heißt das weiße Zeug, das früher auf den Donuts war?" oder "In welchen Läden kann man viele naturfreundliche Reinigungsmittel kaufen?" Es wird immer geantwortet von irgendwelchen Leuten, die zu wenig zu tun haben und sich ihre Zeit vertreiben, Leute im Internet mit Sprüchen wie "Boah, Alta, wie dumm BIIISSSSST Du eigentlich?" zu beleidigen.

Ich werde auf so einen Schwachsinn nicht antworten, auch nicht auf "gut gemeinte Rückfragen" und schon gar nicht auf "Also, mit SO EINER NEGATIVEN EINSTELLUNG MENSCHEN GEGENÜBER würde ich hier aber KEINE Frage stellen".

Die Frage ist klar formuliert, so klar wie sie klarer nicht formuliert werden kann. So wie "Was ist 2 + 2?" Wenn jemand die Antwort wüsste, würde mich das sehr freuen. Wenn nicht, dann nicht.

Danke, Ende.

Computer, IT, programmieren, Java, Anwendungsentwicklung, C Sharp, Programmiersprache, Python, Softwareentwicklung, Webentwicklung, Rust, Programmcode, Objektorientierte Programmierung
6 Antworten
RandomNutzer802
08.09.2024, 17:48

Website erstellen - Mit Lua/Luau möglich?

Ist es eigentlich möglich, mit Lua oder Luau eine qualitative Website mit komplexem Layout und 3D-Elementen zu erstellen, oder kommt man um den JavaScript nicht herum?

Ich bin Anfänger (habe noch mich noch nie mit programmieren/coden vertraut gemacht) und möchte damit beginnen, zu lernen, wie man einen Code zu einer Website transformiert, habe mich damit aber noch nicht auseinandergesetzt (ich habe bisher noch keine Erfahrung mit coden von Websites). Und ja, bisher habe ich keine einzelne Zeile Code geschrieben und kenne mich auch nicht wirklich aus. Jedenfalls, für mich wäre es effizienter und eventuell auch besser, mich mit Lua vertraut zu machen, aber da ich dazu nichts gefunden habe, habe ich die Befürchtung, dass JavaScript nicht zu umgeben ist. Und so bin ich auf gutefrage.net gekommen, wie jeder, wenn er etwas sucht.

Kurzgefasst interessiert mich, ob man mit Lua folgendes tun kann:

  • Eine Website mit 3D-Effekten erstellen
  • Eine Website mit Animationen erstellen
  • Komplexe Layouts Wirklichkeit werden lassen

Ich bin noch ein richtiger Anfänger, aber mich würden eure Antwort und euer Wissen interessieren, damit ich weiß, was für die Zukunft besser ist (schließlich möchte ich eine Programmiersprache für die Erstellung von Websites lernen und dieses Wissen auch festigen, nicht umher springen von Programmiersprache zu Programmiersprache), denn es ist ja klar, dass ich erst klein beginnen würde (keine komplexen Layouts, Animationen, ...).

Danke!

Homepage, App, HTML, Webseite, CSS, JavaScript, HTML5, lua, Programmiersprache, Webdesign, Webentwicklung
2 Antworten
Inkognito-Nutzer
07.09.2024, 21:28
Beitrag wurde 1 Mal erneut eingestellt

Wo Website erstellen?

Ich bin Theologiestudentin und überlege zur Zeit, eine eigene Website zu den wichtigsten Themen über das Christentum für den Religionsunterricht zu erstellen, die, soweit meine akademischen Fähigkeiten es zulassen, möglichst wissenschaftlich akkurat sein sollte. Quasi eine Mini-Lexikon, welches in die Themen grundlegend einführt.

Ich würde dies auch gerne mit den Sozialen Netzwerken verbinden, um im besten Fall etwas Reichweite zu bekommen. Ähnliche Formate gibt es ja auch zu Geschichte oder Politik.

Mein Anliegen ist, meinen und anderen (zukünftigen) Schülerinnen und Schüler ein zuverlässiges Nachschlagewerk zu bieten, da die Literatur zu Religion oft nicht immer ganz zuverlässig ist und man sich sehr schnell auf seltsamen, teils unseriösen Seiten verirrt (insbesondere die mir jw.de enden), wenn man nicht weiß, wo man suchen sollte. Es gibt zwar auch sehr gute Seiten zu einzelnen Themen, die aber oft sehr zerstreut sind und wenig kompakt. Für Oberstufenschüler ist oftmals Literatursuche kein Problem und irgendwo auch eine Kompetenz, die man zum Abi erlernt haben sollte. Für die kleineren wäre es aber vermutlich ein Stück weit eine Stütze.

Ich suche demnach, nach einer Website, bei welcher man relativ viele Unterpunkte gliedern kann und im Besten Fall kostenlos ist, oder deren Preis sich in Grenzen hält (und auch für Lehrer mit eingeschränkter Medienkompetenz einfach zu bedienen ist🙂)

Homepage, Lernen, Schule, Webseite, Bildung, Unterricht, Schüler, Abitur, Content Management System, Gymnasium, Lehrer, Webentwicklung
3 Antworten

Meistgelesene Beiträge zum Thema Webentwicklung
Mehr meistgelesene Fragen zu Webentwicklung