Das ist nur eine Testseite: Google Maps | YouTube Video
This is a test page only
Einfach die Breite vom Iframe-Code auf 100% setzen (width="100%").
Deine Display-Größe ist:
Wetter Online
Den Iframe-Code für dieses Widget könnt Ihr ganz einfach bei WetterOnline.de generieren lassen und in jeden beliebigen Block einfügen.
Dieser Text läuft ohne Unterbrechung und ohne leeres Textende kontinuierlich weiter -
Dieser Text läuft ohne Unterbrechung und ohne leeres Textende kontinuierlich weiter -
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 .
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;
}
perPageSelect: isSearch ? [5,10,50,100,200,500] : false,
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 & Captcha |
2017-09-01 | Formular Mailscript 2 deaktiviert | 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 | |
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-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 CMS | MySQL |
2020-09-24 | Seitenschutz | PHP CMS | 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 | JavaScript / jQuery | Image Zoom |
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 |
2023-11-28 | Kommentar-Box (neu) | PHP | MySQL |
2024-01-10 | Nachrichten Skript PHP News | PHP Jabbers CMS | MySQL |
2024-01-20 | Buchungskalender | PHP Jabbers CMS | MySQL |
2024-02-22 | Simple CMS | PHP Jabbers CMS | MySQL |
2024-02-28 | Fotogalerie CMS | PHP Jabbers CMS | MySQL |
2024-03-24 | Letzte Änderung Website | JavaScript / PHP | Sonstiges |
2024-03-28 | Menüleiste statisch | CSS | Navigation |
2024-04-11 | Formular Generator | PHP Jabbers CMS | MySQL Formular |
2024-04-20 | Blogging Anwendung | PHP Jabbers CMS | MySQL Blog |
2024-04-28 | Klickzähler | JavaScript / PHP | Counter |
2024-05-05 | Mobirise Parameter | CSS | Sonstiges |
2024-06-26 | Alter & min-max Datum | JavaScript | Sonstiges |
2024-07-16 | Bildschirmkoordinaten | JavaScript | Sonstiges |
2024-07-17 | Responsive Hotspots | CSS / JavaScript | Sonstiges |
2024-08-12 | Downloads erzwingen | .htaccess | Sonstiges |
2024-08-16 | Lightbox KI generiert | CSS / JavaScript | KI / AI generiert |
2024-08-28 | Test Online Editor (CMS) | Mobirise Online | CMS |
2024-10-01 | Animation on scroll | CSS / JavaScript | KI / AI generiert |
2024-10-04 | Position Beschriftung | CSS | Sonstiges |
2024-10-08 | Spamschutz eigenes Mailscript | PHP | Formular Captcha |
2025-01-02 | Metallisch Goldene Schrift | CSS | Sonstiges |
2025-01-07 | PHP get Variable | PHP | PHP Aktion |
Test für die Funktion eines Background Videos
Hier als neues "data-bg-video"