Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Erweiterung der Timeline bei Mobirise
#1
Hallo zusammen,

wie kann ich die Timeline bei Mobirise erweitern, so dass ich nicht 12 Einträge machen kann, sondern mehr?
Aktuell bin ich leider nur auf 12 beschränkt.

Wer hat hier eine Lösung?

Danke und Grüsse
Marco


Angehängte Dateien
.jpg  Unbenannt.JPG (Größe: 136,22 KB / Downloads: 15)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin Marco,

Du kannst mit Hilfe vom Mobirise "Code Editor" den Code vom Block editieren.

Also z.B. auf 24 erweitern, kopiere dann die 12 Optionen oben im Code und ändere diese dann auf z.B. 13 bis 24 (oder wieviele auch immer).

Zitat:<option value="13">13</option>
<option value="14">14</option>

usw., usw., usw.

Dadurch kannst Du dann auch an den "Block-Optionen" (Zahnrad) entsprechend Deine Wahl bei "Ereignisse" treffen:


.jpg  Timeline_Optionen_Wert.JPG (Größe: 175,27 KB / Downloads: 9)



... ebenso müsstest Du dann für jede Option den dazugehörigen HTML-Code erweitern und die Variablen "timelinesAmount" dementsprechend auch für jeden neuen Eintrag ändern.

Zitat:            <!--13-->
            <div class="row timeline-element reverse" mbr-if="timelinesAmount>10" mbr-class="{'separline': !reverseTimeline &amp;&amp; timelinesAmount > 13 || reverseTimeline &amp;&amp; timelinesAmount > 12}">
                <div class="timeline-date-panel col-xs-12 col-md-6  align-left">
                    <div class="time-line-date-content">
                      <p class="mbr-timeline-date mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showDates" data-app-selector=".mbr-timeline-date">
                          11. November 2028
                        </p>
                    </div>
                </div>
                <span class="iconBackground"></span>
                <div class="col-xs-12 col-md-6 align-right">
                    <div class="timeline-text-content">
                        <h4 class="mbr-timeline-title pb-3 mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".mbr-timeline-title">
                            Out-of-the-Box Design
                        </h4>
                        <p class="mbr-timeline-text mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".mbr-timeline-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
                        </p>
                    </div>
                </div>
            </div>
            <!--13-->

... also weitere 12 x kopieren (oder wie oft auch immer):


.jpg  Timeline-HTML.JPG (Größe: 165,05 KB / Downloads: 12)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Im Code Editor mal schauen.

Code:
<option value="12">12</option>

Da einfach diese Zeile kopieren und anstatt "12" einfach "13" eingeben 
und so weiter ....

Code:
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>

