Sprungmarken-Navigation?

[nurich]

Hallo,

der neuste Trend sind ja Webseiten, welche aus einer einzelnen Seite bestehen.
Die ganzen Inhalte(Artikel) der Menüpunkte(Kategorien) befinden sich untereinander auf einer einzelnen Seite.

Z.B. kann man über die Navigation "Leistungen" via Sprungmarke an die Stelle "Leistungen" gebracht werden.
Eine Seite von vielen wäre diese hier: http://www.merz-benzing.de
Ich selbst weiß leider nicht wie sich diese Webseiten bzw. dieser Stil nennt.

Wie kann man diese Navigation und deren Inhalte mit Contenido realisieren? Gibt es hierfür schon Navigationen bzw. Module?

Viele Grüße
NurIch

[Faar]

Such mal nach dem Begriff "Singlepage".
Irgendwo hat das einer mal beschrieben wie das mit Contenido geht.

[nurich]

Danke für die Antwort.
Es gibt zwar Treffer zu "Singlepage" und "One-Page", aber eine direkte Lösung gibt es wohl noch nicht wirklich. Vielleicht habe ich auch etwas übersehen.

Es werden Beispiele mit Blog-Modulen angesprochen. Wäre aber nicht wirklich die Lösung hierfür.
Auch die Benutzung von WordPress - wäre aber ein ständiges umlernen, wenn man für jede Umsetzung ein geeignetes CMS einsetzen muss.

ich werde weiter nach "Singlepage" bzw. "One-Page" recherchieren und bei einem möglichen Fund dies selbstverständlich hier posten.

Gibt es vielleicht hier jemanden, der diese Lösung in Contenido anbietet bzw. umsetzen kann?
Wäre natürlich richtig klasse!


Von mir nun einige Ideen für die Umsetzung. Vielleicht können diese Ideen ein wenig für die Realisierung nützen.
Bitte gerne Kritiken wie z.B. "geht nicht, weil...", "grundsätzlich machbar, aber..." usw.. Freue mich über jeden Beitrag!

- Modul programmieren, welche sich als Container im Layout einbinden lässt.
- Dieses Modul lässt sich z.B. wie das Teaser-Modul im Seiteneditor bearbeiten. Auswahl der gewünschten Artikel aus den Kategorien. Wie üblich Kategorien mit Artikel füllen.
- Einen neuen Navigationscontainer, welcher den Link der erstellten Kategorien bzw. Menüpunkte als Sprungmarken setzt.
- In den Artikeln, welche auf die One-Page kommen, eine Möglichkeit z.B. unter Eigenschaften eine Sprungmarke zu setzen.. oder direkt über den Editor.
- Die gewählten Artikel aus den Kategorien werden nun auf dieser One-Page untereinander ausgegeben. Reihenfolge der Artikel lässt sich auch bearbeiten.
... später kann dann das ganze mit jquery etc. erweitert werden (sanftes scrollen usw.)

[McHubi]

aber eine direkte Lösung gibt es wohl noch nicht wirklich.

Wirst Du auch nicht finden. Contenido ist kein Joomla, Wordpress & Co. bei dem man einfach irgend ein fertiges Template drüberbügelt. Bei Contenido ist "selbst ist der Admin" gefragt. Das mag zwar manchen enttäuschen weil es mehr Arbeit bedeutet, aber dafür sind Dir alle Freiheiten gegeben.

Letztlich brauchst Du für dieses Projekt nur ein Layout ohne Navigation und verwendest statt dessen Sprungmarken. Simpel ausgedrückt, packst Du einfach z.B. 10 Textmodule untereinander, nummerierst sie und springst dann per Anker dorthin. Das ganze dann noch von den Inhalten her flexibel, also responsive, gestalten und das war es. Wenn du auf "Schnickschnack" Wert legst, animierst Du die Sprünge zu den jeweiligen Inhalten per Javascript und/oder html5.

[Faar]

Ich würde jetzt hier gerne den "Daumen nach oben" Button drücken,
... aber es ist keiner da.

[nurich]

....Letztlich brauchst Du für dieses Projekt nur ein Layout ohne Navigation und verwendest statt dessen Sprungmarken. Simpel ausgedrückt, packst Du einfach z.B. 10 Textmodule untereinander, nummerierst sie und springst dann per Anker dorthin. Das ganze dann noch von den Inhalten her flexibel, also responsive, gestalten und das war es. Wenn du auf "Schnickschnack" Wert legst, animierst Du die Sprünge zu den jeweiligen Inhalten per Javascript und/oder html5.

