Beiträge von Sempervivum

Auch das zweite ist nicht so kompliziert. Javascript-Array aus PHP-Array erzeugen ist ein Einzeiler und auch in Javascript gibt es die Funktion filter():
<script>
var beispiel_js = JSON.parse(<?php echo json_encode($beispiel); ?>;
var dreiecke = beispiel_js.filter(function(ele) {if (ele.type == "dreieck") return true; else return false;});
</script>

Zitat

das automatische Anhängen des "#xy" wäre eine Option.

Das würde auch Javascript erfordern.
Wenn es für dich unverzichtbar ist, könntest Du auf eine Alternative umstellen, die Radiobuttons verwendet:
https://jsfiddle.net/Sempervivum/jx1fcs06/6/

Ich mag diese Trickserei mit :target sowieso nicht, u. a. weil sie den Nebeneffekt hat, dass der Browser auch zu dem Anker scrollt.

Das habe ich auch gerade gemerkt. Einfacher geht es, wenn Du #content1 an die URL anhängst. Das funktioniert nicht beim Fiddle, weil das getestete dort in einem iFrame liegt.

Wenn das mit der URL nicht geht, fällt mir nur noch eine Lösung mit Javascript ein, entweder, indem man einen Klick auf den Link simuliert:
https://developer.mozilla.org/en-US/docs/Web…iggering_events
https://jsfiddle.net/Sempervivum/jx1fcs06/1/

oder indem man das #content1 automatisch an die URL anhängt:
https://wiki.selfhtml.org/wiki/JavaScript/Location/hash

Du brauchst nur dem betr. content-div ein display:block zu geben:

#content1 {

• width: 490px;
• height: 490px;
• border: 1px solid;
• margin: auto;
• display: block !important;

}

Warum ich das !important brauchte, erschließt sich mir nicht ganz. Offenbar hat

#content > div {

• padding: 10px;
• display: none;

}
eine höhere Priorität. Aber warum? Adressierung mit ID hat IMO eine höhere Spezifität als Adressierung mit Tagname.

PS: Mir ist noch folgendes eingefallen:

Zitat

Wenn ich nun auf einen Menüpunkt gehe - nennen wir Ihn einfach mal Dreiecke - würde ich dort gerne 3 Divs erstellen, welche auch zufällig ausgewählt werden sollen, bestenfalls aus der selben Datei,

Wenn Du von Menüpunkt sprichst, spricht das dafür, dass dieses clientseitig mit Javascript passieren muss. Dazu würde ich das zweidimensionale Hauptarray mit einem JSON-String nach Javascript transferieren und dort auswerten. Javascript hat keine Shuffle-Funktion eingebaut, aber man findet Algorithmen, z. B. hier:
http://stackoverflow.com/questions/6274…huffle-an-array

Mit dem mehrdimensionalen Array bist Du auf dem richtigen Weg. Ich empfehle, in jedes Element ein assoziatives Array einzutragen mit Typ und Content:

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

Das kannst Du genau so mischen und den Content zweidimensinal auslesen:

$current_content = $beispiel[$i]["content"]

Willst Du aus dem gesamten Array die Elemente eines bestimmten Typs auslesen, schlage ich die Funktion filter vor:

$dreiecke = array_filter ($beispiel, function($ele){return $ele["typ"] == "dreieck"});

Offenbar ist das eingeblendete Bild größer als das Basisbild. Ist es absolut positioniert, passt sich der Container nicht an.
Lösung 1: Ändere das eingeblendete Bild, so dass es die selbe Größe hat.
Wenn das nicht möglich ist, fällt mir nur noch ein, die Größe des Containers per Javascript an das Bild anzupassen.

Nun zum Blinken:

CSS für die Tabellenzelle:

td.blink {
background-color: lightgrey;
animation: aniblink 2s infinite;
}
@keyframes aniblink {
0% {
background-color: lightgrey;
}
20% {
background-color: red;
}
50% {
background-color: red;
}
70% {
background-color: lightgrey;
}
100% {
background-color: lightgrey;
}
}

Das Blinken startest Du, indem Du die Klasse blink bei der betr. Zelle setzt:

function VorgabeZahlErmitteln(z,s){

for (var i = 0; i <= anzahlFelder-1; i++) {} {
var zindex=random(z-1);
var sindex=random(s-1);

indexZelleVorgabe[ i ] = zindex;
indexSpalteVorgabe[ i ] = sindex;
var zw= (zindex*anzahlSpalten)+sindex;

setTimeout(function (zwzw) {
return function () {
var tds = document.getElementsByTagName('td');
tds[zwzw].className = "blink";
}
}(zw), 1000 * (i + 1));
}
}

Und stoppen kannst Du das Blinken, wenn Du diese Klasse wieder löschst.

