Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Animiertes Flyout seitlich
#31
Moin Andy,

ja, das meine ich ja - denn das ganze Teil funktioniert jetzt eben nur, in der obersten Section. Deswegen habe ich ja darauf hingewiesen.

Leider kann ich das so jetzt auch nicht auswendig sagen, denn ich habe dieses Flyout nun selbst ja nicht eingebaut und mit jQuery zu arbeiten ist ja wieder eine ganz andere Geschichte und oft problematisch.

Wo hast Du das denn ursprünglich her? Vielleicht ist das ja auch so für Bootstrap ungeeignet. Man kann schon wegen der Positionen nicht ausnahmslos alles in Mobirise einbauen.

Ich hatte ja damals (schon zu NOF Zeiten) mal dieses (ähnliche) Flyout hier gefunden:

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

und dann weiter gesucht und nach dieser Idee ...

https://usabilitypost.com/2011/04/19/pur...interface/

... das etwas verändert hier in Mobirise eingebaut:

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

... es teilweise selbst weiter bearbeitet und Werner hatte mir bei der Animation zum Abdunkeln vom Body geholfen und das JavaScript entsprechend umgeschrieben, vielleicht kannst Du das irgendwie auch für Dein Flyout verwenden, denn mit der Größe des Flyouts hat das ja nichts zu tun, das ist reine CSS.

Dabei wird ja dieses JavaScript im <head> Bereich angebracht und ruft ja ebenfalls nur einen Bereich in einer bestimmten Section über die ID (getElementById) auf:

Code:
<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>

... entscheidend ist aber die in der CSS definierte fixierte Position von 0,0,0,0 und eben einer Breite und Höhe von 100%. Nur dadurch findet das alles nicht in der Section, sondern über das gesamte Display statt, was (glaube ich) bei Dir völlig fehlt.

Code:
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
cursor: pointer;
}

Die Animation selbst wird nur mittels der CSS "keyframes" Regel über die im JavaScript definierten Namen dargestellt, also hier ein- und ausgeblendet:

Code:
@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;
}
}


... denn diese Class zum Abdunkeln bei Dir, bezieht sich ja wohl nur auf die vom JavaScript bearbeitete Section auf der Du das eingebaut hast.

Andys CSS schrieb:.dunkelOn {
  width: 100vw;
  Heigh: 100vh;
  margin-left: 1em;
  z-index: 19500 !important;
  background-color: #000;
  opacity: 0.8 !important;
}


P.S.:

Hier ist noch ein Beispiel für ein Overlay, das seitlich einfliegt und auch hilfreich sein könnte (auch reine CSS):

http://www.mobirise-tutorials.com/Lawyer...erlay.html


P.P.S.:

noch was zur allgemeinen Meinung zur Verwendung von Handys, bzw. mobilen Geräten.

Ich glaube nicht, dass die Verwendung eines Handys zum Surfen irgend etwas mit dem Interesse an der Materie zu tun hat, sondern (natürlich) mit dem Alter (und die sogenannte "Generation Y" (80iger  / 90iger Jahre) ist ja nun gerade bereits am Steuer). Es ist einfach so, dass Leute, die nicht selbst etwas in das Internet stellen und eben nur suchen und gucken und "Verbraucher" sind, heutzutage das eher mit dem Handy tun - und sehr oft auch nur mit dem Handy.

Wir hier machen das eher weniger, denn nur am PC kann man ja Internet-Seiten auch vernünftig bearbeiten und beurteilen und auch Leute, die das Internet zum Arbeiten benötigen, verwenden eher einen PC oder Mac.

Das ändert aber nichts an der Tatsache, dass der überwiegende Teil der Internet-Besucher eben mit dem mobilen Gerät surfen und nicht mehr mit einem stationären Gerät, das diese oft noch nicht einmal mehr besitzen.

Ich habe keine Ahnung wo Claus seine Weisheiten her hat, es gibt aber staatlich und wissenschaftlich anerkannte Statistiken, die für solche Dinge regelmäßig erstellt werden und nur die zählen, nicht der Besuch individueller Seiten oder Interessengebieten und schon gar nicht selbst erstellte Statistiken.

