Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Großes Flyout gesucht
#1
Hallo,
ein Kunde (www.lifeline-hold.com) will sowas auf seiner Seite, wie hier dieses exhibitions-Flyout (www.artport9.com)
Das Dumme an der Sache ist, dass auf der Hold-Seite schon ein Navik-Menü vorhanden ist. Daher funktioniert das ebenfalls auf Navik basierende Flyout bei ihm nicht.
Haben wir da irgendwas zumindest extrem Ähnliches irgendwo rumliegen (meistens ist sowas ja in Tommies Asservatenkammer) ?

Frank
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

hatte so etwas mal hier gemacht. Ist zunächst ziemlich klein aber das kann man (Du) vielleicht anpassen, ist ja reines CSS.

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

... es ist z.B. ein Einfaches aus der in meiner CSS eingetragen Höhe von 183px eine Höhe von meinetwegen 70vh (70% view height) zu machen, dann würde es so aussehen.


.jpg  slideout_view-height.jpg (Größe: 106,72 KB / Downloads: 10)


Die Breite ist ebenso steuerbar. Hier meine jetzige CSS:

Code:
#slideout {
  position: fixed;
  top: 200px;
  left: 0;
  width: 42px;
  padding: 10px 10px 10px 0px;
  text-align: center;
  background: #e2e2e2;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border-radius: 0 10px 10px 0;
  border-top: 2px solid #8d97ad;
  border-bottom: 2px solid #8d97ad;
  border-right: 2px solid #8d97ad;
}
#slideout_inner {
  position: fixed;
  top: 200px;
  left: -250px;
  background: #e2e2e2;
  width: 250px;
  padding: 20px;
  height: 183px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  text-align: left;
  border-top: 2px solid #8d97ad;
  border-bottom: 2px solid #8d97ad;
}
#slideout_inner textarea {
  width: 190px;
  height: 100px;
  margin-bottom: 6px;
}
#slideout:hover {
  left: 250px;
}
#slideout:hover #slideout_inner {
  left: 0;
}

Dazu habe ich lediglich diese CSS-ID entsprechend so geändert:

Zitat:#slideout_inner {
  position: fixed;
  top: 200px;
  left: -250px;
  background: #e2e2e2;
  width: 250px;
  padding: 20px;
  height: 70vh;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  text-align: left;
  border-top: 2px solid #8d97ad;
  border-bottom: 2px solid #8d97ad;
  border-right: 2px solid #8d97ad;
}


... übrigens mal ein Tipp, wenn Du auf meinen Seiten was suchst, dann entweder hier und auch eventuell mal in das "Suchen" Feld über der Tabelle schreiben:

http://www.mobirise-tutorials.com/Tutorial-Links/

oder auch hier direkt suchen.

http://www.mobirise-tutorials.com/Suchen.php

In beiden Fällen hätte Dich ein Suchbegriff wie "flyout" direkt zu dieser Seite gebracht.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Warum baust du das nicht einfach selbst?

Ist doch kein Hexenwerk :D

Hab mal gebaut, allerdings nicht auf Schönheit.
Habe es mit hover gelöst, würde es für mich selbst eher mit Java auslösen.

Ist in 15 min entstanden. Tounge
Zugang:
Test
frei123
Guckst du
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
#4
Weißt Du Andy, ich bin ein Freund von ERPROBTEN Scripten - nicht, weil ich es nicht kann, sondern weil der Teufel im Detail steckt.
Dein Test z.B. erzeugt auf meinem PC (Chrome, Win7) nur ein Geflimmer. Und wie sieht das auf Android und Safari aus? Daher lieber veraltete Technik als modern und problematisch (gilt auch für Autos :D )

