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

**AndreasC** · 22.03.2014, 08:34

Hi ich nochmal,

hab mein Glück mal probiert um den Text der Links in der Liste aus der Pagnition zu entfernen,
finde mich aber in den Dateien nicht so gut zurecht, hat da jemand einen Tip für mich?

Grüße und nettes We

**Spooky** · 22.03.2014, 08:47

Zitat von AndreasC

Hi ich nochmal,

hab mein Glück mal probiert um den Text der Links in der Liste aus der Pagnition zu entfernen,
finde mich aber in den Dateien nicht so gut zurecht, hat da jemand einen Tip für mich?

Grüße und nettes We

Mit

PHP-Code:


.mod_onepagewebsitenavigation > ul > li > a {

    display:block;

    text-indent:100%;

    overflow:hidden;

    white-space:nowrap;

}

kannst du alternativ auch den Text per CSS ausblenden lassen.

**AndreasC** · 22.03.2014, 11:57

Vielen Dank!

**Eva** · 28.03.2014, 05:25

Hallo Zusammen

Ich bin an einer Website und arbeite dort mit dem Onepage (aktuelle Version aus GitHub). Jetzt habe ich das Problem, dass mir das MooTool in mein jQuery (das brauche ich für eine Funktion in einer Tabelle) funkt und es ausser Gefecht setzt. Irgendwo habe ich hier gelesen, dass man das Mootool der OnePage auf jQuery umschreiben kann. Kann mir jemand genau erklären, was ich wo ändern muss oder hätte mir jemand eine Vorlage? So hätte ich nur noch jQuery und könnte das MooTool ausschalten.

Ich wäre sehr dankbar!
Liebe Grüsse
Eva

**Tim G** · 28.03.2014, 10:49

Zitat von Eva

Hallo Zusammen

Ich bin an einer Website und arbeite dort mit dem Onepage (aktuelle Version aus GitHub). Jetzt habe ich das Problem, dass mir das MooTool in mein jQuery (das brauche ich für eine Funktion in einer Tabelle) funkt und es ausser Gefecht setzt. Irgendwo habe ich hier gelesen, dass man das Mootool der OnePage auf jQuery umschreiben kann. Kann mir jemand genau erklären, was ich wo ändern muss oder hätte mir jemand eine Vorlage? So hätte ich nur noch jQuery und könnte das MooTool ausschalten.

Ich wäre sehr dankbar!
Liebe Grüsse
Eva

Mootools und jQuery können parallel existieren. Im Seitenlayout kannst du auch beides hinzufügen. Was man ergänzen sollte wäre im <head>

<script>$.noConflict();</script>

bzw. <script>jQuery.noConflict();</script>

**Eva** · 28.03.2014, 13:07

Hallo Tim

Vielen Dank für Deinen Tipp. Ich habe es soeben ausprobiert und leider funktioniert es nicht. Die Tabelle funktioniert nur, wenn ich MooTools deaktiviere. Dann geht aber das OnePage nicht mehr richtig. Ich habe den Code nochmals angeschaut und es ist nur Javascript, kein jQuery. Ich habe zur Sicherheit noch MooTools und jQuery ausgeschaltet und dann funktioniert der Code wunderbar. Mit eingeschaltetem jQuery funktioniert er auch, nur in Kombination mit MooTools nicht.

An was kann das liegen?
Liebe Grüsse
Eva

**Eva** · 28.03.2014, 17:40

Problem gelöst

Liebe Grüsse
Eva

**Thoni** · 28.03.2014, 20:30

Zitat von Eva

Problem gelöst

Liebe Grüsse
Eva

Kannst du schreiben, was du gemacht hast?

Danke

**Eva** · 02.04.2014, 08:42

@ Thoni: Ich hatte im Javascript aus Versehen show und hide benutzt, welches dann bei MooTools Befehle ausgelöst hat..... habe die Bezeichnungen ausgetauscht und gut war

Liebe Grüsse
Eva

**Vianon** · 05.05.2014, 15:22

Sorry, hab die Frage ausversehen überschrieben. Ich vergesse immer, dass ich hier Moderationsrechte habe.
Poste Deine Frage bitte nochmal, damit andere diese noch sehen.

