• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Vor und zurück

janschmidt

Mitglied
Hallo ich bin auf der Suche nach der Möglichkeit auf meiner Webseite die einzelnen Seiten welche sich im selben Ordner befinden mit vor und zurück oder auch 1.2.3.4... durchzuschalten es sollte so sein das es in der Reihenfolge der Dateien also von A bis Z geht.

Leider habe ich überhaupt keinen Ansatz dazu denke das man das mit jquery macht oder? Ich hoffe das ihr mir da helfen könnt
 
Werbung:
Wie stellst Du dir das denn genau vor, soll links und rechts ein Zurück- und Vor-Button sein, so wie hier:
http://www.ulrichbangert.de/kakteen/is_load.php
Angesichts der Vielzahl der Seiten würde es sich anbieten, die Links auf diesen Buttons automatisch anzulegen, damit Du nicht alles von Hand editieren musst.
Wie sind die Seiten aufgebaut, hast Du die Teile, die überall gleich sind, mit include eingezogen? Wenn ja, könnte man in den zentralen Teilen auch die Buttons unterbringen und müsste sie dann nur mit den richtigen Links belegen.
 
Werbung:
Hallo erst einmal danke für deine Antwort also ich möchte immer nur die Pflanzen einer Gattung zum durchschauen machen. Z.b. Alle saxifragen oder alle aloe. Die Seite ist so aufgebaut das einige Sachen per includ eingebaut sind aber der content ist nicht mit includ. Mir wehre es am liebsten wenn unten auf jeder Seite ein rechts links Pfeil wehre oder 1.2.3.4.5.... hoffe ich konnte deine Frage beantworten.
 
Ja, ist mir schon klar jetzt, was Du vorhast. Bei manchen Gattungen gibt es ja nur eine einzige Seite, dafür würde dann diese Navigation entfallen, oder? Dann müsstest Du dich zunächst mal entscheiden, ob Du Vor- und Zurück-Knöpfe haben willst oder eine nummerierte Liste. (Oder beides, in der Mitte die Liste und rechts und links die Vor- und Zurück-Knöpfe. So sieht man es ja häufig.) Bei der nummerierten Liste müsste dann wahrscheinlich die Nummer der aktiven Seite hervorgehoben werden. Die nummerierte Liste könnte man ebenfalls durch ein Skript anlegen. Kannst Du Javascript und jQuery?
 
Meine Kenntnisse in Javascript sind sehr schlecht leider. Es ist mir egal ob vor zurück oder 1.2.3 was sich einfacher machen lässt. Es sollte aber so sein das wenn ich eine Pflanze hinzufügen das ich nicht alle anderen anpassen muss wenn das geht. Danke dir noch mal sehr für die hilfe
 
Werbung:
OK, dann versuche ich mal, ein passendes Skript für dich zu schreiben. Nein, Du musst nicht alle anpassen, wenn Du eine Pflanze hinzu fügst.
 
So, ich habe eine erste Version des Skriptes fertig:
Code:
$(document).ready(function () {
var re = /(.*)(\/[^\/]*\/[^\/]*\/[^\/]*)/;
var components = re.exec(location.href);
var baseurl = components[1];
var relurl = components[2];
var currentele = $("a[href='" + relurl + "']");
var prnt = currentele, i = 0;
while (!prnt.hasClass("Sub_level") && i < 5) {
prnt = prnt.parent();
i++;
}
if (prnt.hasClass("Sub_level")) {
var allele = prnt.find("a");
var currentidx = allele.index(currentele);
allele.each(function (idx, ele) {
newele = $('<a> ' + (idx + 1) + ' </a>');
newele.attr("href", $(this).attr("href"));
if (idx == currentidx) newele.addClass("activelink");
$("#navlist").append(newele);

});
if (currentidx > 0) {
var prevurl = $(allele[currentidx - 1]).attr("href");
$("#navback").attr("href", prevurl);
} else {
$("#navback").css("visibility", "hidden")
}
if (currentidx < allele.length - 1) {
var nexturl = $(allele[currentidx + 1]).attr("href");
$("#navnext").attr("href", nexturl);
} else {
$("#navnext").css("visibility", "hidden")
}
}
});
Leider sind die Einrückungen beim Einfügen hier im Forum verloren gegangen.
Dort, wo die Navigation angezeigt werden soll, notiere dieses:
HTML:
<a id="navback"> &lt; </a></a><span id="navlist"></span><a id="navnext"> &gt; </a>
Das a-Element der Ziffer der aktiven Seite hat jeweils die Klasse activelink. Du kannst diese benutzen, um die Ziffer hervorzuheben, z. B. so:
HTML:
<style>.activelink {font-size: 2em}</style>
Ich habe es mit drei Seiten aus der Gattung Achillea getestet und es hat soweit funktioniert. Wenn Du irgendwelche Probleme damit hast, melde dich wieder.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Ein weiteres mal 1000 Dank für deine Mühe und Zeit auf meiner Seite klappt es ohne Probleme aber ein Problem habe ich leider noch Ich bin dabei die Seite komplett umzustellen und auf der neuen Variante geht es leider nicht das hätte ich dir warscheinlich sagen müssen war dumm von mir. Solltest du noch mal Zeit haben und noch mal einen Blick drauf werfen können würde ich mich sehr freuen. Die Adresse schicke ich dir per Nachricht.
 
