Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Page Overlay erstellen
#1
Hallo zusammen,

Wie kann man mit NOF eine Page Overlay erstellen? Ich benutze die NOF-Version 12

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

ich habe gerade keine Zeit - aber das sollte sehr einfach gehen.

Ich baue das wahrscheinlich später (eher morgen) mal in "Mobirise" ein (in NOF funktioniert das dann ebenso).

Hier eines von vielen Möglichkeiten:

https://www.w3schools.com/howto/tryit.as...js_overlay
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Hallo Tommy

Vielen Dank für Deine Antwort. Es klappt bestens.

Gruss
nintama
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Hi,

... ach schon fertig thumbs up

... nun hatte ich gerade eben das hier noch beschrieben Smiling


Hier mal ein Beispiel für ein Page Overlay von mir - hier eingebaut in "Mobirise".

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



Der Einbau in "NOF" (NetObjects Fusion) funktioniert im Prinzip ebenso:

In NOF kopierst Du diesen Style (CSS) am besten in die HTML vom Layout "Zwischen Head Tags":

Code:
<style>
   .overlay {
     height: 100%;
     width: 0;
     position: fixed;
     z-index: 1;
     top: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.8);
     overflow-x: hidden;
     transition: 0.5s;
   }
   .overlay-content {
     position: relative;
     top: 25%;
     width: 100%;
     text-align: center;
     margin-top: 30px;
   }
   .overlay a {
     padding: 8px;
     text-decoration: none;
     font-size: 24px;
     color: #ffffff;
     display: block;
     transition: 0.5s;
   }
   .overlay a:hover, .overlay a:focus {
     color: #ffa200;
   }
   .overlay .closebtn {
     position: absolute;
     top: 30px;
     right: 55px;
     font-size: 60px;
   }
   @media screen and (max-height: 450px) {
     .overlay a {
       font-size: 20px;
     }
     .overlay .closebtn {
       font-size: 40px;
       top: 15px;
       right: 35px;
     }
   }
</style>

Das JavaScript kopierst Du in NOF ebenfalls in die HTML vom Layout, diesmal aber unten an das "Ende des Haupttextes" (body).

Code:
<script>
   function openNav() {
     document.getElementById("myNav").style.width = "100%";
   }
   function closeNav() {
     document.getElementById("myNav").style.width = "0%";
   }
</script>


.jpg  Layout-HTML-NOF.JPG (Größe: 106,51 KB / Downloads: 6)




Die Anzeige des Klick-Buttons sowie den Inhalt (mit Deinem Inhalt ersetzen) vom Overlay in den "HTML Code Editor" eines Textfeldes von NOF:

Code:
<span style="font-size:30px; cursor: pointer;" onclick="openNav()">☰ Klick<br></span>

<div id="myNav" class="overlay">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
 <div class="overlay-content">
   <h1 style="color: #ffba40; font-weight: bold;">Page Overlay</h1>
   <br><br>
   <a href="Akkordeon.html">Akkordeon Bootstrap</a>
   <a href="Hotspot.html">Hotspot Responsive</a>
   <a href="Inline-Border.html">Inline Border</a>
   <a href="index.php">Schlagwörter Box</a>
 </div>
</div>


... und fertig Smiling
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Hallo Tommy

Vielen Dank für Deine Tipps.

Ich wünsche Dir eine schöne Woche.

Gruss
nintama
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Hallo Tommy

Ich habe noch eine Frage. Beim Page Obverlay wird der Masterrahmen vollständig abgedeckt, aber beim Layoutbereich werden die Bilder und die Tabellen nicht abgedeckt. Gibt es eine Möglichkeit, dass der Layoutbereich ebenfalls voll abgedeckt wird?

Vielen Dank für Deine Hilfe.

Gruss
nintama
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Versuche mal den z-index höher zu setzen.
Wenn Dein Pferd tot ist, steig ab.

Neue Seite: NOF 2015
NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox 56.0.1,6234 Java 7 32bit, IE11, Chrome, GIMP 2.8.4; Mobirise 3.12.1 + 4.8.1, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack

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

ja genau, setze mal den "z-index" der class="overlay" (Position vom Overlay über dem Layout) hoch (von jetzt 1), bei NOF mindestens auf 2000

Zitat:.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 2000;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
overflow-x: hidden;
transition: 0.5s;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Hallo zusammen,

Vielen Dank für Eure Tipps. Leider hilft eine höhere Zahl nicht. Gibt es vielleicht eine andere Lösung?

Gruss
nintama
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
sorry - das funktioniert exakt so, wie ich es beschrieben habe:

http://www.nof-tutorials.com/Page-Overlay/

Schreibe uns mal die URL Deiner Seite, sodass man in den Quelltext gucken kann.

Stelle sicher, dass Du "HTML5 Dynamic" eingestellt hast und nicht "HTML5" (festes Seitenlayout).
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
stimmt, bei HTML5 Dynamic funktioniert es. Vielen Dank für den Hinweis und schönes Wochenende.

Gruss
nintama
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
nimm niemals festes Seitenlayout mit NOF (das bringt sehr häufig Probleme) - stelle immer das dynamische HTML5 ein.

thumbs up
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
  Neue Seite aus CSS Template erstellen Bagpipedisaster 13 867 11.09.2017, 16:21
Letzter Beitrag: barbara0701
  Flash Uhr erstellen als eigene Komponente NYC 1 1.166 24.12.2016, 08:22
Letzter Beitrag: Tommy Herrmann
Photo Dynpage wird nicht in meiner Page angezeigt hoewargbg 24 3.056 30.07.2016, 11:51
Letzter Beitrag: Tommy Herrmann
  CSS Klassen erstellen und zuweisen Gerhard 1967 15 4.385 06.10.2015, 11:18
Letzter Beitrag: Gerhard 1967
  Bei Vorlage erstellen, das programm wird geschlossen Gabymarie 14 1.955 15.08.2015, 10:30
Letzter Beitrag: Gabymarie
  Neues Thema erstellen, wie geht das? webmaster-h2rr 2 955 15.07.2015, 07:12
Letzter Beitrag: Tommy Herrmann
  In NOF13 eine Teilnahmeliste erstellen ?? Girgei 7 2.302 14.03.2015, 22:44
Letzter Beitrag: Girgei
  Eigene Metatags in NOF erstellen Galaxyv6 4 1.193 10.02.2015, 21:48
Letzter Beitrag: Galaxyv6
  Katalog erstellen aber wie? blickpunkt3 6 1.226 28.01.2015, 19:11
Letzter Beitrag: barbara0701
  Online-Doku / -Hilfe erstellen WvonO 5 1.710 15.01.2015, 13:57
Letzter Beitrag: WvonO



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!