Was spricht gegen eine Interne Weiterleitung?
Seite 5 als Interne Weiterleitung auf Deine Formularseite, die irgendwo ausserhalb der OPW liegt.

**Vianon** · 05.05.2014, 17:53

Hi Tim,

kein Problem. Wollte nur wissen, wie ich eine Seite im OP-Layout ausblenden kann ohne den Menüpunkt zu verlieren bzw. auf eine entsprechende Seite außerhalb der OP-Layouts leiten kann.

Die interne Weiterleitung hatte ich schon versucht, zumindest so wie ich sie kenne:

In der Seitenstruktur unter OP die umzuleitende Seite gewählt, dann auf interne Weiterleitung gestellt und dann als Weiterleitungsseite, die Seite außerhalb vom OP-Layout gewählt unter der der Inhalt zu finden ist.
Das Menü war damit ok, Inhalt hat man nicht gesehen, so wie gewollt, aber bei einem Klick auf den Menüpunkt passiert leider nichts. Der zeigt mir in der Statusleiste "domain.com/#page15" an, also den Anker. Sollte da nicht der entsprechende Link stehen?

Hab ich noch etwas vergessen?

Gruß

Vianon

**Tim G** · 06.05.2014, 10:23

In den Seiteneintellungen gibt es auch den Punkt: Seite in OPW verstecken.

Das Menü handelt Deine Seite weiterhin als Element der OPW, weil es halt die OPW Navi ist, die ist halt so.

Im Navi Temple könnte man direkt die Seite per Id ansprechen und den Link umschreiben. Wäre ne Möglichkeit

Sent from my iPhone using Tapatalk

**Vianon** · 08.05.2014, 08:34

Ok, Danke. Habs mal versucht abzuändern aber Javascript ist irgendwie nicht so meins.

Hätte hier jemand eine Idee wie ich das Template anpassen müsste um einen der Anker der OP-Navi in einen normalen Link bzw. internen Link per ID umwandle?

**Tim G** · 08.05.2014, 10:13

Nicht im JS, im Contao Navi Template

Hier als Beispiel das nav_default.
Wenn die Seite, ID=10 abgearbeitet wird, wird der Link auf contao.org umgeschrieben.

PHP-Code:


<ul class="<?php echo $this->level; ?>">

  <?php foreach ($this->items as $item): ?>

  <?php

  if($item['id'] == 10)

  {

      $item['href'] = 'http://www.contao.org';

  }

  

  ?>

    <?php if ($item['isActive']): ?>

      <li class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>

    <?php else: ?>

      <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>

    <?php endif; ?>

  <?php endforeach; ?>

</ul>

**Vianon** · 08.05.2014, 17:31

Da hatte ich wohl einen kleinen Denkfehler^^

Ich danke dir recht herzlich. Habs nun angepasst und es klappt wie gewollt.

**comanche** · 15.05.2014, 10:47

Hallo,

ich hab' einen Fehler - oder vielmehr ein Problem - mit der Navigation:

Sobald ich den Artikel (div.mod_article), in dem sich das OPW-Modul (div.mod_onepagewebsiteregular) befindet, auf eine Breite von 100% setze, dann wird in der Navigation immer nur der letzte Eintrag als "active" gesetzt.

HTML-Code:

<div id="container">
      <div id="main">
        <div class="inside">
          <div  id="leistungen">
             <div class="mod_article first last block">

                 <!-- indexer::stop -->
                 <div class="mod_onepagewebsiteregular block">

Mein CSS macht einfach folgendes:

HTML-Code:

body.leistungen #main > div.inside > div > div.mod_article {
width: 100%;
margin-right: 0;
margin-left: 0;
}

Deaktiviere ich die CSS-Anweisung, so dass der Artikel wieder eine Standard-Breite von 960 px bekommt, dann wird die Klasse "active" in der OP-Navigation wieder korrekt vergeben (beim Klicken und Scrollen).

Wie kann ich das Problem lösen? Hat jemand eine Idee?

Vielen Dank schonmal,

