Kalender - Wetter

Laufschrift mit CSS3 transform property - kontinuierlich ohne Pausen

Diese Laufschrift wird durch CSS kontinuierlich weiterlaufen und dabei keine Leerräume anzeigen. Die Breite der Laufschrift entspricht der Breite des Textes bis maximal 100%. Gefunden auf "stackoverflow.com". Ein Stop mittels Mausüber ist nicht möglich, da es sich um 2 Span-Bereiche handelt die lediglich mit der ganzen (hier 20s) und der halben (hier 10s) Geschwindigkeit laufen.

Hier die CSS - diese gehört in den "Code Editor" der Blocks in den Bereich "CSS Editor":

.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
}

.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 20s linear infinite;
}

.marquee2 span {
animation-delay: 10s;
}

@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}

Hier der Inhalt von der Laufschrift - dieser gehört an beliebige Stelle in den "Code Editor" des Blocks.
Die "Bootstrap5" class="d-flex justify-content-center" zentriert hier den Inhalt:

<div class="d-flex justify-content-center">
<p class="marquee">
<span>Dieser Text läuft ohne Unterbrechung und ohne leeres Textende kontinuierlich weiter - </span>
</p>
<p class="marquee marquee2">
<span>Dieser Text läuft ohne Unterbrechung und ohne leeres Textende kontinuierlich weiter - </span>
</p>
</div>

Um ein Overflow am mobilen Gerät zu verhindern müsst ihr diese Style-Anweisung in den Seiteneinstellungen in den Bereich "Inside <head> code:" kopieren:

<style>
html {
overflow-x: hidden;
}
</style>

Siehe auch meine Seite zur Laufschrift hier .

Verwendung der interaktiven Karte oben

Hier eine Alternative zu "Google Maps", die kein Tracking vornimmt und datenschutzkonform ist, denn die Skripte werden alle direkt auf der eigenen Webseite eingebaut.

Erstellt eure Karte auf der Webseite von dr-dsgvo.de und klickt im Anschluss "Standort übernehmen" und "Download". Kopiert das entpackte Verzeichnis "interaktive_karte" in das Stammverzeichnis eures Mobirise-Projektes auf den Server.

Ihr benötigt diesen Verweis auf die JavaScript Datei "karte.js", den ihr in den Seiteneinstellungen in den Bereich:

Inside <head> code:

kopiert.

<script src="interaktive_karte/karte.js"/></script>

weiterhin dieses <div> zur Anzeige der Karte, die ihr aber erst online sehen könnt. Hierfür habe ich einen einfachen Textblock von Mobirise aus der Kategorie "Article" verwendet und den Beispieltext mit diesem <div> ersetzt:

<div id="drdsgvo_map"></div>

Weiterhin habe ich hier den Button "Vollbild" mit einem Link zu "openstreetmap.org", wo man dann noch mehr Optionen hat, wie z.B. eine Suche, mit einer CSS-Anweisung im Bereich "CSS Editor" vom "Code Editor" ausgeblendet:

.drdsgvo_btn { display:none !important; }
und auch noch mit ein wenig CSS den Stil der Anzeige der Hinweise mit den Links unten rechts angepasst, die nicht entfernt werden dürfen:

img, iframe { display: block; float: left; width: 15px; }

Mobirise Tabelle
"StoreM4"

Siehe meine selbst entwickelte Bootstrap Tabelle
die alle wichtigen Funktionen besser in allen Mobirise Themen darstellt.

Mit v5.8.11 BETA wurde nun endlich der Bug gefixt, der das Ausschalten vom Suchen-Feld in "Mobirise5" Themen verhinderte.
Man kann das Suchen-Feld und damit auch die Wahl der Anzahl der Einträge nun ein- oder ausschalten.
Es sollte aber möglich sein auch die Anzahl der Einträge auf mehr als 10 zu bestimmen,
so wie ich es hier in der Datei /assets/datatables/vanilla-dataTables.min.js getan habe:
`perPageSelect: isSearch ? [5,10,50,100,200,500] : false,`