Glücklicher Weise war es relativ einfach, dass Skript an die andere Listenstruktur anzupassen:
Code:
$(document).ready(function () {
var re = /(.*)(\/[^\/]*\/[^\/]*\/[^\/]*)/;
var components = re.exec(location.href);
var baseurl = components[1];
var relurl = components[2];
var currentele = $("a[href='" + relurl + "']");
var prnt = currentele, i = 0;
while (!prnt.hasClass("deeper parent") && i < 5) {
prnt = prnt.parent();
i++;
}
if (prnt.hasClass("deeper parent")) {
var allele = prnt.find("a[href]");
var currentidx = allele.index(currentele);
allele.each(function (idx, ele) {
newele = $('<a> ' + (idx + 1) + ' </a>');
newele.attr("href", $(this).attr("href"));
if (idx == currentidx) newele.addClass("activelink");
$("#navlist").append(newele);

});
if (currentidx > 0) {
var prevurl = $(allele[currentidx - 1]).attr("href");
$("#navback").attr("href", prevurl);
} else {
$("#navback").css("visibility", "hidden")
}
if (currentidx < allele.length - 1) {
var nexturl = $(allele[currentidx + 1]).attr("href");
$("#navnext").attr("href", nexturl);
} else {
$("#navnext").css("visibility", "hidden")
}
}
});
Hast Du das Design eigentlich selbst entwickelt oder ist das ein Template?
 
Super vielen Dank noch mal es läuft alles super wirklich wunderbar. Ich danke dir. Die Seite ich nicht komplett selbergemacht aber auch kein template die Grund Idee ist von einem YouTube Video von htmlworld .
 
Werbung:
Ja, Du hast wohl recht, da ist ein </a> zu viel. Komisch, sonst meckert mein Editor gleich, wenn ich so einen Fehler mache.
Freut mich, dass es funktioniert. Du hast es ja super in deine Seite integriert.
Wenn die Seite kein Template ist, ist es aber eine gute Leistung, dass Du es entwickelt hast. Wenn Du dazu in der Lage bist, kannst Du dich sicher auch in Javascript einarbeiten.
Und unabhängig vom Webdesign ist es auch inhaltlich eine anerkennenswerte Leistung, die vielen Seiten mit den vielen Informationen aufzubauen.
 
Vielen Dank dafür ich werde mir mühe geben und mal ein Buch kaufen lesen soll helfen. Ich habe von vielen Pflanzen Ableger wenn du an was Interesse hast sag Bescheid ich schick dir gerne was die Ableger auf der Seite sind leider nicht aktuell also einfach fragen. Noch mal vielen Dank.
 