Andreas

**Tim G** · 15.05.2014, 11:59

Ich rate einfach mal

Kommentiere den Bereich im Javascript aus, der für die horizontale Berechnung beim Scrollen verantwortlich ist im mod_onepagenavigation Template.
Etwas ähnliches oder gleichen hatten wir hier mal. Find's grad nicht.

**comanche** · 15.05.2014, 12:40

Zitat von Tim G

Ich rate einfach mal

Kommentiere den Bereich im Javascript aus, der für die horizontale Berechnung beim Scrollen verantwortlich ist im mod_onepagenavigation Template.
Etwas ähnliches oder gleichen hatten wir hier mal. Find's grad nicht.

Da kann ich mich auch vage dran erinnern. Ich werd' mal danach suchen und dann berichten ...

Danke, Tim!

Gruß,

Andreas

**comanche** · 15.05.2014, 13:08

Ok, der Tipp mit der horizontalen Berechnung war der Richtige! Hätte ich nur mal die Postings genauer gelesen.

Spooky hatte auch schon die Lösung geposted. Ich habe daraufhin anstatt "0" einen negativen Wert eingetragen, und nun passt alles.

Code:

var intOffsetX = -2; // move the X break point further left or right

Vielen Dank!

**chinagirl** · 16.05.2014, 11:58

hi tim,

kompliment zu deinem coolen modul!

ich hätte eine frage an dich bezügl. responsive website:
ich verwende gerne die erweiterung mobile_extended, da ich mit dieser, artikel bzw. teile eines artikel, für die mobile version ausblenden kann.
ich habe eine onepagewebsite laut deiner beschreibung und mit deinem modul angelegt und wollte sie mit dem modul mobile_extended für mobile versionen tauglich machen.

es funktioniert nicht.
mache ich etwas falsch oder habe ich einen denkfehler?

lieben gruß
chinagirl

**AndreasC** · 22.05.2014, 14:43

Hi tim,

vielen Dank für das tolle Plugin.
Nun ist es so, das wenn ich die erstellte Webseite über Google suche, mir auch die einzelnen Unterseiten angezeigt werden,
nur diese leider ohne CSS, JS etc. da ja alles im Layout Standartstruktur eingebunden wurde.

Kann ich diese Links irgendwie "verstecken" vor Google?

Grüße

AndreasC

**Tim G** · 22.05.2014, 16:38

Einstellungen der Seite > Noindex, nofollow

**AndreasC** · 23.05.2014, 07:57

Nur wird dann die gesamte Seite nicht mehr gelistet vermutlich?

Grüße

**Tim G** · 23.05.2014, 12:02

Nur für die Unterseiten der OnePage.

**AndreasC** · 23.05.2014, 13:39

Danke, probier ich mal, mal sehen wie die Ergebnisse in ein paar Tagen aussehen.

Viele Grüße

**boomroot** · 23.06.2014, 08:12

Moin Moin,

mir gelingt es leider nicht das der Slider bzw. das Hintergrundbild genau mit der Browserkante abschließt.
Hat da jemand eine Idee?

Gruß
Boomroot

**andrea$** · 15.07.2014, 15:32

Zitat von Tim G

Klar geht das. Habe das in einem aktuellen Projekt auch so.
In dem moo_smoothScroll Template ein negativ Offset vergeben:

Code:

var offsetY = 153;
	
	new Fx.SmoothScroll(
	{
	   duration: 800,
	   offset: {'y':-offsetY}
	});

in diesem Beispiel ist der Header 153px.

Man kann auch ganz viel mit CSS richten. Die onepage Struktur ist hervorragend zu stylen, durch die <ul> Liste Struktur.

schöne Seite! Scrollen ist aber etwas problematisch (Opera 12.17) - Zutaten wird nicht angesprungen wenn ich bei INSPIRATION bin. Ich glaube der oder die Anker ist/sind falsch gesetzt?
Ist die Überschrift z.B. von BERUFUNG zu sehen, springt er nicht zum Inhalt. Das finde ich nicht gut weil ich dann noch manuell Scrollen muß.

