[OnePageWebsite] Eine one-page Website Struktur mit der Seitenstruktur erstellen

**Martina** · 25.11.2013, 08:38

Zitat von Mase

Im Frontend wird im Header aber folgende Reihenfolge dargestellt: Kontakt, Preise, About, Leistungen

Jemand ne Idee warum die Reihenfolge genau umgekehrt ist?

Hast du vielleicht die li's nach rechts gefloatet?

**Mase** · 25.11.2013, 15:21

Zitat von Martina

Hast du vielleicht die li's nach rechts gefloatet?

Hah, danke! Da liegt der Hund begraben... Das ist der "Fehler".

Grüße
Mase

laRocca · 26.11.2013, 10:14

Hallo,

geht mit der Erweiterung auch dass die OPW-Navi im Header fixiert ist und stehen bleibt, so wie auf dieser Seite?
Hab alles nach den Beispielen aufgebaut, aber die OPW-Navi verschwindet immer, wenn ich auf eine der Unterseiten der OnePage klicke.

Vielen Dank u LG

**Tim G** · 26.11.2013, 10:16

Zitat von laRocca

Hallo,

geht mit der Erweiterung auch dass die OPW-Navi im Header fixiert ist und stehen bleibt, so wie auf dieser Seite?
Hab alles nach den Beispielen aufgebaut, aber die OPW-Navi verschwindet immer, wenn ich auf eine der Unterseiten der OnePage klicke.

Vielen Dank u LG

Wenn die Navi z.B. im Kopfbereich liegt, einfach den Header mit position:fixed; fixieren.
Oder direkt das Navi Element.

laRocca · 26.11.2013, 10:20

http://schmitz-kochevents.de/index.php/startseite.html

dann linkt die Navi falsch.

(Ich hab mich genau an diese ausführliche Beschreibung gehalten)

**Spooky** · 26.11.2013, 10:25

Zitat von laRocca

http://schmitz-kochevents.de/index.php/startseite.html

dann linkt die Navi falsch.

(Ich hab mich genau an diese ausführliche Beschreibung gehalten)

Hat aber nichts mit dem CSS zu tun. Zeig mal einen Screenshot deiner Website Struktur.

laRocca · 26.11.2013, 10:27

et voilà schmitz.png

hier noch die module:

Navimenü OnePage-Navigationsmenü.png
OnePage-Normale Struktur OnePage-Normale Struktur.png

sind die falsch angelegt?

laRocca · 27.11.2013, 09:56

Ich habe jetzt das OnePage-Navigationsmenü mit diesem Template verbunden und jetzt scrollt es ein bischen nach unten - aber noch nicht an die stelle wo es eigentlich soll.
was fehlt mir denn noch?

**Tim G** · 27.11.2013, 10:14

Zitat von laRocca

Ich habe jetzt das OnePage-Navigationsmenü mit diesem Template verbunden und jetzt scrollt es ein bischen nach unten - aber noch nicht an die stelle wo es eigentlich soll.
was fehlt mir denn noch?

Weiter wird erst gescrollt, wenn es notwendig ist. Das Scrolling eines Browsers ist nach der Sichtbarkeit geregelt, nicht dass der Inhalt ganz obenen landet.

Verkleinern Sie den Browser und klicken Sie dann mal. Dann scrollt er gefühlt weiter, damit der Inhalt sichtbar ist.

(Sorry, hab vergessen, dass ich hier Moderationsrechte habe

)

laRocca · 27.11.2013, 10:46

bitte hör auf mich zu siezen!

bei verkleinerung seh ichs - dann funktionierts ja eigentlich?! sehr geil! und die höhe für die einzelnen teile stell ich jetzt via css ein wahrscheinlich?
ausgezeichnet - dann kanns jetzt weiter gehen. dankeschön!

**Tim G** · 27.11.2013, 11:01

Zitat von laRocca

bitte hör auf mich zu siezen!

bei verkleinerung seh ichs - dann funktionierts ja eigentlich?! sehr geil! und die höhe für die einzelnen teile stell ich jetzt via css ein wahrscheinlich?
ausgezeichnet - dann kanns jetzt weiter gehen. dankeschön!

Haha, Gewohnheit inzwischen. Ich arbeite noch in nem Supportbereich, da ist alles bissel förmlicher

**tinoo** · 27.11.2013, 13:07

Zitat von laRocca

...und die höhe für die einzelnen teile stell ich jetzt via css ein wahrscheinlich?

Genau. Probiers mal mit

.page_0 {min-height:600px;}

