Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Flyout ausblenden?
#1
Hallo,
neben all der Diskussion um die Preispolitik von Mobi, die ich nicht wirklich angebracht finde, habe ich so am Rand mal wieder einen fachlichen Knackpunkt.

Ich verwende auf der Zahnarztseite das Flyout vom Tommy
https://www.zahnarztpraxis-tiz.de/index.php

Da das doch als fixed ziemlich stört, wollte ich es zunächst einfach absolut machen - aber weit gefehlt. Klappt überhaupt nicht. Das Ding verschwindet auf Nimmerwiedersehen.

Anderer Versuch: mit Javascript ausblenden an der Pos 1000.
habe ich auch schonmal gemacht (irgendwo?).
Das hier klappt sonderbarerweise nicht
<script>
$(window).scroll(function()
{
var y = $("#slideout").scrollTop();
if (y > 1000)
{
$("#slideout").fadeOut('slow');
}
if (y < 1000)
{
$("#slideout").fadeIn('slow');}
}
}
</script>
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

Hier ist was mit Position "absolute":

https://codepen.io/CSWApps/pen/zgtcf

Hatte ich damals mal hier in NOF eingebaut (dort aber auf "fixed" umgeschieben):

http://www.nof-tutorials.com/Responsive-Flyout-CSS/

Vielleicht kannst Du das für Deine Zwecke anpassen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Moin Tommy, auch schon wach Smiling
Ich habe das bestehende Flyout in ein paar Projekten drin, die noch in Mache sind.
Wäre ziemlich blöd, wenn ein Kunde sagt: das soll beim Scrollen verschwinden und ich müsste das dann überall austauschen - Du verstehst!

Außer Werner sind wir alle hier halt nicht die Javascript - Könige.
Aber das sollte doch gehen?

Frank

PS. Wo ist eigentlich Doris abgeblieben?
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Du - mit JavaScript kenne ich mich fast gar nicht aus. Dazu kann ich so (auswendig) daher auch gar nichts sagen.

Doris hat familiäre Schicksalsschläge durchmachen müssen und wird wohl hier noch eine Weile ausfallen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Oh Kacke!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Du suchst das hier
Code:
window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Ganz genau brauchst du das hier
Code:
<script>
window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "animate__animated animate__slideOutLeft";
  } else {
    document.getElementById("myP").className = "";
  }
}
</script>

Ist doch schön wenn andere deine Arbeit erledigen oder? :D
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
(19.05.2020, 07:17)stobi_de schrieb: Oh Kacke!
gehts eigentlich noch? Diesen primitiven Spruch hättest du dir sparen können...
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Hallo Andy,
vielen Dank, klappt gut.

Langsames Ausblenden scheint nicht zu klappen?

.ZeigMichNicht
{
visibility: hidden;
transition:1s all ease-in-out!important;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Wieso nicht?

Code:
<script>
window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "animate__animated animate__fadeOut";
  } else {
    document.getElementById("myP").className = "animate__animated animate__slideInLeft";
  }
}
</script>
Über die Anweisung document.body.scrollTop > 50 wird festgelegt wie weit man scrollen muss bevor die Funktion die Classe ändert und die animation gestartet wird. In diesem Fall sind es 50px.
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Hallo Andy,
die Funktionsweise habe ich durchschaut.
Aber den Fade-Effekt via css, da habe ich den Fehler drin.

oder sind die beiden Klassen, die Du angibst Standardklassen (sorry, nicht ausprobiert)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
... kannst Du denn diese Abdunklung (mit Animation) nicht dennoch beibehalten? Die ist doch unabhängig von der Flyout-Box.

http://www.mobirise-tutorials.com/Busine...t-Box.html


Code:
  <!-- JavaScript zur Anzeige vom Overlay mit Animation-->
  <script>
    function on() {
      document.getElementById("overlay").style.display = "block";
      document.getElementById("overlay").style.animation = "animationName 1.0s both running";
    }
    function off() {
      document.getElementById("overlay").style.animation = "animation2Name 1.0s both running";
    }
  </script>

Außen das <div> um die Box mit dem "onmouseover" / "onmouseout"

Code:
<div id="slideout" onmouseover="on()" onmouseout="off()">
  <img style="border-radius: 0 10px 10px 0;" src="http://www.mobirise-tutorials.com/BusinessM4/images/Info.jpg"> 
  <div id="slideout_inner"> 
    <p><strong>Slideout Box</strong><br><br>hier kann ein beliebiger Inhalt stehen.</p> 
    <p><a href="http://www.mobirise-tutorials.com/" target="_blank" class="text-primary">Mobirise Tutorials</a></p>
  </div>
</div>

... und die eigentliche Abdunklung mit diesem <div> mit der ID aus dem JavaScript (oben) aufrufen:

Code:
<div id="overlay"></div>

Die Abdunklung selbst funktioniert dann über diese CSS:

Code:
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
cursor: pointer;
}
@keyframes animationName {
from {
  background-color: transparent;
  display: block;
}
to {
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
}
}

@keyframes animation2Name {
from {
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
to {
background-color: transparent;
  display: none;
  z-index: -1;
}
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Was ist also daran falsch

.ZeigMichNicht
{
    visibility: hidden;
    transition:0.5s all ease-in-out!important;
}

Aha - nur im Chrome nicht....
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Hallo Frank,
ich nutze hier ganz einfach die bereits integrierten Animationen von animate.css

Diese sollten eigentlich immer in Mobirise verlinkt sein. Ich habe allerdings auch schon einmal gehabt das es nicht funktioniert hat. Da habe ich dann einfach im Head darauf referiert.

Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
  />

Dann sollten die Classen auch funktionieren.

Wenn du zusätzlich eine Abdunkelung haben möchtest, setze ganz außen im body ein div gib Ihm eine class mit dem gewünschten Inhalt. Lasse diese Class beim öffnen des Flyout mit laden und beim scrollen entfernst du diese Class.
Code:
<script>
window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("div").className = " abdunkeln";
    document.getElementById("myP").className = " abdunkeln animate__animated animate__fadeOut";


  } else {
    document.getElementById("myP").className = "animate__animated animate__slideInLeft";
    document.getElementById("div").classList.remove("abdunkeln");
  }
}
</script>
Eigentlich total simpel oder  :D
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Eigentlich simpel... ich mach gleich nochmal. Dank Dir.
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
  Animiertes Flyout seitlich AndyNeu 57 1.844 14.04.2020, 07:53
Letzter Beitrag: stobi_de
  Großes Flyout gesucht stobi_de 17 584 11.01.2020, 16:29
Letzter Beitrag: Werner123
  Divs zeitverzögert ein- und wieder ausblenden? stobi_de 1 249 14.08.2019, 12:26
Letzter Beitrag: stobi_de



Benutzer, die gerade dieses Thema anschauen: 2 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!