**Tim G** · 16.07.2014, 08:42

Was ist Opera?

Die Seite ist komplett überarbeitet in einer noch gesicherten Installation für 3.2. Die aktuelle ist Auslaufmodel.

**andrea$** · 21.08.2014, 01:39

Zitat von Tim G

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

Ist das mittlerweile einfacher zu lösen? Ich verstehe so gut wie nichts davon was du hier erklärst.
Ich würde das mit einem Kontaktformular gerne so machen:
schickt man das Formular ab, öffnet sich ein Lightboxfenster mit der Bestätigungsseite oder eben ein Artikel.

Habe Leider keine JS/PHP Kenntnisse

**vanishingspark** · 22.08.2014, 17:58

Hallo in die Runde,

erst mal möchte ich mich anschließen und für die tolle Erweiterung bedanken.
Dahingehend habe ich auch alles zum Laufen gebracht, nun ergibt sich aber ein Konflikt mit Mootools und jQuery bzw. dem Filter isotope.

Es funktioniert entweder das eine oder das andere. Die Scriptzeile zur Konfliktlösung zwischen den beiden Bibliotheken, die weiter oben gepostet wurde, schafft leider auch keine Abhilfe.

Hat jemand eine Idee?

zur Testseite
Der Filter befindet sich im Bereich Portfolio.

Vielen Dank und schönes Wochenende an alle

**ciaobello** · 22.08.2014, 18:42

Hast Du die aktuellste Version von Github von der Erweiterung?

Verlink doch bitte den Hinweis von "weiter oben" (Du kannst Das machen mit Zitieren unter dem Artikel und alles was überflüssig ist löschst raus bevor speicherst).

Das ganze Thema ist zu lang um die Übersicht zu haben. Vielleicht wäre ein Auslagern mit dem Hinweis von wegen "Mootools & JQuery Konfliktmodus" von Vorteil.

**vanishingspark** · 22.08.2014, 19:44

Wow danke für deine schnelle Antwort.

Gemeint war diese Zeile

Zitat von Tim G

Ich benutze Contao 3.3.2.
Die Extension habe ich von hier.
Ich habe aber gerade einmal die letzte Version von github geladen und ins Verzeichnis system/modules/ gelegt (an Stelle des Ordners aus der o.g. Datei), allerdings wird dann der Inhalt nur noch bruchstückhaft angezeigt: Oben der Titel der Seite (h1) sowie der Copyright-Text; Navigation etc. sind verschwunden.

Variante 1: Navi+Smooth Scroll funktioniert
Das Problem scheint noch nicht einmal zu sein, dass jQuery (mit Colorbox) geladen wird, denn dann klappt die Navigation sowie das SmoothScrolling noch.
Füge ich jedoch den Verweis auf <script src="./files/js/isotope.pkgd.min.js"></script> bei den zusätzlichen Head-Tags hinzu, funktioniert das beides nicht mehr.

Variante 2: Filter funktioniert
Mit jQuery aktiviert und Mootools deaktiviert und dem Link <script src="./files/js/isotope.pkgd.min.js"></script> bei den Header-Tags hinzugefügt, funktioniert die Navi/Scroll nicht mehr (klar), aber isotope.
Wenn <script>jQuery.noConflict();</script> auch noch bei den zusätzlichen Head-Tags steht, funktioniert isotope aber auch nicht. (Gehört das so dort hin? Vielleicht habe ich es falsch eingesetzt).

Jetzt gerade ist Mootools deaktiviert.

**matbad** · 23.08.2014, 08:49

Guten Tag zusammen,

Ich habe dieses Problem bereits in einem anderen Thread gepostet. Da in der contaoWiki jedoch dieser Thread angegeben ist (leider zu spät gesehen), möchte ich das Problem nochmal schildern.
Ich hoffe auf etwas Hilfe von Profis, da ich als Anfänger nicht mehr weiter komme.