Nicht umsonst sind responsive Seiten heute unabdingbar geworden, nicht umsonst hat Google Technologien wie AMP entwickelt und bevorzugt für mobile Geräte optimierte Seiten im Ranking, denn hierbei geht es um Geld - nur um Geld, das damit verdient wird. Google und Co. verdienen ja immer dabei auch mit.

... aber natürlich hat da jeder seine eigene Meinung zu und das ist auch gut so.

Ich bin z.B. eigentlich so gut wie nie mit dem Handy im Internet.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#32
Hallo
im großen und ganzen ist das was ich da mit jQuery gemacht habe nicht viel anders.

Was ich allerdings nicht gemacht habe, weil es wenn ich eine Seite frei Programmiere also auch mit Bootstrap aber ohne Mobirise, das Overlay auf positon: Fixed gesetzt.
Da werde ich nochmal testen.
@Tommy vielen Dank für die Rückmeldung
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
#33
... achte auch auf links, rechts, unten oben und ich meine da ist ein großer Unterschied zwischen "vh" (height viewport) und Prozent. Das kann (glaube ich) nicht vererbt werden ...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#34
Tommy
Ich habe von exakt 178 meiner Kunden die Zahlen mit Webanalitcs ausgewertet. Von 2017 bis 2019.

Dort kann man ja sehr genau ermitteln...wie hoch die Anteile sind. Leider kann und darf ich aus Datenschutzgründen diese Auswertungen nicht öffentlich machen.

Ich bin etwas verwundert...du bist doch auch bei 1und1...
kennst das doch.

Nun ja...ich habe echte Seiten, aller Branchen geprüft, die du wohl so nicht hast.

Noch etwas...dabei waren auch 12 Webseiten der Gastronomie, wo man ja annehmen könnte, dass hier 
der Smartphoneanteil hoch ist.

Auch das traf nicht zu, es waren nie  mehr als 34%
Mit freundlichen Grüßen
Claus aus dem hohen Norden

...am achten Tag schuf Gott den Rechtsanwalt
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#35
Claus, ich spreche hier nicht von den paar Kunden von Dir, sondern vom Internet-Verhalten im Allgemeinen und da geht es um rund 2-3 Milliarden Nutzer weltweit, die das Handy zum Surfen benutzen.

https://de.statista.com/themen/258/mobiles-internet/

Für das Jahr 2021 wurde prognostiziert, dass die Zahl der Internetnutzer bis auf rund 4,14 Milliarden steigen wird

Hier eine 2 Jahre alte Statistik - die heute ganz anders aussieht. Finde nur gerade keine kostenlose ...

... schon im Jahr 2018 war die mobile Nutzung 4 x so hoch wie die stationäre.

https://www.die-medienanstalten.de/filea...g_2018.pdf
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#36
Tommy,

ich habe einen Kunden in der ehemaligen DDR, den ich mit gutem Zureden und Überzeugungskraft überzeugen wollte und auch konnte, doch endlich seine Website auf Responsiv-Design umzustellen. (Branche Technik)
Immer aus Überzeugung, immer mit den Worten: Die Smartphonenateile steigen stetig, hier sind die neusten Zahlen dazu usw, ohne dem geht es nicht mehr!

Das hat natürlich Geld gekostet, nicht gerade wenig. Nun bekomme ich immer zum Jahresanfang von diesem Kunden die Auswertungen, immer geschmückt mit einem lachenden Smilie. (Bild 1-3)


.jpg  herkunft.jpg (Größe: 14,45 KB / Downloads: 16)



.jpg  Browser nach Aufruf.jpg (Größe: 15,5 KB / Downloads: 15)



.jpg  Betriebsysteme.jpg (Größe: 14,13 KB / Downloads: 13)


Es geht dem Kunden nicht ums Geld für meine Arbeit, es geht darum, nicht alles über einen Kamm zu scheren und die Kirche auch mal im Dorf zu lassen. Im Übrigen lacht der Kunde sich tot über die geringen Zahlen und sagt mir freundlicher Weise, ist ja gut, aber das habe ich dir doch gleich gesagt.

Ja, Tommy, ich weis: ES IST NUR EIN KUNDE!
Aber einer von vielen!

