Beiträge von Sempervivum

Das ging ja schnell!

Zitat

Würdet Ihr den PHP Code nun auslagern, oder einfach in die Section um die 3 x 3 Divs packen? Dann könnten da natürlich nach gewisser Zeit einige 100 Arrays mit zugeordneten Divs im Quellcode stehen.

Gute Idee. Ich bin immer dafür, Daten und Logik zu trennen - das würde dafür sprechen, die Definition des Arrays in eine Datei auszulagern und diese mit include einzuziehen.

Zitat

Wenn ich die PHP Datei auslagere, wie bekomme ich dann die Divs bzw. Arrays in die html Datei?

Das ist kein Problem: Wenn Du den ausgelagerten Code mit include einziehst, ist der Effekt derselbe, als wenn Du ihn mit einem Editor an der Position des include eingefügt hättest. D. h. wenn Du in der inkludierten Datei etwas mit echo ausgibst, wird es in der übergeordneten Datei eingefügt und zwar an der Position, wo das echo steht.

Zitat

Und ist es möglich zu einer PHP Datei eine CSS Datei zu verlinken, wie bei einer HTML Datei?

Selbstverständlich, Du kannst deine CSS-Datei genauso wie gewohnt einziehen. Weil das PHP serverseitig ausgewertet wird, sieht der clientseitige Browser nichts davon sondern nur das generierte HTML.

Offenbar liegt das Problem hier:

if (!myTable.getAttribute("data-locked"))

{ }
alert("Nicht gesperrt. Hier geht es weiter");
this.style.backgroundColor = "yellow";

Du hast da eine öffnende und eine schließende Klammer direkt hintereinander statt die folgenden Anweisungen einzuklammern. Wahrscheinlich ist dies, was Du eigentlich vor hast:

if (!myTable.getAttribute("data-locked")) {
alert("Nicht gesperrt. Hier geht es weiter");
this.style.backgroundColor = "yellow";

}

Ich würde auch empfehlen, es mit PHP zu machen, dann kannst Du die Ladezeit reduzieren, wenn es im Laufe der Zeit viele divs werden.
Informiere dich über Arrays in PHP und lege den HTML-Text der divs in ein Array. Dann mische dieses Array mit der Funktion shuffle, um eine zufällige Reihenfolge zu bekommen. Dann brauchst Du nur noch in einer for-Schleife die ersten fünf Element auszulesen und mit echo auf deiner Seite auszugeben.

PS: Ich habe es gerade ausprobiert und dieser Fehler wird leider nicht angezeigt. Ich empfehle dir, dich mit den Entwicklertools deines Browsers vertraut zu machen, dort wird in der Console solch ein Fehler auf jeden Fall angezeigt. VS Community ist aber trotzdem zu empfehlen, er zeigt sehr viele Fehler gleich bei der Eingabe an. Das beschleunigt die Entwicklung ungemein und wenn man sich einmal daran gewöhnt hat, möchte man es nicht mehr missen.

Ja, gibt es. Ich habe längere Zeit gesucht und bin dann auf MS Visual Studio Community gestoßen. Von der Installation her ein Moloch, aber die automatische Anzeige von Fehlern während der Eingabe ist das Beste, was ich gefunden habe.

tds.style.width = '2px';
tds[i].style.hight = '2px';

In beiden Zeilen ist ein Fehler:

• tds ist eine Nodelist und um ein Element anzusprechen, musst Du den Index verwenden: tds[ i ], so wie Du es in der zweiten Zeile auch tust.
• Schreibfehler bei hight.

Edit: Da bin ich wohl hereingefallen: Weil Du keine Codetags verwendet hast, hat das Forum das

[i]

als BBCode für italic interpretiert und verschluckt. 1. entfällt daher. 2. trifft jedoch zu.

Wenn man es selber machen will, um jQuery zu lernen, ist das natürlich ein Grund und ich will dir einen Hinweis geben, wie man so etwas machen kann:
Am Anfang ist es am einfachsten, wenn man es mit einer einheitlichen Bildgröße macht. Erzeuge zwei verschachtelte Container, einen inneren und einen äußeren. Der äußere ist so groß wie ein Bild, die Breite des inneren ist variabel, die Höhe gleich der Höhe eines Bildes. Dann packe die Bilder nebeneinander in den inneren Container. Der äußere Container wird relativ, der innere absolut positioniert. Die x-Position (left) animierst Du mit CSS-Transition. Wenn Du jetzt mit deinem jQuery die x-Position des inneren Containers veränderst, kannst Du die Bilder gleiten lassen. Dabei muss die x-Position immer ein Vielfaches der Bildgröße sein.
Wenn Du Probleme hast, dann melde dich wieder.

Freut mich, dass es funktioniert. Ich habe die Funktion noch ein wenig verbessert, so dass ein Thumbnail auch dann neu angelegt wird, wenn es schon existiert, aber sich die Bilddatei geändert hat:
http://pastebin.com/9dM98m3L

Lege lieber eine Testseite an und poste die URL, dann muss man nicht jede einzelne Datei herunterladen.

Habe mal etwas ausgearbeitet:
http://pastebin.com/AGeG6Bpf

Warum hast Du denn drei Funktionen statt einer angelegt? Und sind deine Bilder alle im JPG-Format?

Wenn Du schon schreibst, dass es nicht dein Steckenpferd ist, warum machst Du dir dann die Mühe, es selbst zu entwickeln? Es gibt doch sehr viele gute vorgefertigte Slider wie Cycle2.

