Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


slideout nicht in Mobi 4
#1
Hallo,
ich hatte vor einiger Zeit hier so ein Slideout Fenster gebaut
http://hautarztzentrum-gummersbach.de

Das scheint in Mobi4/AgencyM4 nicht zu laufen.
Kennt jemand eine Alternative?

Frank
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
ich hab Agency M4 nicht, Was ist mit dem Flyout darin anders als in dem Standard M4 Template?

was genau funzt nicht?
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8


http://www.fotoatelier-essen.de
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Moin,

ich hatte mal diese Lösungen beschrieben (aber noch nicht in Mobirise eingebaut).

Diese reine CSS - Lösung solte auf jeden Fall funzen:

http://www.nof-tutorials.com/Responsive-...index.html


Unten noch zwei weitere Lösungen mit zusätzlichem JavaScript:

http://www.nof-tutorials.com/Formular-Sl...orial.html

http://www.nof-tutorials.com/Formular-Slider/index.php
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Es geht einfach gar nichts!
Ich habe das mal hier eingebaut.
http://www.afripix-web.de/testfeld.php

Das "Grundgerüst" erscheint kurz und verschwindet dann.
Eine wirklich dumme Sache, denn für News nutze ich das gerne.

Es scheint auch nicht am Z-Index zu liegen. Auch ohne das Titelbild erscheint nix.

----
Ahm moment. Tommys Antwort hatte ich noch nicht gelesen...

Nö, auch nicht!
Wo ist mein fehler?

http://www.afripix-web.de/testfeld2.php

Die letzte Lösung scheint zu funzen
http://www.afripix-web.de/testfeld3.php
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
...also gehen tut da schon was. Man muss sich da nur wieder einarbeiten und lange probieren, bis es so ist wie man es haben möchte.

Ich habe mal schnell nach diesem Beispiel ...

http://www.nof-tutorials.com/Formular-Sl...orial.html

... was hier eingebaut. In diesem Fall vertikal. Klicke auf Button "Slide Toggle"

http://www.mobirise-tutorials.com/Testse...ungen.html

CSS (im Head):

Code:
<style type="text/css">
   .box{
       float:left;
       overflow: hidden;
       background: #000;
       border-style: solid;
       border-width: 1px 1px 1px 1px;
       border-color: #fff;
       border-radius: 0px 0px 5px 5px;
       box-shadow: 5px 5px 5px #888888;
       width: 600px;
       max-width: 95%;
       display: none;
       margin: auto;
       left: 0; right: 0;
       position: absolute;
       z-index: 2000;
   }
   .box-inner{
       width: 100%;
       padding: 10px;
   }
</style>

JavaScript (end of <body>):

Code:
<!-- Slider von oben nach unten -->
<script type="text/javascript">
   $(document).ready(function(){
       $(".slide-toggle").click(function(){
           $(".box").slideToggle(1000);
           });
       });
</script>

HTML (beliebig im Code Editor):

Code:
               <button type="button" class="slide-toggle">Slide Toggle</button>
               <div class="box">
                   <div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam.</div>
               </div>


Das muss dann alles, von der Position, noch angepasst werden. Dazu habe ich gerade (und heute) keine Zeit. Wenn Du da was machst, dann schreibe das mal hier auf.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
... ich habe die CSS und alles noch etwas angepasst - klicke auf obersten Button

"Slide Toggle"

http://www.mobirise-tutorials.com/Testse...ungen.html

In der offenen Box ist ein Link zu meiner: HTML, CSS und JS zum kopieren, denn ich habe nun die CSS direkt in den Code-Editor kopiert und somit in die Mobirise-eigene CSS-Datei integriert. So stellt sich dann diese Box auch gleich richtig auf der Arbeitsseite von Mobirise dar.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Hm, die Wirkungsweise vom Code scheint auf den Block beschränkt zu sein, in dem er eingegeben wurde.

http://www.afripix-web.de/testfeld3.php

So ist das kappes!


OK, der Code muss nicht in eine HTML-Box sondern ans Ende vom Body!
http://www.afripix-web.de/testfeld4.php
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
... das ist doch alles nur eine Frage der Einstellungen. Hake "Parallax" (in den Zahnrad-Einstellungen) ab und schon geht es auch in der "<section>". Die hat diese Class mit dabei:

