Beiträge von Sempervivum

Überprüfe noch Mal das Javascript. Wie ich schrieb, hatte ich zunächst Fehler drin und dann editiert. Übernimm das letzte noch Mal aus meinem Posting.,

Natürlich. Das war nur eine Anmerkung, weil Du nur das leere Tag ohne options brauchst.

Ja, das HTML ist soweit richtig. Du brauchst nur ein select-Tag mit der ID "terminauswahl".

Zitat

Irgendwo ist ein Fehler, das Selectfeld ist leer

Bei mir funktioniert es. Welchen Code hast Du jetzt, den aus pastebin, oder den zweiten, den ich im Forum gepostet habe? Ich hatte Probleme mit dem [ i ] und musste meinen Post editieren. Möglicher Weise hast Du zuvor eine fehlerhafte Version erwischt.

Zitat

Und mir ist noch ein anderes Problem aufgefallen die Sidebar funktioniert nicht auf anderen Seiten...

Das liegt daran, dass alles, was man mit Javascript macht, auf die aktuelle Seite beschränkt ist. Will man die Sidebar auf allen Seiten haben, muss man PHP einbeziehen: Mit Ajax die Daten an den Server übertragen; das PHP-Skript generiert das HTML und trägt es in eine Datei ein; diese kannst Du dann auf allen Seiten mit PHP-Include einbinden. Wenn Du das brauchst, kann ich es für dich programmieren.

Zitat

Dann muss ich die Options aber noch mit: ... füllen, oder?

Das tut das Script schon, siehe am Ende des Javascript-Abschnitts.

Zitat

Aber dann wenn nur z.B. 2 Termine aktuell sind, sind auch 3 Felder leer...

Das kann man leicht vermeiden, indem man die options nicht nur mit Inhalt füllt, sondern auch automatisch anlegt:

var terminauswahl = document.getElementById("terminauswahl");
terminauswahl.innerHTML = "";
for (var i = 0; i < rows.length; i++) {
var time = rows[ i ].cells[1].innerHTML + " " + rows[ i ].cells[2].innerHTML;
var opt = document.createElement("option");
opt.value = time;
opt.innerHTML = time;
terminauswahl.appendChild(opt);
}

Würde dann so aussehen:
http://pastebin.com/XKg151Yk

Bzgl. der Validierung verhält dies sich IMO auch nicht anders als ein date-Input: Da der Benutzer nur eine Auswahl aus den Vorgaben treffen kann, kann er nichts fehlerhaftes eingeben.

Unter value kann man auch ein abweichendes Format eintragen, wenn Du es bei der Auswertung des Formulars brauchst.

<input type="date"> ist nur bedingt zu empfehlen, weil es von IE nicht unterstützt wird. In diesem Fall wäre es einfacher, ein select-option zu verwenden und automatisch mit den Daten zu füllen. Überleg mal, ob das für dich in Frage kommt.

Da Du den Zellen IDs gegeben hast, ist es noch einfacher:

rows[rowIdx].style.backgroundColor = "lightblue";
rows[rowIdx].style.border = "thin solid blue";
document.getElementById("sThema").innerHTML = rows[rowIdx].cells[0].innerHTML;
document.getElementById("sDatum").innerHTML = rows[rowIdx].cells[1].innerHTML;
document.getElementById("sUhrzeit").innerHTML = rows[rowIdx].cells[2].innerHTML;
document.getElementById("sOrt").innerHTML = rows[rowIdx].cells[3].innerHTML;

Zitat

Und habe ich den Code richtig verstanden, dass der aktuelle Termin auch nach der Uhrzeit aktualisiert wird?

Ja, die Uhrzeit wird auch berücksichtigt, d. h. wenn zwei Termine am selben Tag sind wird der frühere hervor gehoben.

Zitat

Aber wie spreche ich die andere Tabelle separat an? Mit der ID?

Richtig, Du musst der zweiten Tabelle eine andere ID geben und kannst dann mit

row[i].cell[j].innerHTML

den Inhalt jeder Zellen setzen. Wenn Du es noch nicht selber kannst, dann poste das HTML der Tabelle, wo es angezeigt werden soll und ich zeige dir, wie es geht.

Zitat

... erstmal JavaScript so zu lernen, dass ich mir selber helfen kann..

Dann bist Du hier schon an der richtigen Adresse, denn es gibt Tutorials, u. a. auch für Javascript.

Zitat

ob dein Code das Datum aus HTML quasi erkennt, das heißt, kann ich also das Datum in der Tabelle in HTML ändern und JavaScript erkennt das oder?

Genau, die Funktion myParseDate liest die beiden Strings für Datum und Uhrzeit jeweils aus der aktuellen Zeile aus und macht daraus ein Date-Objekt.