Zu guter Letzt: Mich wundert, das du so blauäugig bist und alles glaubst! Sonst bist doch doch auch immer vorne mit dabei, wenn es um irgendwelche Tools geht die Auswertungen (SEO oder ähnliches) anbieten, das hast du doch selbst immer wieder in Frage gestellt, oder? Daran glaubst du doch auch nicht.
Mit freundlichen Grüßen
Claus aus dem hohen Norden

...am achten Tag schuf Gott den Rechtsanwalt
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#37
das bezweifele ich doch in keinster Weise.

... diese "1und1" Statistik sieht bei mir praktisch identisch aus. Ich habe so im Durchschnitt 14.000 Besucher im Monat auf meinen Tutorial-Seiten.

Dennoch ist doch ganz klar, dass die Nutzung der Handys durch den allgemeinen User stetig steigt.

Man muss sich doch nur in der Bekanntschaft umsehen. Bei mir nutzen eigentlich alle nur noch ihre Handys (Kunden habe ich ja nicht mehr seitdem ich Rentner bin).

Ich persönlich finde dieses übertriebene Nutzen der Handys echt zum K.otzen - ich komme selbst aber auch nicht drum herum. Bald werden auch viele Arztbesuche so stattfinden.

Du kannst im Internet aber auch suchen und gucken wo Du willst, da sind sich alle sehr einig.

Gib doch einfach mal ein:

mobile internetnutzung deutschland 2019

Alles geht über das Handy. Das wilde Surfen, WhatsApp, E-Mail, Banking, Online-Shopping, die Social Medias sowieso und inzwischen auch das bargeldlose Zahlen im Supermarkt (bei fast jedem). Ich nehme schon seit Monaten gar keine EC-Karten mehr mit.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#38
Hallo,
so habe das Flyout optimiert. Jetzt schließt es an allen Positionen langsam das Flyout und die Animation des Overlays ist auch optimiert.

Nach wie vor habe ich das Flyout ab einer Displaygröße von 768 px ausgeblendet.

Wer es auch auf dem Handy nutzen möchte muss das in der css noch anpassen.
Bei Fragen bin ich gerne behilflich.
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
#39
Habe noch eine weitere Variante gebaut.

Flyout Variante 2

Zugang:
User: Test
Pw: frei123
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
#40
Moin Andy,

jetzt funktioniert die erste Variante auch mit der Abdunklung, ich denke Du hast die Position nun auch fixiert thumbs up

... das Zappeln der Seite bei dem Versuch zu scrollen (oder auch am Scrollrad gedreht) ist allerdings noch sehr unschön. Vielleicht hast Du dazu noch eine Idee, denn eigentlich sollte das Scrollrad auch funktionieren, wenn das Flyout und die Abdunklung geöffnet sind.


Die zweite Variante schließt die Abdunklung im "Firefox" nur zu Hälfte, siehe Screenshot:


.jpg  Flyout2.JPG (Größe: 45,01 KB / Downloads: 13)


Im "Edge" und "Chrome" dagegen, schließt die Abdunklung vollständig.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#41
Ja sehr gediegen.
Habe aber eine Lösung gefunden baue ich heute Abend ein.

Danke für den Hinweis thumbs up
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
#42
Könnt ihr jetzt bitte mal die Variante 2 Testen in sämtlichen Browsern.

Die ich hier habe funktionieren alle.
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
#43
Na, das ist doch mal schick !
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#44
Danke,

alles gut, auch technisch. Super Leistung. Respekt!
Nur der schwarze Sarg der da rein wummert, dass ist nicht so mein Ding.
Dezenter, weniger ist mehr....
Würde es gern nutzen, aber wie und wo kann ich es anpassen, erlaubst du es überhaupt?
Mit freundlichen Grüßen
Claus aus dem hohen Norden

...am achten Tag schuf Gott den Rechtsanwalt
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#45
Habt Ihr verschiedene Browser getestet?
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


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Großes Flyout gesucht stobi_de 17 346 11.01.2020, 17:29
Letzter Beitrag: Werner123
  Animiertes Öffnen des Menüs? stobi_de 10 284 07.11.2019, 18:29
Letzter Beitrag: AndyNeu



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!