wobei .page_xy die jeweilige Seite ist, welche von OPW-Modul dargestellt wird.

**Tim G** · 27.11.2013, 13:09

Zitat von tinoo

Genau. Probiers mal mit

.page_0 {min-height:600px;}

wobei .page_xy die jeweilige Seite ist, welche von OPW-Modul dargestellt wird.

Jo, allgemein bekommt jede Seite auch .page als Klasse.

laRocca · 27.11.2013, 15:25

alles klar, danke.

Eine Frage hab ich jetzt allerdings noch. Wenn in meinem Layout unten so eine "Hoch- / Runter-Navigation" sein soll: screenshot.jpg
Kann ich das auch mit diesem mooScroller lösen?

(Ich weiß nicht genau nach welchem Begriff ich suchen soll für so ne Navigation.)

**Tim G** · 27.11.2013, 15:46

Zitat von laRocca

alles klar, danke.

Eine Frage hab ich jetzt allerdings noch. Wenn in meinem Layout unten so eine "Hoch- / Runter-Navigation" sein soll: screenshot.jpg
Kann ich das auch mit diesem mooScroller lösen?

(Ich weiß nicht genau nach welchem Begriff ich suchen soll für so ne Navigation.)

Einfach einen Top-Link einfügen. Contaos body hat die id="top"

PHP-Code:


<a href="{{env::request}}#top">Ab nach oben</a>

laRocca · 27.11.2013, 15:50

wollte eigentlich nicht jeweils ganz nach oben, sondern immer nur auf die vorherige oder nächste Seite, aber dein Post hat mir trotzdem geholfen, denn der links für diese Navi:

Home
Team
Kochkurse
Gutscheine
Termine
Kontakt

wäre dann um beispielsweise von der "Team" Seite auf "Home" zu kommen
<a href="#home">[nbsp]</a>

und für den Link zur nächsten Seite nach "Team" ists dann:
<a href="#kochkurse">[nbsp]</a>

--> Zumindest scheint das bei mir zu funktionieren : )

EDIT: Mir fällt grad auf, dass das so bei mir nicht funktionieret, weil ich im entsprechenden Layout ja garkeinen Footer habe

Gäbe es auch eine #XY ansprache für vorherige Seite und nächste Seite?

**ciaobello** · 27.11.2013, 16:02

Versuchs mal mit Inssertags:

http://de.contaowiki.org/Insert-Tags...ene_Inserttags

**Tim G** · 28.11.2013, 09:00

Page Inserttags sind der Weg zu entfernten Seiten, auf der gleichen Seite immer mit:

<a href="{{env::request}}#home">Ab zu Home</a>
<a href="{{env::request}}#Team">Ab zu Team</a>

(je nach dem wie die Anker im Quellcode heissen)

Mike1410 · 10.12.2013, 16:18

Hallo,

hab mal eine Frage: Wie kann man das mit der Weiterleitungsseite einen Kontaktformulars adäquat lösen. Die derzeitige Lösung ist sehr unschön weil er ja dann auf eine neue Seite springt.

Hat da jemand eine Idee ?

Mike1410 · 10.12.2013, 20:18

Hallo,

mir ist ein gravierender Fehler aufgefallen. Wenn man die Webseite das erste mal aufruft, springt beim Anklicken eines Navigationspunktes, die Seite ohne smooth scrolling an das Seitenende.
Hier die URL: projekt02.imedio.net/index.php

Danach funktioniert das Scrollen (inkl. smooth) zu den einzelen Seiten.

**Tim G** · 11.12.2013, 08:22

Zitat von Mike1410

Hallo,

mir ist ein gravierender Fehler aufgefallen. Wenn man die Webseite das erste mal aufruft, springt beim Anklicken eines Navigationspunktes, die Seite ohne smooth scrolling an das Seitenende.
Hier die URL: projekt02.imedio.net/index.php

Danach funktioniert das Scrollen (inkl. smooth) zu den einzelen Seiten.

Naja, gravierend... da verstehe ich was anderes drunter.

Lass die Seite mal ohne das index.php erstellen, sieht nicht nur besser aus, funktioniert auch besser. Wenn das index.php drinbleiben soll, muss du im Navi-Template die Anker anpassen mit einem zusätzlichen {{env::request}} oder index.php.

**Tim G** · 11.12.2013, 08:27

Zitat von Mike1410

Hallo,

hab mal eine Frage: Wie kann man das mit der Weiterleitungsseite einen Kontaktformulars adäquat lösen. Die derzeitige Lösung ist sehr unschön weil er ja dann auf eine neue Seite springt.

Hat da jemand eine Idee ?

