Ein paar Fragen zu Html (AJAX, CSS, PHP)

Question

Hallo,
habe mir eine kleine Test-Webseite zusammen gebastelt jedoch funktionieren noch nicht alle Funktionen wie gewollt.

Vorwort:
Auf der Seite ist ein Musik Player integriert, damit die Musik unabhängig von der gerade angezeigten Seite weiter läuft ohne das bei jedem klick auf einen internen Link die Musik wieder von vorne beginnt.
Das funktioniert auch jedoch verwende ich um diese Funktion zu realisieren AJAX.
Doch nun bekomme ich gleich mehrere Probleme...

1) Beim laden der Seite wird nur die "index.html" geladen, diese enthält jedoch nur das Banner und den Musik-Player. Daher möchte ich das beim aufrufen der index.html gleich die "start.html" im "Ausgabe" div angezeigt wird.
Dies sollte mit "if http = null;" gehen leider weiß ich nicht wie.

2) Die gerade aktive (ausgewählte) Seite soll hervorgehoben werden. Ohne AJAX ist dies einfach jedoch müsste ich es jetzt wohl irgendwie über CSS machen.
Ich habe dazu dieses Tutorial gefunden kann es aber nicht umsetzen.
http://www.andreas-kalt.de/webdesign/tutorials/ausgewaehlte-seite-hervorheben

2.1) Ich habe die Link-Leiste in die index.html integriert. Macht es Sinn sie in die einzelnen Seiten zu setzen?

3) Beim aktualisieren der Seite wird man natürlich auf die ausgangs Seite verwiesen. Kann man das mit einfach Mitteln umgehen?

Falls jemand eine einfachere bessere Möglichkeit kennen sollte um den Player weiter laufen zu lassen würde ich dies gerne probieren da mir meine Methode ziemlich kompliziert vorkommt.

Hier mal die Testseite
http://test.beautystudio-lenz.de/
Und hier die .rar Datei zum download
http://rapidshare.com/files/439673426/Test_1.rar

Answer 1

1) pack den Inhalt der start.html einfach von vornherein in die index.html wo er hingehört - alles andere ist Quatsch

2) AJAX bedeutet "mit JavaScript"! Also kannst du über JavaScript nebenbei dem entsprechenden Link die passende Klasse "aktuell" geben.
2.1) wenn jemand JavaScript deaktiviert lädt er somit die Seiten ohne Navi - das ist gelinde gesagt suboptimal
Also: ja!

3) ergänze die URL jeweils um einen Parameter, der angibt welche Seite gerade geladen ist/war, lies den beim Laden aus
Bsp:
....index.html?seite7.htm

<script type="text/javascript">
window.onload=function() {
var aktuell=location.search;
if (aktuell!="") {
aktuell=aktuell.substr(1);
lade_per_ajax(aktuell);
}
}
</script>

4) darauf verzichten!

Answer 2

So hab mich nun nach mehreren Jahren doch mal entschlossen mir nen Account an zu legen.

Danke erst mal für deine Tip(p)'s

Zu 1) Wenn ich den Inhalt aus der start.html in den "Ausgabe" div rein kopiere funktioniert zwar alle wie es soll aber wenn ich mal den Inhalt (z.B. Text) ändern möchte müsste ich das dann ja immer an zwei Stellen machen einmal in der index.html und einmal in der start.html.
Worauf muss der "Link 1" Button verweisen damit nur noch der Inhalt der index.html angezeigt wird so das die start.html nicht mehr benötigt wird? Ich kann ja schlecht auf einen Div verweisen...

Zu 2) Könntest du mir einen Code-Schnippel davon zeigen wie es aussehen soll? Noch besser wäre ein Beispiel.

Zu 2.1) Habe es nun so geändert das die Link-Leite in der nachgeladenen Seite und nicht mehr in der index Datei liegt.

Zu 3) Hier wäre ein Beispiel auch toll.

Zu 4) Nee jetzt läuft es ja fast schon rund :-)

Es ist nicht so das ich alles vorgekaut haben will aber für mich ist Webdesign recht neu daher nehmt es mir bitte nicht übel^^

Habe die
Test-Seite aktualisiert und hier ist auch noch das aktualisierte rar Packet.

Danke noch mal!

Answer 3

1) eliminiere start.html (überflüssig), lade stattdessen den Inhalt der index.html (über AJAX)

2) ersetze onclick="dateiholen(this.href) durch onclick="dateiholen(this)
dein Script ändert sich wie folgt:

function dateiholen(wo) {
var http = null,welche = wo.href;
var links = docuemnt.getElementById("navi").getElementsByTagName("a");
for (var i=0;i<links.length;i++) links[i].className="";
wo.className="aktuell";
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
if (http != null) {
http.open("GET", welche, true);
http.onreadystatechange = function() {
if (http.readyState == 4) {
var rpt = http.responseText;
var anfang = rpt.indexOf('<!-- Anfang Inhalt -->');
var ende = rpt.indexOf('<!-- Ende Inhalt -->');
var ort = document.getElementById("Ausgabe");
if (anfang > -1 && ende >-1 && ort) ort.innerHTML = rpt.substring(anfang,ende);
}
}
http.send(null);
}
}

dies setzt voraus, dass die Links sich in einem Element mit der ID "navi" befinden und nicht per AJAX nachgeladen werden! Dies vermeidest du dadurch, dass du jeweils in den Seiten um den eigentlichen Inhalt die Kommentare <!-- Anfang Inhalt --> und <!-- Ende Inhalt --> setzt, dann wird nur das geladen und nicht die ganze Seite (was auch kompletter Unsinn ist). Entsprechend darf das DIV "Ausgabe" nur den Inhalt und nicht die Navi oder sonstiges beinhalten. Im Stylesheet müsstest du auch noch für die Klasse "aktuell" was schickes definieren.

also ungefähr folgender Aufbau in jeder Seite (incl. index.html):

<DOCTYPE ...>
<html>
<head>
....
</head>
<body>
<div id="navi"><a href="index.html"> ...</a></div>
<div id="Ausgabe"><!-- Anfang Inhalt -->
bla blub foo
<!-- Ende Inhalt -->
</div>
</body>
</html>

3) siehe location.search