zu langsam :-(
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Ich habe es probiert mit dem Code anzupassen was gemäss Abbildung auch funktioniert hat.
Einzige Problematik ist nur noch, dass alles links ist und nicht versetzt wie unten.
Und das obwohl ich im Code überall wo links gestanden ist, ausgetauscht habe mit rechts.

Wie kann ich dies so programmieren, dass jeder Block versetzt ist, also links, rechts, links, rechts....


Angehängte Dateien
.jpg  Unbenannt.JPG (Größe: 128,08 KB / Downloads: 8)

.jpg  Unbenannt_3.JPG (Größe: 64,87 KB / Downloads: 9)

.jpg  Unbenannt_2.JPG (Größe: 115,49 KB / Downloads: 7)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Moin,

... also bei mit geht das. Du musst da natürlich höllisch beim Neueintrag der Werte aufpassen. Außerdem gibt es deswegen eine zusätzliche class="reverse", die die Box nach rechts stellt und dementsprechend an jedem zweiten Eintrag angebracht ist:

Zitat:<div class="row timeline-element reverse">

Hier habe ich die Timeline von 12 auf 16 Einträge erhöht:

http://www.mobirise-tutorials.com/Testse...eline.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
... und warum setzt du nicht einen weiteren Block mit einer Timeline darunter?  Wink
mfg.
|---------------------------------
|Glück ist ... kein Pech zu haben.
|---------------------------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
(06.05.2020, 17:55)immergut schrieb: ... und warum setzt du nicht einen weiteren Block mit einer Timeline darunter?  Wink

... weil dann die Timeline unterbrochen wird (meine ich aus der Erinnerung).
Wenn Dein Pferd tot ist, steig ab.

Hab auf dem Rechner: NOF11, NOF12, NOF2015, Windows 10, Mozilla Firefox,  Chrome, Edge, GIMP 2.10.18; Mobirise 4.12.3, Code-Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Setze ich eine neue Timeline darunter, dann fehlt die Linie welche abgeschnitten ist. Undecided
Höchstens man könnte diese erweitern so dass es durchläufig ist.

Ich habe nun folgende Codes gemacht für die Erweiterung:

<option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12" selected="">12</option>
            <option value="13">11</option>
            <option value="14">11</option>


<!--1-->
            <div class="row timeline-element reverse" mbr-class="{'separline': !reverseTimeline &amp;&amp; timelinesAmount > 1}">
                <div class="timeline-date-panel col-xs-12 col-md-6  align-left">       
                    <div class="time-line-date-content">
                        <p class="mbr-timeline-date mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showDates" data-app-selector=".mbr-timeline-date"><b>
                            2012</b></p>
                    </div>
                </div>
          <span class="iconBackground"></span>
            <div class="col-xs-12 col-md-6 align-right">
                <div class="timeline-text-content">
                    <h4 class="mbr-timeline-title pb-3 mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".mbr-timeline-title">Einführung Digitaldruck</h4>
                    <p class="mbr-timeline-text mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".mbr-timeline-text">
                        ROPRESS bietet qualitätsvollen Digitaldruck an, um Kleinauflagen in guter Qualität zu günstigen Preisen produzieren zu können.&nbsp;Ropress wählt je ein Projekt im Inland und im Ausland, wohin die CO2-Kompensationsgelder fliessen. </p>
                </div>
            </div>
            </div>
        <!--2-->
            <div class="row timeline-element reverse" mbr-class="{'separline': !reverseTimeline &amp;&amp; timelinesAmount > 1}">
                <div class="timeline-date-panel col-xs-12 col-md-6  align-left">       
                    <div class="time-line-date-content">
                        <p class="mbr-timeline-date mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showDates" data-app-selector=".mbr-timeline-date"><b>
                            2012</b></p>
                    </div>
                </div>
          <span class="iconBackground"></span>
            <div class="col-xs-12 col-md-6 align-right">
                <div class="timeline-text-content">
                    <h4 class="mbr-timeline-title pb-3 mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".mbr-timeline-title">Einführung Digitaldruck</h4>
                    <p class="mbr-timeline-text mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".mbr-timeline-text">
                        ROPRESS bietet qualitätsvollen Digitaldruck an, um Kleinauflagen in guter Qualität zu günstigen Preisen produzieren zu können.&nbsp;Ropress wählt je ein Projekt im Inland und im Ausland, wohin die CO2-Kompensationsgelder fliessen. </p>
                </div>
            </div>
            </div>
            <!--3-->
            <div class="row timeline-element reverse" mbr-class="{'separline': !reverseTimeline &amp;&amp; timelinesAmount > 1}">
                <div class="timeline-date-panel col-xs-12 col-md-6  align-left">       
                    <div class="time-line-date-content">
                        <p class="mbr-timeline-date mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showDates" data-app-selector=".mbr-timeline-date"><b>
                            2012</b></p>
                    </div>
                </div>
          <span class="iconBackground"></span>
            <div class="col-xs-12 col-md-6 align-right">
                <div class="timeline-text-content">
                    <h4 class="mbr-timeline-title pb-3 mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".mbr-timeline-title">Einführung Digitaldruck</h4>
                    <p class="mbr-timeline-text mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".mbr-timeline-text">
                        ROPRESS bietet qualitätsvollen Digitaldruck an, um Kleinauflagen in guter Qualität zu günstigen Preisen produzieren zu können.&nbsp;Ropress wählt je ein Projekt im Inland und im Ausland, wohin die CO2-Kompensationsgelder fliessen. </p>
                </div>
            </div>
            </div>


Aber es erscheint alles noch links und nicht versetzt.... Huh Huh
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Anbei ein Screen Shot

Habe ich vergessen bei der letzten Nachricht mitanzuhängen....


Angehängte Dateien
.jpg  Unbenannt_1.JPG (Größe: 104,4 KB / Downloads: 9)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
.... ich habe gerade keine Zeit - Termin beim Friseur  :hurra:

... natürlich kann man keine 2 Timeline-Blöcke untereinander setzen, wie soll das gehen? Da passt doch nicht nur die Trennlinie nicht mehr, sondern der gesamte Block hat doch z.B. die Parameter und auch Abstände oben und unten. schon die Section-Tags trennen die Blöcke voneinander.

Du hast aber auch überall "reverse" in der Class stehen. Das setzt den Block auf die andere Seite. Das muss bei jedem 2. Eintrag raus.

Zitat:<div class="row timeline-element reverse" mbr-class="{'separline': !reverseTimeline &amp;&amp; timelinesAmount > 1}">

... so wie ich das bereits in meinem Beitrag #5 (oben) beschrieben hatte.

... wenn Du also bei Deinem Code mal am mittleren Eintrag (Nummer <!--2-->) das "reverse" aus dieser Class entfernst, dann würde der Code, den Du oben gepostet hattest, so aussehen:

Code:
    <!--1-->
      <div class="row timeline-element reverse" mbr-class="{'separline': !reverseTimeline &amp;&amp; timelinesAmount > 1}">
        <div class="timeline-date-panel col-xs-12 col-md-6 align-left">   
          <div class="time-line-date-content">
            <p class="mbr-timeline-date mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showDates" data-app-selector=".mbr-timeline-date"><b>
              2012</b></p>
          </div>
        </div>
    <span class="iconBackground"></span>
      <div class="col-xs-12 col-md-6 align-right">
        <div class="timeline-text-content">
          <h4 class="mbr-timeline-title pb-3 mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".mbr-timeline-title">Einführung Digitaldruck</h4>
          <p class="mbr-timeline-text mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".mbr-timeline-text">
            ROPRESS bietet qualitätsvollen Digitaldruck an, um Kleinauflagen in guter Qualität zu günstigen Preisen produzieren zu können.&nbsp;Ropress wählt je ein Projekt im Inland und im Ausland, wohin die CO2-Kompensationsgelder fliessen. </p>
        </div>
      </div>
      </div>

    <!--2-->
      <div class="row timeline-element" mbr-class="{'separline': !reverseTimeline &amp;&amp; timelinesAmount > 1}">
        <div class="timeline-date-panel col-xs-12 col-md-6 align-left">   
          <div class="time-line-date-content">
            <p class="mbr-timeline-date mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showDates" data-app-selector=".mbr-timeline-date"><b>
              2012</b></p>
          </div>
        </div>
    <span class="iconBackground"></span>
      <div class="col-xs-12 col-md-6 align-right">
        <div class="timeline-text-content">
          <h4 class="mbr-timeline-title pb-3 mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".mbr-timeline-title">Einführung Digitaldruck</h4>
          <p class="mbr-timeline-text mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".mbr-timeline-text">
            ROPRESS bietet qualitätsvollen Digitaldruck an, um Kleinauflagen in guter Qualität zu günstigen Preisen produzieren zu können.&nbsp;Ropress wählt je ein Projekt im Inland und im Ausland, wohin die CO2-Kompensationsgelder fliessen. </p>
        </div>
      </div>
      </div>

      <!--3-->
      <div class="row timeline-element reverse" mbr-class="{'separline': !reverseTimeline &amp;&amp; timelinesAmount > 1}">
        <div class="timeline-date-panel col-xs-12 col-md-6 align-left">   
          <div class="time-line-date-content">
            <p class="mbr-timeline-date mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showDates" data-app-selector=".mbr-timeline-date"><b>
              2012</b></p>
          </div>
        </div>
    <span class="iconBackground"></span>
      <div class="col-xs-12 col-md-6 align-right">
        <div class="timeline-text-content">
          <h4 class="mbr-timeline-title pb-3 mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".mbr-timeline-title">Einführung Digitaldruck</h4>
          <p class="mbr-timeline-text mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".mbr-timeline-text">
            ROPRESS bietet qualitätsvollen Digitaldruck an, um Kleinauflagen in guter Qualität zu günstigen Preisen produzieren zu können.&nbsp;Ropress wählt je ein Projekt im Inland und im Ausland, wohin die CO2-Kompensationsgelder fliessen. </p>
        </div>
      </div>
      </div>
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
...viel Spass beim Frisur.

Sollte nun geklappt haben. Danke für den Tipp. Smiling 

Ich gebe die Webseite heute zum internen Testlauf frei so dass mehrere Mitarbeiter diese testen können.
Je nachdem welche Fragen oder Problematiken noch auftauchen würden, melde ich mich wieder bei Dir...

Ist immer ein spannender Prozess solch ein Webseiten Relaunch... :D thumbs up 

Die Seite ist ja vorerst erst über den FTP Server verfügbar.
Ist es korrekt, dass die Formulare erst funktionieren nachdem die Seite offiiell veröffentlich wurde?

Denn wenn ich jetzt ein Testformular absenden möchte, passiert nichts.

Grüsse
Marco
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
ja - Formulare solltest Du online testen. Die von Mobirise auch.

Du solltest für Fragen besser immer einen Link zu Deiner Seite senden (egal wie unfertig diese ist), dann ist es viel leichter zu helfen.

Mache doch dann bitte auch für neue (andere) Probleme, bzw. Themen einen neuen Thread mit der dazu wieder passenden Überschrift auf.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Fehlende Länderkennung im Quelltext von Mobirise AndyNeu 20 721 18.12.2019, 13:04
Letzter Beitrag: Tommy Herrmann



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!