Danke! So in etwa hatte ich es mir auch überlegt. Nur kam dann der Gedanke, das ganze vielleicht doch dynamischer zu lösen - wie man es von Contenido her kennt.
Die Webseite sollte ein Laie befüllen können -> ohne irgendwelche Programmierkenntnisse.

Ich habe oben noch einmal meinen Beitrag bearbeitet und eine vielleicht mögliche Idee hinzugefügt.
Sollte dies aber nicht umzusetzen sein, werde ich letztlich doch auf die Lösung wie von Dir zugreifen müssen.
Ist am einfachsten, aber halt nicht die idealste Art.

[McHubi]

Warum nicht die idealste Art? Kommt halt immer drauf an, was "der Laie" befüllen können soll. Wenn er einfach den Inhalt der einzelnen Elemente bearbeiten können soll, kannst Du es ganz normal über die vorhandenen Module lösen. Hier ist mal was zum "spielen" (basiert auf http://jsfiddle.net/DruwJ/1/). Die "parts" brauchst Du nur noch durch Module ersetzen

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Scrolling to anchors</title>

<style type="text/css">
body {
font-family: arial, helvetica, sans-serif;
}
div.box_main {
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 1%;
}
div.box_jumpers {
position: fixed;
background-color: #999999;
}
div.part {
border: 1px solid #777777;
padding: 1%;
background-color: #9f9f9f;
margin-bottom: 2em;
margin-top: 5em;
overflow: hidden;
}
div.margin_bottom {
margin-bottom: 50%;
}
span.jumper {
padding-left: 1%;
padding-right: 1%;
background-color: #111111;
border: 1px solid #111111;
color: #ffffff;
margin: 1em;
display: block;
}
span.jumper:hover {
background-color: #ffffff;
color: #111111;
cursor:pointer;
}
</style>
<script type='text/javascript'>
var array_part_ids=new Array("part_01","part_02","part_03","part_04","part_05","part_06");
var var_vertical_correction_additional_change=20;

function getPosition(element)
/* der Aufruf dieser Funktion ermittelt die absoluten Koordinaten
   des Objekts element */
{
  var elem=element,tagname="",x=0,y=0;
/* solange elem ein Objekt ist und die Eigenschaft offsetTop enthaelt
   wird diese Schleife fuer das Element und all seine Offset-Eltern ausgefuehrt */
  while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
  {
    y+=elem.offsetTop;     /* Offset des jeweiligen Elements addieren */
    x+=elem.offsetLeft;    /* Offset des jeweiligen Elements addieren */
    tagname=elem.tagName.toUpperCase(); /* tag-Name ermitteln, Grossbuchstaben */
/* wenn beim Body-tag angekommen elem fuer Abbruch auf 0 setzen */
    if (tagname=="BODY")
      elem=0;
/* wenn elem ein Objekt ist und offsetParent enthaelt
   Offset-Elternelement ermitteln */
    if (typeof(elem)=="object")
      if (typeof(elem.offsetParent)=="object")
        elem=elem.offsetParent;
  }
/* Objekt mit x und y zurueckgeben */
  position=new Object();
  position.x=x;
  position.y=y;
  return position;
}

function alertPosition(elementId)
/* gibt eine Meldung mit x und y des zu elementId gehoerenden Elements aus */
{
  var a,element;
/* Element-Objekt zur ID ermitteln */
  element=document.getElementById(elementId);
/* Position bestimmen und melden */
  a=getPosition(element);
  //window.alert("Position "+elementId+": ("+a.x+","+a.y+")");
}

var array_positions=new Array('0');
function getPositions()
  {
  var a,element;
  array_part_ids.forEach(function(elementId)
    {
	element=document.getElementById(elementId);
    a=getPosition(element);
    //window.alert("Position x y "+elementId+": ("+a.x+","+a.y+")");
	array_positions.push(a.y-var_vertical_correction_additional_change);
    });
  //document.getElementById('infos').innerHTML=array_positions;
  }
  
  
  
  
window.onload=function(){
window.smoothScrollTo = (function () {
  var timer, start, factor;
  return function (target, duration) {
    var offset = window.pageYOffset,
        delta  = target - window.pageYOffset; // Y-offset difference
		//alert('offset: '+offset+' delta: '+delta);
    duration = duration || 1000;              // default 1 sec animation
    start = Date.now();                       // get start time
    factor = 0;
    if( timer ) {
      clearInterval(timer); // stop any running animations
    }
    function step() {
      var y;
      factor = (Date.now() - start) / duration; // get interpolation factor
      if( factor >= 1 ) {
        clearInterval(timer); // stop animation
        factor = 1;           // clip to max 1.0
      } 
      y = factor * delta + offset;
      window.scrollBy(0, y - window.pageYOffset);
    }
    timer = setInterval(step, 10);
    return timer;
  };
}());
}

function change_jumpers(part_id)
  {
  array_part_ids.forEach(function(elementId)
    {
	if(part_id!=elementId)
	  {
	  //alert('part_id ungleich elementID '+part_id+' '+elementId);
	  document.getElementById('jumper_'+elementId).style.backgroundColor="#111111";
      document.getElementById('jumper_'+elementId).style.color="#ffffff";
	  }
	  else
	    {
		//alert('part_id identisch elementID '+part_id+' '+elementId);
		document.getElementById('jumper_'+part_id).style.backgroundColor="#ffffff";
        document.getElementById('jumper_'+part_id).style.color="#111111";
		}
    });
  }
function additional_effects(part_id) {
if(part_id=="part_01")
  {
  document.body.style.backgroundColor="red";
  }
if(part_id=="part_02")
  {
  document.body.style.backgroundColor="blue";
  }
if(part_id=="part_03")
  {
  document.body.style.backgroundColor="white";
  }
if(part_id=="part_04")
  {
  document.body.style.backgroundColor="yellow";
  }
if(part_id=="part_05")
  {
  document.body.style.backgroundColor="green";
  }
if(part_id=="part_06")
  {
  document.body.style.backgroundColor="lime";
  }
if(part_id=="back_to_top")
  {
  document.body.style.backgroundColor="white";
  }
change_jumpers(part_id);
document.body.style.transition="2s";
}

window.onscroll = scroll;
function scroll () {
//alert(window.pageYOffset);
  if(window.pageYOffset<array_positions[2])
    {
	document.body.style.backgroundColor="red";
    change_jumpers('part_01');
	}
  if(window.pageYOffset>array_positions[2]&&window.pageYOffset<array_positions[3])
    {
	document.body.style.backgroundColor="blue";
    change_jumpers('part_02');
	}
  if(window.pageYOffset>array_positions[3]&&window.pageYOffset<array_positions[4])
    {
	document.body.style.backgroundColor="white";
	change_jumpers('part_03');
	}
  if(window.pageYOffset>array_positions[4]&&window.pageYOffset<array_positions[5])
    {
	document.body.style.backgroundColor="yellow";
    change_jumpers('part_04');
	}
  if(window.pageYOffset>array_positions[5]&&window.pageYOffset<array_positions[6])
    {
	document.body.style.backgroundColor="green";
    change_jumpers('part_05');
	}
  if(window.pageYOffset>array_positions[6])
    {
	document.body.style.backgroundColor="lime";
    change_jumpers('part_06');
	}
  if(window.pageYOffset==0)
    {
	document.body.style.backgroundColor="white";
    change_jumpers('back_to_top');
	}
  document.body.style.transition="1s"; 
  }
</script>


</head>
<body>

<div class="box_jumpers">
  <span class="jumper" id="jumper_part_01" onclick="smoothScrollTo(document.getElementById('part_01').offsetTop);additional_effects('part_01')">part one</span>
  <span class="jumper" id="jumper_part_02" onclick="smoothScrollTo(document.getElementById('part_02').offsetTop);additional_effects('part_02')">part two</span>
  <span class="jumper" id="jumper_part_03" onclick="smoothScrollTo(document.getElementById('part_03').offsetTop);additional_effects('part_03')">part three</span>
  <span class="jumper" id="jumper_part_04" onclick="smoothScrollTo(document.getElementById('part_04').offsetTop);additional_effects('part_04')">part four</span>
  <span class="jumper" id="jumper_part_05" onclick="smoothScrollTo(document.getElementById('part_05').offsetTop);additional_effects('part_05')">part five</span>
  <span class="jumper" id="jumper_part_06" onclick="smoothScrollTo(document.getElementById('part_06').offsetTop);additional_effects('part_06')">part six</span>
</div>

<div class="box_main">
<div id="infos"></div>

<div class="part" id="part_01">
  <h1>Part one - red</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <span class="jumper" onclick="smoothScrollTo(document.getElementById('part_02').offsetTop);additional_effects('part_02')">part two</span>
  </div>

<div class="part" id="part_02">
  <span class="jumper" onclick="smoothScrollTo(document.getElementById('part_01').offsetTop);additional_effects('part_01')">part one</span>
  <h1>Part two - blue</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <span class="jumper" onclick="smoothScrollTo(document.getElementById('part_03').offsetTop);additional_effects('part_03')">part three</span>
</div>

<div class="part" id="part_03">
  <span class="jumper" onclick="smoothScrollTo(document.getElementById('part_02').offsetTop);additional_effects('part_02')">part two</span>
  <h1>Part three - white</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <span class="jumper" onclick="smoothScrollTo(document.getElementById('part_04').offsetTop);additional_effects('part_04')">part four</span>
</div>

<div class="part" id="part_04">
<span class="jumper" onclick="smoothScrollTo(document.getElementById('part_03').offsetTop);additional_effects('part_03')">part three</span>
  <h1>Part four - yellow</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <span class="jumper" onclick="smoothScrollTo(document.getElementById('part_05').offsetTop);additional_effects('part_05')">part five</span>
</div>

<div class="part" id="part_05">
  <span class="jumper" onclick="smoothScrollTo(document.getElementById('part_04').offsetTop);additional_effects('part_04')">part four</span>
  <h1>Part five - green</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <span class="jumper" onclick="smoothScrollTo(document.getElementById('part_06').offsetTop);additional_effects('part_06')">part six</span>
</div>

<div class="part" id="part_06">
  <span class="jumper" onclick="smoothScrollTo(document.getElementById('part_05').offsetTop);additional_effects('part_05')">part five</span>
  <h1>Part six - lime</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <span class="jumper" onclick="smoothScrollTo(document.getElementById('part_01').offsetTop);additional_effects('part_01')">part one</span>
</div>

</div>

<span class="jumper" onclick="smoothScrollTo(0, 500);additional_effects('back_to_top')">back to top</span>

<div class="margin_bottom">
  &nbsp;
</div>

<script type="text/javascript">
getPositions();
</script>

</body>

</html>

Wo ist nur dieser Daumen?

[Zuschauer]

Letztlich brauchst Du für dieses Projekt nur ein Layout ohne Navigation und verwendest statt dessen Sprungmarken. Simpel ausgedrückt, packst Du einfach z.B. 10 Textmodule untereinander, nummerierst sie und springst dann per Anker dorthin. Das ganze dann noch von den Inhalten her flexibel, also responsive, gestalten und das war es. Wenn du auf "Schnickschnack" Wert legst, animierst Du die Sprünge zu den jeweiligen Inhalten per Javascript und/oder html5.

Ganz so einfach ist es dann doch wieder nicht.
Da ein One-Page-Design eigentlich aus mehrere Seiten besteht, besteht die tatsächliche Website aus Themen, und die sollten bei den Suchmaschinen einzeln gelistet werden und auch individuell anspringbar sein (aus den Suchergebnisseiten der Suchmaschinen).
Und dafür braucht man eine ganze Menge Javascript, welches beim Scrollen (egal ob über die Navi oder manuell) die URL anpasst (dass alle URLs dann auf die Startkategorie gehen müssen ist natürlich klar, aber das kann man per .htaccess steuern).
Außerdem sollte beim manuellen Scrollen die Navi angepasst werden damit sie den richtigen Punkt highlightet.
Und die Navi sollte sich natürlich immer im Sichtbereich befinden
Für Suchmaschinen sollte man evtl. noch eine separate, herkömmliche Ausgabe bereitstellen, da dies das Indexieren besser steuert.

Was viele One-Page-Seiten noch bieten, ist entweder unterschiedliche Backgrounds für die einzelnen Bereiche, oder ein Background der eine andere Scrollgeschwindigkeit hat als der Content.
Und das Ganze dann auch noch responsive, das ist mal eine Aufgabe

Gruß
Zuschauer

PS: Mit Contenido 4.9 mache ich nichts, also dafür bitte keine Angebotsanfrage.
Für Contenido 4.8 gerne

[nurich]

sou, hatte mal testweise den Code von McHubi als Layout angelegt. Was ich mir ja gedacht hatte war genau das, was eingetreten ist: Die Sprungmarken versucht Contenido als Seiten zu öffnen. D.h. es wird eine neue Seite + nichtfunktionierende Sprungmarke geöffnet. Somit funktioniert das ganze JS-Gedöhns nicht.
Ansich wäre die Idee ja fürs erste OK. Nur funktioniert es mit der Navi nicht - wenn es hier Lösungen gibt, dann wäre das schon gut.

@Zuschauer
Ouh ja, das mit Suchmaschinen ist so eine Sache. Jedes Wort auf der Seite wird dann schon gefunden, aber halt nur diese eine Startseite/index.
Bei all den Dingen gebe ich Dir völlig recht.
Aber wieso macht die 4.9 Probleme? hatte gelesen, dass ab 4.9 es etwas schleppender von der Performace ist - bei einer 6er Leitung kann ja alles möglich sein.
Bei der 4.8 ist aber das Problem u.a. mit dem Import von CSV-Dateien für den Newsletter und die Rechtevergebung von Redakteuren.
Ich hätte nichts dagegen die 4.8 zu verwenden.

Die Sache ist, dass wenn ich keine Lösung für eine One-Page finde, muss ich die Anfrage canceln

[McHubi]

Kopiere mal meinen code so wie er ist in ein Layout. Er funktioniert, und Du kannst damit eine Singlepage auch umsetzen. Inhalte der Parts lassen sich über Redakteure schon jetzt pflegen, wenn es um die Pflege der Navigation geht wird es allerdings was komplizierter.
Hast Du die navigation_main verwendet? Vermute, ja - denn die erzeugt einen Seitenreload, der eben nicht gewünscht ist. Die Navigation erstellst Du also selbst in einem eigenen Modul, indem Du den Inhalt des <div> für die Jumper dorthin auslagerst - verwende, wie gesagt, nicht das Navigationsmodul von Contenido. Mehrsprachigkeit kannst Du z.B. über mi18n auch erreichen. Und über die Konfiguration kannst Du den Inhalt der Navi komplett verwalten, da gibt es einige Möglichkeiten. Du kannst Dich natürlich auch an die Anpassung der Navigation_main heranwagen...

welches beim Scrollen (egal ob über die Navi oder manuell) die URL anpasst [...] Außerdem sollte beim manuellen Scrollen die Navi angepasst werden damit sie den richtigen Punkt highlightet.

Da gebe ich Dir Recht.

Und die Navi sollte sich natürlich immer im Sichtbereich befinden

Ist schon der Fall.

Was viele One-Page-Seiten noch bieten, ist entweder unterschiedliche Backgrounds für die einzelnen Bereiche, oder ein Background der eine andere Scrollgeschwindigkeit hat als der Content.
Und das Ganze dann auch noch responsive, das ist mal eine Aufgabe

Jupp, Parallaxe und Co. Das Ändern des Hintergrunds habe ich im obigen Beispielcode schon einmal integriert. Die Änderung beim Scrolling wird über einen event-listener gesteuert, der prüft, ob der jeweilige Part den oberen Fensterrand berrührt. Ist das der Fall, wird der Hintergrund angepasst. Das bedingt jedoch, das unterhalb des letzten Parts "genügend" Weißraum vorhanden ist, damit der letzte Part auch die Chance hat oben "anzustoßen".

Weil es immer fraglich ist, ob dieses Brimborium sich lohnt, gewünscht wird, die Kosten dafür getragen werden und wie das alles im Detail aussehen soll: keine fertigen Geschichten vorhanden. Für eine simple Singlepage passt die gepostete Lösung aber bereits. Egal ob 4.8 oder 4.9

[Zuschauer]

Aber wieso macht die 4.9 Probleme?

Ich habe nichts von Probleme gesagt, nur dass ich damit nicht arbeite.

Ich hätte nichts dagegen die 4.8 zu verwenden.

Na dann, wenn du nicht weiter kommst, schreib mich gerne an (PN oder Mail, Buttons rechts), dann mache ich dir ein Angebot

Hast Du die navigation_main verwendet? Vermute, ja - denn die erzeugt einen Seitenreload, der eben nicht gewünscht ist.

Per jQuery kann man den einfach unterbinden indem man folgendes macht:

Code: Alles auswählen

    $('.navi a').click(function(e) {
        e.preventDefault();

(davon ausgegangen dass die Navigation im Bereich mit 'class="navi"' liegt).

Gruß
Zuschauer

[nurich]

Vielen Dank! Werde mal eine neue Navi anlegen und es versuchen!

Grüüüüße!

[McHubi]

Bitte, gerne!
Habe im obigen Code auch gleich noch den Wechsel des Hintergrunds beim Scrollen und das Highlighten des gerade "aktiven" parts eingebunden...