Einfach keine Weiterleitungsseite.
Du kannst auch Inhalte per Ajax nachträglich anzeigen lassen, wenn es um eine Versandbestätigung geht. Oder ohne JS: Ne POST Variable aus dem Formular überwachen und wenn die existiert, einen Inhalt anzeigen lassen.
Alles möglich.

Mike1410 · 11.12.2013, 11:09

Vielen Dank !!

Ich hatte eh in den Einstellungen index.php deaktiviert. Wenn ich die Seite nun ohne das index.php aufrufe funktioniert es bestens !!! (gravierend ist vlt. ein wenig übertrieben, hast Recht

)

Ich denke ich werde das Kontaktformular einfach in einen iFrame verfrachteten. Ich hätte nämlich gerne eine Bestätigung das eine eMail versendet wird.

Mike1410 · 11.12.2013, 11:38

Leider funktioniert das nicht so wie ich will mit dem iFrame, ist auch ne unsaubere Lösung. Hat jemand einen Tipp ?

Mike1410 · 11.12.2013, 18:02

Hallo,

ich habe das ganze nun anders gemacht. Ich habe das nicht mit Seiten sondern mit Artikeln gemacht, und jQuery statt mootools. Bei mir funktioniert gut und es ist ein wenig übersichtlicher.

**Tim G** · 11.12.2013, 18:06

Zitat von Mike1410

Leider funktioniert das nicht so wie ich will mit dem iFrame, ist auch ne unsaubere Lösung. Hat jemand einen Tipp ?

Ja, ne POST Variable. Und dann ein Inhaltselement nur anzeigen, wenn diese gesetzt ist.
Einfach ein unsichtbares Feld 'meinVerstecktesFeld' in dein Formular mit dem Standardwert z.B. 1

Dann legste Dir ein neues Text Inhaltselement zu deinem Formular an und gibst dem die Klasse invisible.
Dann kannst z.B. im getContentElement HOOK auf deine Post Variable reagieren:

if(\Input:

ost('meinVerstecktesFeld') >0)

und dann dem Element die Klasse entfernen invisible entfernen. Damit wird es sichtbar.

Mike1410 · 11.12.2013, 18:37

Also:

1.
ich habe nun im Kontaktform ein verstecktes Feld anglegt mit der Variable 1.

2.
Dann habe ich in dem Artikel, über dem eingebundenen Inhaltselement Formular -> Kontaktformular, ein Inhaltselement Text angelegt.

3.
In dieses Text-Inhaltselement habe ich einfach: Nachricht gesendet reingeschrieben und ihm die Klasse .cf_confirm gegeben.

4.
Per CSS blende ich nun das den Text aus mit display:none;

Aber wo kann ich die Klasse denn überschreiben, das verstehe ich nicht so ganz?

**Tim G** · 11.12.2013, 22:00

Mir fällt gerade sogar noch ne einfachere Variante ein mit der Erweiterung inputvar, die installieren.

Dein Aufbau passt. Wir nutzen das versteckte Feld aber jetzt als neue CSS Klasse

Gib dem versteckten Feld mal den Standardwert: visible (das wird der Klassenname für das Inhaltselement)

- Dein Inhaltselement kann so bleiben. Als Klasse gibst du dem noch das Inserttag: {{post::meinVerstecktesFeld}}
- Mit css verstecken wir das jetzt mit diplay:none
Sobald die Post Variable existiert, wird der wert eingesetzt. Hier wäre das der Wert: visible

So haste plötzlich ne Klasse auf die du reagieren kannst und wenn das Element die Klasse hat, machste einfach display:block, wenn nicht display:none im css. Fertig

**risingsunset** · 14.12.2013, 01:32

N’abend,

ich hab mal ’ne kurze Frage zum Events-Modul in Verbindung mit der OPW.
Muss man irgendwas besonderes beachten, damit die Events angezeigt werden?
Ich kriege es einfach nicht hin.

Danke euch!

**Tim G** · 14.12.2013, 10:48

Nein, es gibt nichts zu beachten.

Sent from my iPhone using Tapatalk

Mike1410 · 17.12.2013, 12:43

Hallo Tim,

leider hab ich mir irgendwas zerschossen im Hinblick auf die Bestätigung des Kontaktformulars. Könntest du noch mal beschreiben wie du es angelegt hast, damit nach dem Submit eine Bestätigung erscheint.

Danke

**Tim G** · 17.12.2013, 16:26

Zitat von Mike1410

Hallo Tim,