Eine Vorsortierung 'desc' scheint hier auch nicht mehr möglich zu sein, wie in dieser Tabelle.

Die Anzeige habe ich hier in Deutsch geändert in der JavaScript-Datei:
/assets/datatables/vanilla-dataTables.min.js

Siehe auch: https://fiduswriter.github.io/simple-datatables/documentation/columns.html

Die CSS der Labels und vom Suchen-Feld fehlte hier auch vollkommen, die ich eingesetzt habe.

Weiterhin wird diese Tabelle vollkommen korrupt am Smartphone angezeigt - eine Lösung ist in Arbeit und hier bereits angewendet:

Außerhalb vom <table> Tag:
<div class="dataTable-container table-responsive">

CSS:
.head-item, .body-item {
white-space: nowrap;
}

Suchen:

Datum	Beschreibung	Kategorie	Bemerkung
2017-02-03	Anker setzen	HTML	Sonstiges
2017-03-17	Mitglieder Bereich	PHP	Geschützter Bereich
2017-03-19	Code Editor von Mobirise	Mobirise	Code und Style editieren
2017-03-20	Import, Sicherheit, Updates	Mobirise	Grundkenntnisse
2017-03-21	Publizieren mit Mobirise	Mobirise	Grundkenntnisse
2017-06-20	Worterkennung	CSS	Sonstiges
2017-08-05	Checkbox Auswahl	JavaScript	Transform
2017-08-09	Elemente verstecken	CSS	Bootstrap
2017-08-10	Audio MP3 Player	JavaScript	HTML5
2017-09-01	Formular Mailscript 1	PHP / SMTP	Formular
2017-09-01	Formular Mailscript 2	PHP	Formular
2017-09-01	Formular Generator	PHP	Formular
2017-09-02	Gästebuch	PHP	MySQL
2017-09-03	Kalender & Google Kalender	PHP	MySQL / App
2017-09-04	Kommentare auf Seite	PHP	MySQL
2017-09-05	Checkbox Hack	CSS	Bild Formular Feld
2017-10-01	Fullscreen Hintergrund	CSS / jQuery	Backstretch
2017-10-02	Instagram Feed	Mobirise	Erweiterung
2017-10-03	PDF Upload Script	PHP	Upload
2017-11-05	Modal Layer und Sticky DIV	CSS / JavaScript	Bootstrap
2017-11-10	Tooltip und Buttons	CSS / JavaScript	Bootstrap
2017-12-01	Fotoalbum mit Lytebox	CSS / JavaScript	Lightbox / Lytebox
2017-12-03	Fotoalbum mit Upload	PHP	Upload
2017-12-04	Farbverlauf im Body	CSS	Sonstiges
2017-12-05	Farbverlauf im Container	CSS	Sonstiges
2017-12-10	Suchen im Projekt	PHP	Sonstiges
2018-01-07	Keyframes	CSS	Animation
2018-01-17	Testseiten	Mobirise	Versuche
2018-01-18	Accelerated Mobile Pages	AMP	Mobil Optimiert
2018-01-19	Shoutbox	PHP	SQLite
2018-01-26	Gästebuch	PHP	SQLite
2018-02-13	Mega Menü	CSS / JavaScript	Bootstrap
2018-02-13	Formular mit Checkbox	PHP	Formular
2018-04-16	Tabellen	Mobirise	Tabellen sortieren
2018-04-27	Datepicker	CSS / JavaScript	Bootstrap
2018-06-14	Datenschutz Hinweis	CSS / JavaScript	JavaScript
2018-07-03	jQuery Bilder Galerie	CSS / JavaScript	jQuery Anwendung
2018-08-10	CSS Grid Test	CSS	Sonstiges
2018-08-15	Schlagwörter Box	PHP	Sonstiges
2018-08-15	Responsive Hotspots	CSS	Sonstiges
2018-09-01	Content Management System	CMS	jocms
2018-09-02	Bootstrap Text Slider	CSS / JavaScript	Bootstrap
2018-09-05	Horizontales Akkordeon	CSS	Bootstrap
2018-09-09	Page Overlay	CSS / JavaScript	Sonstiges
2018-10-02	Formular Eingabe zählen	CSS / JavaScript	Formular
2018-10-04	Events online eingeben	PHP	SQLite CMS
2018-11-07	Bilder rotierend drehen	CSS	Transform
2018-11-11	Datenschutz Hinweis AMP	AMP	Cookie Alert
2018-11-18	Count Up / Down ab Datum	JavaScript	Sonstiges
2018-11-19	Uhr analog anzeigen	CSS / JavaScript	Sonstiges
2018-11-23	Adventskalender	PHP / JavaScript	Schneefall Feuerwerk
2018-12-14	Fullscreen Background Video	CSS	Video mit Ton
2018-12-28	WOW Slider	Mobirise	Erweiterung
2019-02-09	Animierte Blasen und Ballons	CSS	Animation
2019-02-16	Slideout / Flyout Box	CSS	Sonstiges
2019-02-21	Bilder Galerie ohne Lightbox	CSS	Sonstiges
2019-03-04	Cards mit einheitlicher Höhe	CSS	Bootstrap
2019-03-13	Image Float und Marquee	CSS Ticker	Lightbox / Laufschrift
2019-03-13	Visual Lightbox	CSS / JavaScript	Lightbox / Lytebox
2019-03-16	Formular Editor	Mobirise Form Builder	reCAPTCHA v3
2019-03-22	Social Feed	Mobirise	Facebook, Twitter, usw.
2019-05-12	Online Website Builder	Mobirise Web	Online Builder
2019-05-31	Popup Builder	Mobirise	Modal Lightbox
2019-06-04	Clip Path CSS	CSS / polygon	Sonstiges
2019-07-18	Video in Mobirise	HTML5	Eigenes Video
2019-07-20	Row Reverse	Mobirise	Navi umkehren
2019-08-01	Timeline Swiper	CSS / JavaScript	Slider
2019-08-05	Parallax & Fixed	CSS	Hintergrundbild
2019-08-14	Akkordeon Tabs Link	JavaScript	Sonstiges
2019-08-15	Karussell Slider	CSS / JavaScript	Bootstrap
2019-11-05	Formular Generator & Bootstrap	PHP / Bootstrap	Formular & Datum
2019-12-04	Slideout Bereich	JavaScript	Sonstiges
2019-12-06	Slideshow	CSS / JavaScript	Sonstiges
2019-12-16	Tabellen Anker	CSS	Sprungmarken setzen
2020-01-06	Nachrichten Skript	PHP	SQLite
2020-01-12	Iframe dynamisch	JavaScript	Iframe
2020-02-03	Geodaten Foto lesen	PHP	Metadaten Exif
2020-02-15	Bildvergleich vorher/nachher	CSS / JavaScript	jQuery Anwendung
2020-04-09	CSS Modal Popup mit Cookie	CSS / JavaScript	Sonstiges
2020-04-17	Vertikale Menüleiste	CSS / Bootstrap	Navigation
2020-05-06	Timeline erweitern	Mobirise	Timeline bearbeiten
2020-06-07	Eigener Slider oder Fader	CSS / Bootstrap	Bootstrap
2020-06-10	Galerie Anpassungen	CSS / Bootstrap	Mobirise Lightbox
2020-09-11	Nachrichten Skript	PHP	MySQL
2020-09-24	Seitenschutz	PHP	MySQL
2020-10-08	Suchen mittels Google	JavaScript	Sonstiges
2020-10-12	Events im Popup einschalten	PHP	SQlite CMS
2020-12-06	Mobirise Forum	Mobirise-Tutorials	Benutzer Forum
2020-12-28	WhatsApp Button	Mobirise	Chat
2021-04-11	Uploads und CSV-Datei	PHP	Mehr Formulare
2021-04-12	Drucken ausgewählter Blöcke	CSS	Seiten drucken
2021-05-02	Netzwerkadresse am PC	Windows Ordner	FTP Daten
2021-05-06	Arclab Formular Generator	PHP / SMTP	Formular
2021-06-24	Download Archiv	PHP	SQLite Datenbank
2021-11-18	Eigenes Background Video	CSS / HTML5	Eigenes Video
2022-01-03	Kalender mit SQLite	PHP	SQLite Datenbank
2022-03-31	Karte als Alternative zu Maps	JavaScript	Google Maps Alternative
2022-05-25	Eigenes Akkordeon	CSS	Sonstiges
2022-07-04	Link Animation Navi	CSS	Transform
2022-07-26	Lokale Fonts verwenden	CSS	Google Fonts ersetzen
2022-07-30	Smart Cart	Mobirise	PayPal, Stripe, WhatsApp
2022-08-07	Breadcrumb Navigation	CSS / Bootstrap	Navigation Pfade
2022-09-06	Popup Chat	Messenger Dienste	Facebook, WhatsApp
2022-10-01	Music Player	Webplayer	SoundCloud, Spotify
2022-12-02	Wechselbilder nach Tageszeit	JavaScript	Hintergrundbild
2022-12-12	Video MP4 im Popup	Mobirise / JavaScript	Popup Builder
2023-01-22	Password Protect	Mobirise Erweiterung	Passwortschutz Seiten
2023-01-29	Cookies Alert Testseiten	Mobirise Erweiterung	Cookie Hinweis
2023-02-02	Lupe über Bild	jQuery	Sonstiges
2023-02-21	Masonry Galerie & Lightbox	CSS / jQuery	Lightbox / Lytebox
2023-04-07	Sidebar Fixiert Social Media	CSS	Sonstiges
2023-05-01	Slider Proportional Bild & Video	CSS	Bootstrap
2023-06-06	Content Management System	CMS	DynPage
2023-07-30	Akkordeon alphabetisch sortiert	Mobirise / JavaScript	Sonstiges
2023-08-14	Media Videos	CSS	YouTube Videos
2023-08-25	Liste und Tabelle mit Preisen	CSS	Sonstiges
2023-09-14	Sound & Animation mit Maus	CSS / JavaScript	Sonstiges
2023-10-01	Offcanvas Menü und Sidebar	Bootstrap / JavaScript	Auslappbare Bereiche
2023-10-03	Künstliche Intelligenz AI	Website Builder	Mobirise AI / KI
2023-10-09	Tabelle scrollbar und sortierbar	Bootstrap / JavaScript	Bootstrap Table
2023-11-08	Hervorhebung vom aktiven Menü	CSS / JavaScript	Highlight Navigation