Werbung:
Tue ich gern. Um den Code zu verstehen, brauchst Du grundlegende Kenntnisse über jQuery.
Code:
// Wenn das DOM der aktuellen Seite fertig aufgebaut ist:
$(document).ready(function () {
// Regular Expression: Finde String, der vier "/" enthaelt und die Zeichenfolge davor
var re = /(.*)(\/[^\/]*\/[^\/]*\/[^\/]*)/;
// Finde Regular Expression in URL der aktuellen Seite
var components = re.exec(location.href);
// Die Basis-URL ist der erste geklammerte Teilstring (z. B. http://www.jans-pflanzenwelt.de)
var baseurl = components[1];
// Die relative URL ist der zweite geklammerte Teilstring (z. B. /steingarten/daphne/daphne.php)
var relurl = components[2];

// Das jQuery-Element zur relativen URL ist das a-Tag, wo das href-Attribut gleich der relativen URL ist
var currentele = $("a[href='" + relurl + "']");

// Das Elternelement mit der Klasse "deeper parent" finden
var prnt = currentele, i = 0;
while (!prnt.hasClass("deeper parent") && i < 5) {
prnt = prnt.parent();
i++;
}

// Pruefen, ob das Elternelement gefunden wurde
if (prnt.hasClass("deeper parent")) {
// Alle jQuery-Elemente dieser Gatttung sind die a-Elemente innerhalb des Elternelementes,
// die ein href-Attribut haben
var allele = prnt.find("a[href]");
// Index des aktuell angezeigten Elementes im Array aller Elemente ermitteln
var currentidx = allele.index(currentele);

// Fuer alle Elemente dieser Gattung:
allele.each(function (idx, ele) { // idx ist der Index des aktuell bearbeiteten Elementes
// Neues a-Element fuer die Liste in der Navigation erzeugen
newele = $('<a> ' + (idx + 1) + ' </a>');
// Diesem Element das href-Attribut des aktuell bearbeiteten Elementes geben
newele.attr("href", $(this).attr("href"));
// Wenn der Index gleich dem Index des aktuell angezeigten Elementes ist:
// Dem a-Element die Klasse "activelink" hinzu fuegen
if (idx == currentidx) newele.addClass("activelink");
// Neues a-Element der Liste in der Navigation hinzufuegen
$("#navlist").append(newele);
});

// Wenn die aktuell angezeigte Seite nicht die erste ist:
if (currentidx > 0) {
// href-Attribut des vorherigen Elementes ermitteln
var prevurl = $(allele[currentidx - 1]).attr("href");
// und dem Pfeil nach links zuordnen
$("#navback").attr("href", prevurl);
} else {
// Andernfalls (die aktuell angezeigte Seite ist die erste):
// Pfeil nach links verbergen
$("#navback").css("visibility", "hidden")
}

// Wenn die aktuell angezeigte Seite nicht die letzte ist:
if (currentidx < allele.length - 1) {
// href-Attribut des naechsten Elementes ermitteln
var nexturl = $(allele[currentidx + 1]).attr("href");
// und dem Pfeil nach rechts zuordnen
$("#navnext").attr("href", nexturl);
} else {
// Andernfalls (die aktuell angezeigte Seite ist die letzte):
// Pfeil nach rechts verbergen
$("#navnext").css("visibility", "hidden")
}
}
});
(Leider zerstört die Foren-Software immer die Einrückungen.)
 
Danke für die Kommentare ich habe leider noch ein Problem gefunden was ich aber nicht selber in den Griff bekomme wenn Seiten in der Menü Struktur nicht in ul li ul li ul li sind sondern nur in ul li ul li dann funktioniert das nicht mehr richtig Meter der Menge an Seiten die angezeigt werden das ist der Fall im Bereich Pflanzenableger hier noch mal der linken http://www.jans-pflanzenwelt.de/pflanzen/aloe/aloeableger.php Ich dachte ich würde es mit Hilfe deiner Angaben selber ändern können aber leider bin ich in Java wirklich sehr schlecht.
 
Werbung:
Ja, das Skript funktioniert nur, wenn die Listenstruktur der Navigation immer gleich ist. Ich sehe es mir mal an. Oder kannst Du nicht einfach die Listenstruktur ändern?
 
Will dir nicht schon wieder Arbeit machen aber da noch ein Menü mehr rein zu machen passt irgend wie nicht. Kann man das nicht über die Ordner in dem die Dateien liegen machen es ist immer so das die Dateien die zusammen gehören immer in einem Ordner auf dem Server liegen
 
Zurück
Oben