Event-Kalender mit SQLite

PHP, CSS und JavaScript lernen. Anwendungen für Webseiten
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Ja, das war ein kleiner Fehler von mir, ich hätte diese nicht hochladen sollen :(
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Mein Arbeitsbereich (3840x2160):


arbeitsbereich.png
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... Wahnsinn :tu:

... mein Arbeitsbereich (0px x 0px) :D Externe Skripte werden natürlich innerhalb vom Mobirise-Arbeitsbereich gar nicht erst angezeigt.


Mobirise Arbeitsseite.jpg


... habe jetzt mal noch ein Audio mit zusätzlicher CSS als Test am 22.05.2022 (und an vielen anderen Stellen) hinzugefügt:

https://www.mobirise-tutorials.com/Even ... er-SQLite/

"Pixabay" wird ja von Mobirise für die kostenlosen Bilder verwendet. Wusste noch gar nicht, dass die auch kostenlose und gemafreie Musik zur Verfügung stellen:



von: https://pixabay.com/music/
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Wusste noch gar nicht, dass die auch kostenlose und gemafreie Musik zur Verfügung stellen
Super, das kann man sicher mal wo gebrauchen :tu:
Externe Skripte werden natürlich innerhalb vom Mobirise-Arbeitsbereich gar nicht erst angezeigt.
Ich brauche da immer die volle Kontrolle :D
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Werner,

ich habe gestern eine ganze Weile gesucht, ob man das "HTML5 Audio Tag" eigentlich bei allen Browsern gleich anzeigen könnte, also z.B. auch in der Farbe - ich glaube das geht nicht wirklich oder?

Beim Firefox kann ich z.B. die "background-color" ändern - beim Edge dann wieder nicht ...

Diese CSS habe ich jetzt mal zum Spaß meinem Audio-Tag im Kalender gegeben:

Code: Alles auswählen

/* EDIT Tommy added audio CSS */
audio {
  width: 90%; 
  display: block;
  transition:all 0.5s linear;
  box-shadow: 2px 2px 4px 0px #006773;
  border-radius: 30px;
}

audio:hover, audio:focus, audio:active {
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

/* EDIT Tommy added class audio-container */
.audio-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* EDIT Tommy added */
figcaption {
  text-align: center;
  padding-top: 10px;
}
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Vielleicht so: [Link entfernt]
Ich habe ein paar deiner CSS-Anweisungen übernommen ;)
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

sehe ich das richtig, dass Du den Player selbst einfach über eine ID über JavaScript steuerst?

Auf jeden Fall geht das. Das könnte man jetzt vom Design ja auch individuell anpassen. Der sollte eher wie der vom Edge oder so aussehen, eher noch etwas schmaler in der Höhe aber eben auch alle Funktionen weiter besitzen wie:

Play, Pause, Dauer, Ton-Aus, Lautstärke, Download

Ich meinte das allerdings etwas anders. Im Grunde wollte ich den Player vom Browser weiter verwenden - nur eben etwas vom Stil angepasst, also z.B. eine andere Hintergrundfarbe, wie in diesem Beispiel, was gut im Firefox funktioniert - nur eben z.B. nicht im Edge:

https://jsfiddle.net/rajsharma1612/eg6ghhge/

Geänderte Hintergrundfarbe im Firefox-Browser:
Player-Grün.JPG
Player-Grün.JPG (23.41 KiB) 1357 mal betrachtet


Original-Ansicht im Edge-Browser:
Player-Edge.JPG
Player-Edge.JPG (19.67 KiB) 1352 mal betrachtet


Wie man an meiner CSS im Kalender am 22.05.2022 erkennen kann:

CSS-Kalender.JPG
CSS-Kalender.JPG (48.55 KiB) 1337 mal betrachtet

... bekomme ich auch einen Schatten hin und auch runde Ecken. Viel mehr aber eben nicht. Den "Border-Radius" musste ich hierbei bereits mindestens 30px machen, damit der Schatten eben auch gleichermaßen am Firefox und Edge (Chrome) angezeigt wird, da ich ja den Schatten durch die Animation noch verstärke:

CSS-Kalender-Transform.jpg
CSS-Kalender-Transform.jpg (52.66 KiB) 1329 mal betrachtet

Mit anderen Worten - am liebsten würde ich alle Funktionen so beibehalten, nur eben eine CSS finden, die auf alle Browser-Player gleichermaßen wirkt. Hier noch die Ansicht im Edge/Chrome:

Player-Ansicht-Edge-Chrome.jpg
Player-Ansicht-Edge-Chrome.jpg (47.15 KiB) 1305 mal betrachtet
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Moin Tommy,

das war mir schon von vorneherein klar, dass sich das nicht 100%ig im Browser anpassen lässt.
Jeder Browser bringt da sein eigenes Interface mit, im Grunde sind die Buttons, Hintergründe und Texturen dann halt auch nur Bilder, die sich mit CSS in Grenzen ändern lassen.

Als gutes Beispiel kann hier die Darstellung der Checkboxen, Radiobuttons in Formularen herangezogen werden. Bis vor wenigen Jahren konnten diese nur mit viel Aufwand angepasst werden: https://werner-zenk.de/css/radio-button ... talten.php
Heutzutage geht das einfacher: https://werner-zenk.de/css/checkboxen_u ... passen.php
Aber selbst da gibt es kleine Unterschiede zwischen den Browsern.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... dank Dir :)

Das wollte ich eigentlich nur wissen, denn dann brauche ich nicht weiter suchen. Ich bin mit dem Ergebnis so eigentlich auch sehr zufrieden - habe auch alle Handy-Browser erfolgreich getestet.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Die Höhe lässt sich auch einfach über die CSS angeben, somit ist das eigntlich für mich jetzt erledigt:

Code: Alles auswählen

/* EDIT Tommy added audio CSS */
audio {
  width: 300px;
  max-width: 90%;
  height: 30px;  
  display: block;
  transition:all 0.5s linear;
  box-shadow: 2px 2px 4px 0px #006773;
  border-radius: 30px;
}

Player-Ansicht-Edge-Chrome-Höhe-reduziert.jpg
Player-Ansicht-Edge-Chrome-Höhe-reduziert.jpg (50.65 KiB) 1301 mal betrachtet
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Hier ein interessanter Artikel, der sich mit der Darstellung von Auswahllisten befasst: https://blogs.windows.com/msedgedev/202 ... -for-real/
Damit soll es in Zukunft möglich sein, die Auswahlliste individuell anzupassen.

Ich habe das heute im Edge erfolgreich getestet
select1.png
select2.png
select2.png (16.76 KiB) 1297 mal betrachtet

Code: Alles auswählen

<style>
  .my-select-menu::part(button) {
    color: white;
    background-color: #f00;
    padding: 5px;
    border-radius: 5px;
  }

  .my-select-menu::part(listbox) {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid red;
    border-radius: 5px;
  }
</style>

<selectmenu class="my-select-menu">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... ach ja - das wäre ja eine schöne Erweiterung - prima :tu:


An den Browsern (außer Firefox) habe ich übrigens jetzt mit diesem Pseudo-Element die Farbe vom Player nun doch ändern können:

Code: Alles auswählen

/* EDIT Tommy color player at Edge and Chrome */
audio::-webkit-media-controls-panel {
  background-color: lightblue;
}
Player-Ansicht-Edge-Chrome-Lightblue.jpg
Player-Ansicht-Edge-Chrome-Lightblue.jpg (51.33 KiB) 1290 mal betrachtet
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Es gibt eine neue Version des Event-Kalenders.
Ich habe einige CSS-Anweisungen optimiert und die Darstellung der Events im Kalender verbessert.
Außerdem den HTML-Quelltext (den das PHP-Skript ausgibt) optimiert. Das erleichtert mir in Zukunft die Suche nach einem etwaigen Fehler.
browser-quelltext.png

Das Monatsbild wird nun über JavaScript dargestellt, wodurch sich der HTML-Code verkürzt:

Code: Alles auswählen

$monatsbild = '<!-- <div id="monatsbild" data-bildname="img/' . $monat . '.png"></div> -->' . PHP_EOL;
Das Datum habe ich in der lies_mich.txt Datei nur aktualisiert.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Hallo Werner,

leider geht es bei mir nun nicht mehr :crying:

Der gesamte Kalender ist weg, das kommt wohl durch diese Änderung. Lasse ich die alten Zeilen stehen, geht zwar der Kalender es werden aber keinerlei Monatsbilder mehr angezeigt:

Code: Alles auswählen

    // Monatsbilder aktiviert - 12 Bilder im Dateiformat: .png mit den Dateinamen von 1-12.
    // ALT // $monatsbild = '<!-- <div id="monatsbild" style="background-image: url(\'img/' . $monat . '.png\');"></div> -->' . PHP_EOL;
    // ALT // $monatsbild = '<div id="monatsbild" style="background-image: url(\'img/' . $monat . '.png\');"></div>' . PHP_EOL;

    // NEU // $monatsbild = '<!-- <div id="monatsbild" data-bildname="img/' . $monat . '.png"></div> -->' . PHP_EOL;
    $monatsbild = '<div id="monatsbild" data-bildname="img/' . $monat . '.png"></div>' . PHP_EOL;
    $monatsbild = (str_starts_with($monatsbild, '<!--')) ? '': $monatsbild; // ab PHP8
Ich habe auch kein PHP 8 und kann auch vorläufig nicht auf PHP 8 umstellen. 90% der Server verwenden nicht PHP 8 als Standard.

Ich kann also diesem Kalender ab sofort nicht mehr folgen oder es gibt noch eine andere Möglichkeit, was toll wäre.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

ah - ich sehe gerade, Du hast wohl vergessen diese Zeile für PHP8 auch zu deaktivieren:

Code: Alles auswählen

$monatsbild = (str_starts_with($monatsbild, '<!--')) ? '': $monatsbild; // ab PHP8
Deaktiviere ich diese Zeile - dann geht alles.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

>> Korrektur

... es ist in Deinem Download für PHP8 deaktiviert - alles gut, da muss bei mir was schief gelaufen sein. Ich baue das jetzt ein.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... prima :tu:

eingebaut und alles scheint OK :)

https://www.mobirise-tutorials.com/Even ... er-SQLite/

... danke Dir.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Ich habe eine neue Version des Event-Kalender mit SQLite.
Änderungen in PHP, die Funktion xtage() wurde ersetzt, es wird nun, bei einem Event (mit einer Uhrzeit-Angabe) die Zeit in Jahren, Monaten, Stunden und Minuten
im HTML-Title Attribut angezeigt (vor 3 Jahren, vor 8 Monaten, vor 14 Sekunden, in 50 Sekunden, in 25 Minuten, in 7 Stunden, in 2 Jahren (usw.)).

Der Fokus liegt jetzt mehr auf dem Event als auf einer Monatstabelle.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Hallo Werner,

vielen Dank für die Info und danke für die tollen Verbesserungen :tu:

Ich habe diese Änderungen der Version vom 19.05.2022 übernommen:

https://www.mobirise-tutorials.com/Even ... er-SQLite/
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Ich hatte vergessen zu schreiben, dass wenn ein Event, wenn dieser "Ganztägig" ist, dass dieses Wort nicht mehr angezeigt wird!
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 11 Gäste