Beispiel (jetzt) bei mir:

http://www.mobirise-tutorials.com/Testse...ungen.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Du musst die CSS noch ändern (Prozent-Angaben), denn sonst geht das nicht richtig am Handy. Guckst Du hier:

http://www.mobirise-tutorials.com/Testse...idebox.txt
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
So,
wenn der Code am Ende des Body steht, klappt es auch mit Parallax und Scroll-Animation
Der css-Code muss dann in den header.
Habe es jetzt so gebaut, dass der Text in der Box aus Dynpage kommt.

Letzte Version ist hier
http://www.afripix-web.de/testfeld4.php

Das mit dem Greyout bekomme ich gerade nicht hin!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
... also das Abdunkeln nach Deinem Skript ist kein Problem:

https://www.askingbox.de/tutorial/hinter...out-effekt

... ich schaffe es aber gerade nicht den z-index einzustellen. Mein Button "Slide Toggle" ist dann unter dem Layer und ic komme nicht dran :eek:


.jpg  ABDUNKELN.JPG (Größe: 172,66 KB / Downloads: 13)



... jetzt ist aber mein Samsung Galaxy S9 gekommen und ich muss für die nächsten 3 Tage spielen :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
S9?
Oha, ich finde ein S6 gerade ganz toll...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Moin,

aber sage mal - warum nimmst Du nicht eigentlich gleich den Bootstrap - Layer "Modal", das ist doch genau das gleiche und es wird auch gleich abgedunkelt.

http://www.mobirise-tutorials.com/Portfo...Modal.html

Geht automatisch (beim Öffnen der Seite), über Buttons oder Links - wie man will.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
EIGENTLICH, wolle ich ja dieses Slideout haben - also "eigentlich".
Da war jetzt Deine Lösung mit dem Fenster erstmal eine Notlösung.
Das modale Dingsbums habe ich ja auf der Referenzseite.

Wie ist das S9?
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Moin.
Hänge mich mal rein.

@ stobi
Deine vertikale Version gefällt mir ausgesprochen gut.

@tommy
Habe auch deine Version eingebaut. Hat alles soweit geklappt.
Den Button habe ich mit folgendem CSS Code zentriert:
Code:
.btn-primary{
   margin-left: 870px;

}
Ich denke mal da gibt es eine bessere Lösung. margin: 0 auto hat nicht gefunzt.

Auf der Suche nach 'nem Slide Out habe ich den Link gefunden:
https://codepen.io/jr-cologne/pen/BLoqwQ

Funktioniert bis zu dem Moment wo sich nach klick auf den Button was öffnen soll.
Nichts geht da offen. Das Body im HTML habe ich entfernt.
Gruß
Thomas

Mobirise 4.7.7 + Code Editor
Corel X8, PSE 14, jAlbum
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
  PHP code in Mobi psciga 3 108 14.06.2018, 17:21
Letzter Beitrag: Tommy Herrmann
  2 Mobi-Blöcke verheiraten? stobi_de 4 84 13.06.2018, 14:50
Letzter Beitrag: stobi_de
  Help-Anfrage in Mobirise nicht möglich stobi_de 12 536 11.06.2018, 10:55
Letzter Beitrag: stobi_de
  Mobirise-Kalender von Werner funzt nicht Thomas Saake 19 397 04.06.2018, 08:18
Letzter Beitrag: Thomas Saake
  Mobirise-Cookie Alert wird nicht angezeigt Thomas Saake 3 143 26.05.2018, 11:19
Letzter Beitrag: Tommy Herrmann
  Seitenerzeugung nicht mehr möglich stobi_de 7 154 23.05.2018, 20:48
Letzter Beitrag: stobi_de
  Veröffentlichte Homepage funktioniert nicht Spritpit 4 136 13.05.2018, 18:24
Letzter Beitrag: barbara0701
  Datepicker in Mobi-Form ? stobi_de 14 250 29.04.2018, 07:49
Letzter Beitrag: Tommy Herrmann
  Php-Webmailer und Mobi - neues Problem stobi_de 11 202 27.04.2018, 11:24
Letzter Beitrag: WRH
  Mobirise-Hamburger Button und Cookies nicht ok Thomas Saake 5 448 09.04.2018, 19:49
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!