Kalender Wetter
Thema Mobirise5
v5.6.8

Das ist nur eine Testseite
This is a test page only

Google Kalender responsive angepasst

Einfach die Breite vom Iframe-Code auf 100% setzen (width="100%").

Deine Display-Größe ist: 

Wetter

Wetter Online

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.

Laufschrift - CSS Ticker

Dieser Text läuft ohne Unterbrechung und ohne leeres Textende kontinuierlich weiter - 

Dieser Text läuft ohne Unterbrechung und ohne leeres Textende kontinuierlich weiter - 

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 .

Interaktive Karte von dr-dsgvo.de

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;
}

Tabelle mit Filtern

Bug in Table Theme "CommerceM4"

The table below from the "CommerceM4" theme does not work in the default "Mobirise5" theme.
You can turn off the search box and that also works in the Mobirise working view, but not after publishing.

Table With Filters

Bug with search field

#FIRST NAMELAST NAMEUSER NAMESALARY
1JeannaSchmal@jeannaschmal$647.000
2JeannaSchmal@jeannaschmal$517.000
3JeannaSchmal@jeannaschmal$335.000
4JeannaSchmal@jeannaschmal$817.000
5JeannaSchmal@jeannaschmal$327.000
6JeannaSchmal@jeannaschmal$327.000
7JeannaSchmal@jeannaschmal$327.000
8JeannaFett@jeannaschmal$327.000
9JeannaSchmal@jeannaschmal$327.000
10JeannaSchmal@jeannaschmal$327.000
11JeannaSchmal@jeannaschmal$327.000

Reveal Effect has been fixed for standard theme Mobirise 5
© Copyright Mobirise-Tutorials