Bei mir war maxValue undefiniert. Außerdem macht es keinen Sinn, einen Wert als Parameter an die Funktion random() zu übergeben, ihn darin aber nicht auszuwerten.
Und dies erzeugt einen Fehler, weil die Variable Stop nicht definiert ist:

if (this.innerHTML != Stop) myTable.setAttribute("data-locked", "true");

Hast Du die anderswo definiert?
Dies funktioniert bei mir:
http://pastebin.com/VG9AQzyF

PS: Ich empfehle dir, dich mit den Developertools deines Browsers vertraut zu machen. Die zeigen solche Fehler an, so dass es leicht ist, sie zu finden und zu beheben.

Verwende diese Funktion, um neue Zufallswerte in die Tabelle einzutragen:

function randomizeTable() {
for (var irow = 0; irow < yVar; irow++) {
for (var icol = 0; icol < xVar; icol++) {
document.getElementById('tabelle1').rows[irow].cells[icol].innerHTML = random();
}
}
}

Dann liegt es möglicher Weise an der ID. Du musst genau die verwenden, die Du hier übergeben hast:

node.appendChild(createTable(row, col, "tabelle1"), node);

Der Ansatz ist schon richtig, Du musst nur

• die richtige ID verwenden, um die Tabelle zu ermitteln
• innerHTML verwenden, um den Inhalt der Zelle zu bekommen

So funktioniert's:

function searchValue(r,i){
var rowIndex = r;
var cellIndex = i;
var value = document.getElementById('tabelle1').rows[rowIndex].cells[cellIndex].innerHTML;
alert(value);
}

</script>
<input type="button" name="btnStart" value="Starte neu" onclick="searchValue(5,8)" />

Ich habe es lieber bei pastebin eingestellt, denn ich hatte die Struktur tolock mit Kommentaren versehen, die nur lesbar sind, wenn die Einrückungen stimmen:
http://pastebin.com/AxxmV32F

Man könnte daran denken, die Eventlistener zu entfernen, aber das ist ziemlich umständlich, weil es anonyme Funktionen sind. Einfacher ist es, eine Statusvariable in einem data-Attribut der Tabelle zu benutzen:
http://pastebin.com/vem43VF2

(Leider verschluckt dieses Forum immer die Zeilenumbrüche, daher habe ich es bei pastebin eingestellt.)
Ich habe mir erlaubt, die Struktur mit #wrtabelle1 und #tabelle1 etwas zu modifizieren.

Zitat

Wie kann ich Dir eine gute Flasche Wein zukommen lassen?

Das ist nicht nötig, ich bin im Ruhestand und Programmieren macht mir Spaß

Ich musste aufpassen, mich bei den Indizes und Klammern nicht zu verlaufen, aber jetzt habe ich etwas ausgearbeitet:

<div id="row1" class="row">
<img class="productimg"
src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg"
data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg"
data-src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg"
data-name="Name1-1" data-price="8,50">
<img class="productimg"
src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg"
data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-9.jpg"
data-src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg"
data-name="Name1-2" data-price="11,50">
<span class="productinfo"></span>
</div>
<div id="row2" class="row">
<img class="productimg" src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg" data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg" data-src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg" data-name="Name2-1" data-price="8,50">
<img class="productimg" src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg" data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-9.jpg" data-src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg" data-name="Name2-2" data-price="11,50">
<img class="productimg" src="http://lorempixel.com/output/animals-q-g-200-200-8.jpg" data-src-sel="http://lorempixel.com/output/animals-q-c-200-200-8.jpg" data-src="http://lorempixel.com/output/animals-q-g-200-200-8.jpg" data-name="Name2-3" data-price="17,50">
<img class="productimg" src="http://lorempixel.com/output/animals-q-g-200-200-2.jpg" data-src-sel="http://lorempixel.com/output/animals-q-c-200-200-2.jpg" data-src="http://lorempixel.com/output/animals-q-g-200-200-2.jpg" data-name="Name2-4" data-price="19,50">
<span class="productinfo"></span>
</div>
<style>
.productinfo {
display: inline-block;
width: 200px;
height: 200px;
vertical-align: top;
}
</style>
<script>
var imglocked = "http://lorempixel.com/output/technics-q-g-200-200-5.jpg";
var tolock = {
// +-- Index des geklickten Bildes in der 1. Zeile
// | +-- Index der Folgezeile
// | | +-- Index des 1.zu sperrenden Bildes
// | | | + --Index des 2. zu sperrendes Bildes
// | | | |
0: { 1: [0, 2] },
1: { 1: [1, 3] }
};
var rows = $("div.row");
$(".productimg").on("click", function () {
var lock = false;
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).attr("src", $(this).attr("data-src"));
$(this).siblings("span.productinfo").html("");
} else {
lock = true;
var selimg = $(this).siblings(".productimg.active");
selimg.attr("src", selimg.attr("data-src")).removeClass("active");
$(this).addClass("active");
$(this).attr("src", $(this).attr("data-src-sel"));
var htm = $(this).attr("data-name") + "<br>";
htm += $(this).attr("data-price");
$(this).siblings("span.productinfo").html(htm);
}
var ctolock = tolock[$(this).index()];
rows.each(function (irow) {
if (irow > 0) {
var row = $(this);
$(this).children(".productimg").each(function (iimg) {
if (ctolock[irow].indexOf(iimg) != -1 && lock) {
$(this).attr({ "src": imglocked, "data-locked": "true" });
} else {
$(this).attr({ "src": $(this).attr("data-src"), "data-locked": "false" });
}
});
}
});
});
</script>

Leider wieder ohne Tags, aber es ging nicht anders. Benutze
http://jsbeautifier.org/

um das Javascript neu zu formatieren.

OK, ich arbeite etwas aus ...