@Tommy: ja, ungefähr so. Und wie man den Hintergrund dann dunkel schaltet, habe ich irgendwo in Deinen Scripten auch mal gesehen. Aber wonach suche ich dann am besten? Huh
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
ich glaube da brauchst Du ein JavaScript, denn der Hintergrund soll ja erst nach "hover" abdunkeln und dann der gesamte Body. Darin bin ich auch nicht fit, frage mal unseren Werner - der kann das (habe es weiter unten im Beitrag #9 lösen können).

Ich denke Du hattest das mal bei mir gesehen:

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

... das wäre dann ein "Flyout" über den gesamten Bildschirm.


@Andy - da sind etliche Fehler in Deinem Flyout. Der Button muss noch fixiert werden und es zittert gar schrecklich. Dann öffnet es nur an einer bestimmten Position, also wenn der Inhalt vom Flyout unter dem oberen Block beginnt. Es wäre auch immer schön, wenn Du dann gleich noch die CSS und alles dazu schreibst, denn so bekommt das ja niemand nachgestellt.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Kannst auch nicht schlafen? Undecided
Na, wenn man das Klick dann mit einem fixed Button an der Seite verheiratet, haben wir es doch schon.

Das finde ich gut, klasse!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
... hab's gleich mit der zuerst gezeigten Flyout Box und einem zusätzlichen Overlay zum Abdunkeln :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Jetzt mit Abdunklung bei Mousover:

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

... schreibe es dann noch auf und gebe Bescheid.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Ich habe meine zusätzlichen Anweisungen für das Overlay jetzt noch auf meine Seite geschrieben:

http://www.mobirise-tutorials.com/Busine...ml#Overlay

... achte darauf das die alte id="slideout" noch einen z-index: 3 bekommt, damit diese über dem Overlay liegt.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Ha, irgendwie habe ich ja doch fähige "Mitarbeiter" :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
@Werner,

falls Du das liest und Lust hast - wie würde man bei meiner Anleitung:

http://www.mobirise-tutorials.com/Busine...ml#Overlay

... das Overlay noch weich "einblenden" lassen?

Irgendwie mit "transition" - bekomme das aber nur über die CSS hier nicht hin. Glaube das müsste mit ins JavaScript - nur wie Crying


Skript:

Code:
<script>
  function on() {
  document.getElementById("overlay").style.display = "block";
  }
  function off() {
  document.getElementById("overlay").style.display = "none";
  }
</script>


Aufruf:

Code:
<div id="slideout" onmouseover="on()" onmouseout="off()">
  bla, bla, bla
</div>


Anzeige:

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


CSS:

Code:
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Ich habe das jetzt nur über Keyframes hinbekommen

Code:
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
/*  background-color: rgba(0, 0, 0, 0.5);*/
  z-index: 2;
}

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

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>
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

Benutze zum arbeiten: Win10 (Windows Insider) - Mozilla Firefox, Microsoft Edge - EmEditor, Visual Studio Code - WAMP,  FileZilla, paint.net und Gimp.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
ah - Klasse Werner - ich versuche es gleich mal.

Ja - wieder was gelernt. Ich habe immer versucht im JavaScript das noch an

.style.display = "block"

hinten dran zu hängen. Na ja - ich war immer schon für den kürzesten Weg :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
super, das klappt großartig thumbs up

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

Das Tutorial ergänze ich noch ...

Vielen Dank Werner !!!

P.S.:

wie funktioniert das

"both running"
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
@Werner,

kleines Problem - nach dem Flyout mit Animation, gehen die Links an den Buttons nicht mehr :confused:

P.S.:

... habe das Problem mit zusätzlichem 'z-index' lösen können:

Zitat:@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


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Animiertes Flyout seitlich AndyNeu 51 768 Gestern, 18:46
Letzter Beitrag: AndyNeu
  Mini-Dropbox gesucht stobi_de 11 209 20.12.2019, 09:14
Letzter Beitrag: kfz-fotograf
  Spezielles Akkordeon gesucht stobi_de 5 206 26.11.2019, 06:39
Letzter Beitrag: Tommy Herrmann
  Mobirise-Timeline mit Bildern gesucht Thomas Saake 5 370 16.07.2019, 10:15
Letzter Beitrag: Thomas Saake
  Mobirise-Menüleiste gesucht Thomas Saake 3 318 08.07.2019, 17:38
Letzter Beitrag: Thomas Saake
  Mobirise-Meinung zur Gestaltung einer Gaststätten und Restaurantseite gesucht. Thomas Saake 3 362 29.05.2019, 12:50
Letzter Beitrag: c-laus
  URL-Script oder Anleitung gesucht Hans Klawun 6 491 29.04.2019, 11:56
Letzter Beitrag: Hans Klawun
  Designvorschläge gesucht AndyNeu 5 496 20.03.2019, 17:27
Letzter Beitrag: Doris Rehhausen
  Stundenplan via Datenbank gesucht stobi_de 6 466 09.03.2019, 11:41
Letzter Beitrag: Martin73
  Spezieller Slider gesucht stobi_de 7 643 28.12.2018, 11:03
Letzter Beitrag: stobi_de



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!