Anzeige von 120 Einträgen (gefiltert von 121 Gesamteinträgen)

Kalender Tabelle
Thema Mobirise5
v5.9.8

Google Kalender responsive angepasst

Google Maps

Diese Karte wird nur nach Zustimmung vom Cookie Alert angezeigt

Counter aus dem Thema
AgencyM4

Bis zum Jahr 2024 sind es noch:

Ein Nummern-Block vom Thema AgencyM4

166

Kunden

210

Projekte

357

Empfehlungen

Wetter Online

Laufschrift - CSS Ticker

Laufschrift mit CSS3 transform property - kontinuierlich ohne Pausen

Interaktive Karte von dr-dsgvo.de

Verwendung der interaktiven Karte oben

Mobirise Tabelle
"StoreM4"

YouTube

Video Test

Kalender TabelleThema Mobirise5v5.9.8

Google Kalender responsive angepasst

Google Maps

Diese Karte wird nur nach Zustimmung vom Cookie Alert angezeigt

Counter aus dem ThemaAgencyM4

Bis zum Jahr 2024 sind es noch:

Ein Nummern-Block vom Thema AgencyM4

166

Kunden

210

Projekte

357

Empfehlungen

Wetter Online

Laufschrift - CSS Ticker

Laufschrift mit CSS3 transform property - kontinuierlich ohne Pausen

Interaktive Karte von dr-dsgvo.de

Verwendung der interaktiven Karte oben

Mobirise Tabelle "StoreM4"

YouTube

Video Test

Kalender Tabelle
Thema Mobirise5
v5.9.8

Counter aus dem Thema
AgencyM4

Mobirise Tabelle
"StoreM4"