Damit dies funktioniert:
setTimeout(function(zwzw) {return function() {bringColorNeu(zwzw);}}(zw), 1000 * (i + 1));
setTimeout(function(zwzw) {return function() {bringColorAlt(zwzw);}}(zw), 1000 * (i + 1));

musst Du die Zeiten staffeln, denn der zweite Timeout wird ja zur selben Zeit wie der erste gestartet und nicht erst nach Ablauf des ersten. So sollte es funktionieren:
setTimeout(function(zwzw) {return function() {bringColorNeu(zwzw);}}(zw), 1000 * (i + 1));
setTimeout(function(zwzw) {return function() {bringColorAlt(zwzw);}}(zw), 1000 * (i + 1) + 1000);

Zum Blinken schreibe ich später. Du kannst dich schon mal über CSS-Animationen informieren.

PS: Ich sehe gerade, dass dies nicht funktionieren wird:

setTimeout( bringColor(zw), 1000);

Ruft die Funktion bringColor sofort auf und übergibt den Rückgabewert an setTimeout(). Richtig wäre:

setTimeout(function(zwzw) {return function() {bringColor(zwzw);}}(zw), 1000 * (i + 1));

Ich habe es mir noch nicht im Ganzen angesehen, aber vielleicht hilft dir das:

• 
  for (var i = 0; i <= anzahlFelder-1; i++)
• 
  {
• 
  var zindex=random(z-1);
• 
  var sindex=random(s-1);
• 
  indexZelleVorgabe[ i ]=zindex;
• 
  indexSpalteVorgabe[ i ]=sindex;
• 
  var zw= (zindex*anzahlSpalten)+sindex;
• 
  setTimeout( bringColor(zw), 1000 * (i + 1));
• 
  }

Poste doch mal den vollständigen Code bei http://pastebin.com/
Das Posten von Code funktioniert ja leider in diesem Forum nicht richtig.

Wenn ich dich richtig verstehe, kannst Du das erreichen, indem Du das Video exklusiv in eine neue Reihe der Tabelle legst, hinter den beiden Grafiken.
Benutzung von Tabellen für Layoutzwecke ist nicht mehr zeitgemäß. In deinem Beispiel macht es das Layout IMO unnötig kompliziert - ohne Tabelle wäre es einfacher.

document.getElementById('tabelle1').rows[sindex].cells[zindex] liefert die Tabellenzelle aber nicht das img-Element darin. Du musst das erste Kind-Element ermitteln:
https://wiki.selfhtml.org/wiki/JavaScrip…Node/childNodes

etwa so:
document.getElementById('tabelle1').rows[sindex].cells[zindex].childNodes[0].src = "deinbild.gif";

Nein, es muss eine php-Datei sein, weil Du ja den HTML-Text mit PHP generierst. In dieser PHP-Datei muss alles stehen, was Du für die Generierung der Texte brauchst, also die Definition des Arrays, das Shuffle und die echo-Anweisungen, die das HTML erzeugen.

Zitat

allerdings hätte ich am liebsten noch zusätzlich einen Button der lediglich die Divs reloaded

Das geht mit Ajax, wie ich sehe, gibt es darüber auch ein Kapitel hier bei HTML-Seminar. Mit der jQuery-Funktion load() kannst Du auf einfache Weise deine divs in einen Container hineinladen. Du musst nur eine passende PHP-Datei anlegen; den Code dafür hast Du ja schon.

Wenn Du ein img-Tag verwendest, um das Bild anzuzeigen:

currentimage.setAttribute("src", "augeLeer.gif");

musst Du es auch verwenden, um das Bild zu wechseln:

this.src = "augeRot.gif";

wobei ich vorausgesetzt habe, dass der Eventlistener auf das img registriert ist.

Sorry, das war ein Flüchtigkeitsfehler.

Nein, Du darfst die PHP-Datei nur einmal einziehen, wenn Du das getan hast, steht sie ein für alle Mal zur Verfügung:

<?php include('url.php'); ?><div class="links"><? echo "$zufallsdiv[1]";	?></div><div class="mitte"><?php echo "$zufallsdiv[2]";	?></div> <div class="rechts"><? echo "$zufallsdiv[3]";	?></div>

Und wenn Du fünf Zufallsdivs haben willst, wie Du anfangs geschrieben hast, wäre es eleganter, sie in einer for-Schleife zu generieren.

Meinst Du mit PHP-Rahmen dieses:

<?php    ?>

Ja, PHP kannst Du nur zwischen diesen Tags verwenden. Du kannst diese jedoch an einer beliebigen Stelle in deinem Dokument notieren, auch mehrfach, und kannst dann auch auf die Variablen bzw. Arrays zugreifen, die Du in der includierten Datei definiert hast.
echo brauchst Du nur, um HTML- oder auch Javascript auszugeben, das im Dokument an den Browser geliefert wird.