Ich wollte eine OnePage mithilfe der Erweiterung erstellen und habe mich nach der Anleitung in der contaoWiki (de.contaowiki.org/OnePageWebsite) gerichtet. Nun habe ich das Problem das, wenn ich auf einen Link in der Navigation gehe, ich immer an Page#1, Page#2 etc weitergeleitet werde. Außerdem werden mir die Inhalte nicht auf einer Seite angezeigt. Aus dem Forum entnehme ich das die Erweiterung mit der Aktuellen Contao Version nicht perfekt funktioniert und ich eine manuelle Installation hätte vornehmen sollen.

Da ich kein Profi bin und nicht sonderlich schnell, wäre es für mich ein unheimlicher Zeitaufwand die Seite mit einer anderen Contao Version aufzusetzen.

Habe ich eventuell einen Fehler gemacht oder gibt es einen einfacheren Lösungsweg als die Neuinstallation?

PS: Ich kann leider nicht auf den FTP-Server zugreifen, falls es eine andere Möglichkeit gibt, müsste ich das per Backend umsetzen können.

Vielen Dank für eure Zeit.

**andrea$** · 23.08.2014, 10:01

sorry, aber du solltest keine Doppelpostings machen!

**Tim G** · 24.08.2014, 05:54

Aus dem Forum entnehme ich das die Erweiterung mit der Aktuellen Contao Version nicht perfekt funktioniert und ich eine manuelle Installation hätte vornehmen sollen.

Nutze die aktuelle Version von Github.
Ohne FTP kannst du eigentlich eh nichts machen.

**Bastian F.** · 16.09.2014, 14:18

Hallo,
Ich versuche mich derzeit mit der Extension und soweit klappt auch alles ganz gut.
Jetzt zu meiner Frage. Wenn man die Seite normal scrollt ohne sich der Bedienung via Menü zu widmen wird der jeweils aktive Menüpunkt nicht gehighlighted. Was könnte ich tun um dieses Problem zu fixen?

Danke schonmal im voraus

**ciaobello** · 16.09.2014, 14:41

Wilkommen im Forum!

1) Da musst Du dir wohl mit einem js behilflich sein. Bei einer Ankernavigation ist der "aktiv" Status immer so ein Problem.

2) Wieso begräbst Du deine Frage in so einem 355 Antworten Grossen Thema? Hast Du denn die 354 anderen Antworten durchgeschaut?

3) Vielleicht macht es darum auch Sinn diese Frage in eine eigene Anfrage auszulagern?

**Tim G** · 16.09.2014, 15:51

Zitat von Bastian F.

Hallo,
Ich versuche mich derzeit mit der Extension und soweit klappt auch alles ganz gut.
Jetzt zu meiner Frage. Wenn man die Seite normal scrollt ohne sich der Bedienung via Menü zu widmen wird der jeweils aktive Menüpunkt nicht gehighlighted. Was könnte ich tun um dieses Problem zu fixen?

Danke schonmal im voraus

Bitte github version nutzen und dort in den Navi Einstellungen die Option "Auf Scrollen reagieren" aktivieren

**andrea$** · 16.09.2014, 18:35

@Tim G,

du solltest schon darauf hinweisen, das die github nicht ohne weiteres einfach mal so in jede Contao Version installiert werden kann. Ich hatte sie testweise probiert aber das Ergebnis waren Fehlermeldungen u. ein zerschossenes Layout.

**Tim G** · 17.09.2014, 08:04

Zitat von andrea$

@Tim G,

du solltest schon darauf hinweisen, das die github nicht ohne weiteres einfach mal so in jede Contao Version installiert werden kann. Ich hatte sie testweise probiert aber das Ergebnis waren Fehlermeldungen u. ein zerschossenes Layout.

Inwiefern?
Die github contao3 Version kann in jede mit contao 3 gebaute Version eingefügt werden. Die Änderungen zur 2er sind primär Namespaces und kleinere Bugfixes, die hier durch Mitarbeit an verschiedenen Installationen durchgeführt wurden. Seitens der Templates, sind beide Versionen überwiegend identisch.
Das irgendwann das mootools Script für die Navi in das Navi Template gewandert ist, wurde kommuniziert. Das führ auch nicht zu zerschossenen Layouts. Maximal zu einem Javascript Fehler, wenn beides aktiv ist