Zitat

Also in jeder Tabellenspalte wird das Workshopthema angezeigt, das Datum, die Uhrzeit und der Ort. Jetzt will ich alle diese Sachen NUR von dem aktuellsten Datum dem "eingerahmten" in einer neuen Tabelle (Sidebar) anzeigen lassen, wie mache ich das?

Am Ende des Skripte steht in der Variablen rowIdx der Index der Zeile mit dem nächsten Termin. Dort kannst Du die Werte auslesen.
rows[rowIdx],cells[3].innerHTML liefert z. B. den Ort der Veranstaltung.

Die Meldung von Dreamweaver kannst Du ignorieren.

Ich hoffe, dies ist das, was Du dir vorgestellt hast:
http://pastebin.com/MZe1bMrC

Damit "border" für die Zeile funktionierte, musste ich das CSS "border-collapse:collapse" hinzu fügen, siehe:
http://stackoverflow.com/questions/1867…ent-doesnt-show


PS: Ich habe da noch einen kleinen Fehler gemacht. So ist es richtig:


function myParseDate(rows, rowIdx) {
var datearr = rows[rowIdx].cells[1].innerHTML.split(".");
var timearr = rows[rowIdx].cells[2].innerHTML.split(":");
return new Date(parseInt(datearr[2]), parseInt(datearr[1]) - 1, parseInt(datearr[0]),
parseInt(timearr[0]), parseInt(timearr[1]), 0);
}

(vorletzte Zeile)

Ja, habe ich schon gemacht. Meinst Du mit "aktuellstem Termin" den, der in der Zukunft als erster kommt?

Zitat

Oh er hat leider keine Zeilenumbrüche eingefügt Sorry Hoffe es geht trotzdem

Ja, diese Foren-Software ist eine Katastrophe. Es gibt aber Online-Tools, mit denen man es neu formatieren kann. Ich sehe es mir dann mal an.

Hier kannst Du dir ansehen, wie Du das Datum in der deutschen Schreibweise formatierst:
https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Date
(unter Datumsausgaben formatieren)
Poste am besten eine Beispieltabelle, dann kann man das Javascript entwickeln.
Wie man die Zellen mit Javascript anspricht, wird z. B. hier beschrieben:
http://stackoverflow.com/questions/3072…ript-not-jquery

Zitat

den jeweils aktuellsten Termin

d. h. in einer Spalte steht jeweils Datum/Uhrzeit? In welchen Format?

Zur ersten Frage:

Zitat

Sobald ich die Maus nun von dem Menüpunkt auf das, durch hover ausgeklappte, Div ziehe, erhält der Menüpunkt natürlich wieder seinen "nicht hover" Hintergrund.

Wenn das so ist, hast Du die Struktur ungünstig aufgebaut. Das aufgeklappte Menü muss innerhalb des oberen liegen, dann bleibt das hover bestehen und der Menüpunkt bleibt ausgeleuchtet. Hier ein Beispiel ohne großes Styling:

https://jsfiddle.net/Sempervivum/huw7hfy9/

Allerdings verstehe ich eines nicht: Wenn das hover nicht mehr wirksam ist, wenn Du auf das Untermenü gehst, müsste dieses doch wieder zu klappen?

Nein, wenn Du den gleichen Namen verwendest, überschreibt die zweite Definition die erste:

$beispiel[] = ["typ" => "dreieck",		     "typ" => "blau",                     "content" => 'erstes dreieck'];

resultiert in
array (size=1)
0 => 
array (size=2)
'typ' => string 'blau' (length=4)
'content' => string 'erstes dreieck' (length=14)
d. h. "blau" hat "dreieck" überschrieben.

Es ist immer empfehlenswert, aussagefähige Namen zu verwenden, die beschreiben, worum es sich handelt. Setzt man das um, würde der Eintrag so aussehen:

$beispiel[] = ["form" => "dreieck",		     "farbe" => "blau",                     "content" => 'erstes dreieck'];

Bei mir funktioniert das einwandfrei:
https://jsfiddle.net/Sempervivum/qhajrcot/

Zitat

versucht es doch einfach selbst

Dazu würden wir die Bilder brauchen. Sind die irgend wo online? Sind die gleich groß?

Ich sehe, dass Du beide Bilder absolut positionierst. Das ist wahrscheinlich der Grund für das Verhalten. Ändere dein CSS so:

#blend { position: relative }#blend img#top:hover { opacity:0 }




#blend img#top { position: absolute;
	top: 0; left: 0; opacity: 1;	
	transition: opacity 0.5s }

Wenn es dann nicht funktioniert, stelle die Bilder zur Verfügung bzw. der URLs, damit man es testen kann.