leider hab ich mir irgendwas zerschossen im Hinblick auf die Bestätigung des Kontaktformulars. Könntest du noch mal beschreiben wie du es angelegt hast, damit nach dem Submit eine Bestätigung erscheint.

Danke

Dann würde ich doch nur wiederholen, was oben steht

Nutze inputvar für das Auslesen eines Verstecken Feldes mit einem Wert drin, der dir als CSS Klasse in einem Inhaltselement (Bestätigungstext) dient.
Das Inhaltselement ist standardmäßig per CSS versteckt, mit der Klasse (weil Formular gesendet), kannst Du es sichtbar schalten per CSS.

**bird** · 05.01.2014, 17:29

Hallo Tim,

MPstudent hatte das Thema in seinem Beitrag angesprochen und ich hatte in Beitrag #77 https://community.contao.org/de/show...l=1#post266201 auch schon danach gefragt.

Kannst Du evtl. ein Beispiel dafür geben, wie man die aktuelle Position beim Scrollen auslesen und den entsprechenden Menüpunkt als "active" setzen kann?
Muss das Ganze mit festen Höhen gelöst werden? Oder kann man einfach nur prüfen, ob ein bestimmtes Element noch im Fokus ist?

**Tim G** · 06.01.2014, 09:24

Zitat von hangover

Hallo Tim,

MPstudent hatte das Thema in seinem Beitrag angesprochen und ich hatte in Beitrag #77 https://community.contao.org/de/show...l=1#post266201 auch schon danach gefragt.

Kannst Du evtl. ein Beispiel dafür geben, wie man die aktuelle Position beim Scrollen auslesen und den entsprechenden Menüpunkt als "active" setzen kann?
Muss das Ganze mit festen Höhen gelöst werden? Oder kann man einfach nur prüfen, ob ein bestimmtes Element noch im Fokus ist?

Hi,
in der aktuellen GitHub Version ist das bereits in dem moo Template enthalten.
Generell sollte man die Bereiche der opw nicht zu klein machen, sonst gibt es 1. kein scollen

und 2. springt das Menü natürlich sehr schnell.

**bird** · 08.01.2014, 18:55

Super, vielen Dank! Hatte noch eine alte Version aus dem Contao ER.

laRocca · 14.01.2014, 20:22

Hallo,

ich habe eine neue Seite in der Zange, die mit [OnePageWebsite] umgesetzt wird.

Vorerst ist die Startseite noch eine Under Construction-Seite - deshalb ist sie in meiner Seitenstruktur auch die erste Unterseite movebetter.jpg

Wenn ich jetzt auf MEINER STARTSEITE (wo ich im Hintergrund am werkeln bin) auf einen der onepage-nav-punkte klicke, wird jedoch nicht wie gewünscht zum Artikel-Bereich gesrollt, sondern auf die startseite gelinkt. In der URL ist allerdings am Ende die ID der Unterseite angezeigt (Beispiel: Klick auf Kontakt - leitet zu http://www.move-better.de/#kontakt)

Ich hab jetzt mal versucht die Under Construction-Seite in der Seitenstruktur auf "nicht veröffentlicht" zu stellen und dann funktioniert die onepage-nav auch so wie gewünscht.

Das Problem ist jetzt - wie erreiche ich denn jetzt meine Seite RICHTIG - ohne die Under Construction-Seite zu verlieren?

Danke
& LG

Mike1410 · 14.01.2014, 20:28

Warum machst du das nicht einfach nur mit Artikeln und jquery-smoothscroll?

**Tim G** · 15.01.2014, 08:16

Zitat von laRocca

Hallo,

Das Problem ist jetzt - wie erreiche ich denn jetzt meine Seite RICHTIG - ohne die Under Construction-Seite zu verlieren?

Danke
& LG

Stell die Weiterleitungsseite in der Navi auf die Seite auf der du arbeitest.

laRocca · 16.01.2014, 18:39

im navi-modul steht die weiterleitungsseite auf "markus bremen" - welche die erste meiner seiten ist. in der hierarchie der one-page-referenz-seite.
ich hab aber auch alle möglichen anderen varianten ausprobiert u es funzt nich

**Tim G** · 17.01.2014, 09:32

Zitat von laRocca

im navi-modul steht die weiterleitungsseite auf "markus bremen" - welche die erste meiner seiten ist. in der hierarchie der one-page-referenz-seite.
ich hab aber auch alle möglichen anderen varianten ausprobiert u es funzt nich

Bitte die neueste Version von GitHub aus dem <dev> branch nutzen. Da wurde der Fehler behoben, wenn die erste Seite der Webseite auch die OPW Struktur beinhaltet.