Beiträge von Sempervivum

Beschreibe doch mal, welches Ziel Du mit dieser Anordnung verfolgst, dann kann man deine Fragen wahrscheinlich besser einordnen und beantworten. Vor allem, warum Du die Elemente anders als zentriert oder links- oder rechtsbündig anordnen möchtest.

Schau mal, ob dieses deine Vorstellungen erfüllt:
https://jsfiddle.net/Sempervivum/jL74xeLs/5/

• Wegen der Begrenzungen bei lorempixel sind es nur neun Bilder.
• Soll ein Bild und ein Button jeweils genau untereinander sein, müsste man noch etwas tun.

Wie viele Bilder? Auch zehn?

Du schreibst von drei Gruppen. Ich nehme an, innerhalb einer Gruppe sollen die Buttons nebeneinander positioniert werden? Und die Gruppen? Übereinander?

Wenn Du sie denn absolut positionieren willst, dann ja. Da anzunehmen ist, dass die Position irgend welchen Regeln folgt, könntest Du sie automatisch mit Javascript festlegen. Ich bin jedoch kein Freund von absoluter Positionierung und würde eine andere Lösung suchen. Diese Sache ist ein Problem, womit man dabei konfrontiert werden kann.

Beschreibe doch mal, vielleicht mit einer Skizze, was Du mit den Buttons vor hast und warum Du sie absolut positionieren möchtest, dann kann man wahrscheinlich eine einfachere Lösung finden.

Das liegt daran, dass Du allen die selbe Position gibst, so dass sie übereinander liegen und nur der letzte sichtbar ist.

Stylesheet ausgelagert? Siehe hier:
http://www.css4you.de/background-image.html

"Wenn du deine Stylesheets in eine externe Datei auslagerst, musst du darauf achten, dass sich die Pfadangabe auf den Ort der Stylesheet- und nicht der XHTML</acronym>-Datei bezieht. Befindet sich die Stylesheet-Datei z.B. im Verzeichnis css und das Hintergrundbild in images, so wäre die gültige Pfadangabe background-image: url(../images/hintergrundbild.gif)"

Das img-Tag hat kein href-Attribute, sondern Du musst src verwenden:

<img src="Bilder/auge.jpg"/>

Bei Verwendung von appendChild() wird das Element hinzu gefügt. Ich denke, das einfachste wird sein, wenn Du den Container vor dem neuen Füllen leerst:

function showArray2() {
var zw=[1,2,3,4,5];
var gallerie = document.getElementById("ersteReihe");
gallerie.innerHTML ="";
for (i = 0; i < vorgabe; i++) {
gallerie.appendChild(imgArray[zw[i]]);
}
}

Wenn der Container noch weitere Elemente enthält, würde ich die Bilder in einen zusätzlichen Container legen, der nur diese enthält.

Leider habe ich dir da einen Code mit einem Strukturfehler gegeben:

im.addEventListener("click", function(idx) {
return function() {
if (!gallerie.getAttribute("data-locked")) {
gallerie.setAttribute("data-locked", "true");
}

playSound();
if (vergleichccr == idx) {

control.value = "Das war richtig. Klicke jetzt den Button WEITER";
} else {
control.value = "Das war falsch. Beginne wieder mit Start";
}
};

}(i));

Das if wird gleich nach der ersten Anweisung wieder geschlossen. So wäre es richtig:
http://pastebin.com/g4r4jJG0

Das hat funktioniert! Ich werde es mir dann ansehen.

Da gibt es eine Auswahl "Paste Exposure:". Die musst Du auf "Public" stellen.

"This is a private paste. If you created this paste, please login to view it." Anscheinend nur für den Besitzer sichtbar.

Da finde ich Code mit den Funktionen VorgabeZahlErmitteln() und bringColor() und kann keine Verbindung zum Thema dieses Threads erkennen.

Das beste wäre, wenn Du deine Seite online hättest und die URL posten würdest. Geht das nicht, dann den vollständigen Code einschl. HTML bei pastebin.com hochladen und die URL dort posten. Bitte nicht hier im Forum posten wegen der Problem mit Codetags.

Wenn Du alle Bilder blocken möchtest, empfehle ich, das Attribut bei dem gallerie-Element zu setzen:

for (var i = 0; i < cardSelectBasic; i++){
var im = imgArray[zz[ i ]];
gallerie.appendChild(im);
im.addEventListener("click", function(idx) {
return function() {
if (!gallerie.getAttribute("data-locked")) {
gallerie.setAttribute("data-locked", "true"); }

if (vergleichccr==idx)
{
randomNumberBasic.splice(vergleichcbr,1);
alert(randomNumberBasic + "bravo"+ vergleichcbr);
}
else
{
alert("kein bravo");
}};
}(i));
}

Wenn Du solch ein Attribute setzt, musst Du es auch auswerten. Vermutlich ist dies, was Du brauchst:

function showArray2(zz,rr)
{

var gallerie = document.getElementById(rr);
for (var i = 0; i < randomNumberCompare.length; i++)
{
var im = imgArray[zz[ i ]];
gallerie.appendChild(im);

im.addEventListener("click", function(idx) { return function()

{
if (!im.getAttribute("data-locked") {
im.setAttribute("data-locked", "true");

if (vergleichccr==idx)
{

randomNumberBasic.splice(vergleichcbr,1);

}
else
{
alert("war nichts");
}
}

};
}(i));

}

}

Außerdem: Habe ich dich richtig verstanden, dass Du alle Bilder sperren möchtest? Wenn ja, ist es so nicht ausreichend, sondern du musst in einer Schleife über alle Bilder das Attribut setzen.

'ich habe es mit:
im.setAttribute("data-locked", "true");
rum probbiert, aber das klappt nicht.'

Das ist schon ein richtiger Ansatz. Poste mal deinen Code, damit man sich ansehen kann, warum es nicht funktioniert.

'wie mach ich sie später wieder sichtbar?
irgendwas mit im.setAttribute("data-locked", "false"); ?'
Auch das ist ein richtiger Ansatz. Alternativ könntest Du auch das Attribut mit removeAttribute löschen.

Kommt mir irgend wie bekannt vor, hattest Du so ein Thema schon Mal?

Um deinen Code vollständig zu verstehen, müsste man wissen, was randomNumberBasic ist. Ohne dies zu verstehen, kann ich folgende Lösung anbieten:

for (var i = 0; i < cardSelectBasic; i++){
var im = imgArray[zz[ i ]];
gallerie.appendChild(im);
im.addEventListener("click", function(idx) {
return function() {
// Hier steht der Index unter idx zur Verfügung
};
}(i));
}[/code]

Normaler Weise müsste man Code-Tags verwenden, aber leider funktionieren diese in diesem Forum nicht richtig.

Das wird hier beschrieben:
http://stackoverflow.com/questions/2942…idth-and-height