Beiträge von Sempervivum

Da hast Du wieder einen Slider gefunden, der es ein bisschen schwer macht, mehrere Instanzen einzurichten. Baue doch mal auf der Seite eine zweite Slideshow ein, HTML ist ausreichend und poste die URL. Dann werde ich es zum Laufen bringen. Wenn Du die Seite nicht öffentlich machen möchtest, weil sie nicht richtig funtioniert, dann lege eine temporäre Kopie an.

Sehr gut, das funktioniert! Kannst Du kurz die Lösung verbal erklären?

Ich habe mal mein Glück versucht und bin leider nicht zum Ziel gekommen:
https://jsfiddle.net/zayuh36a
(Nur Angebot und Preise mit #angebot)
Der Knackpunkt ist dieses:

<p><a href="#angebot"><label for="sn_menu01_close" class="close">Angebot und Preise</label></a></p>

Ich habe einen weiteren Radiobutton eingeführt, der das Schließen veranlasst. Diese Zeile müsste jetzt sowohl diesen Radiobutton auf checked setzen als auch das Linkziel anspringen. Leider bekomme ich es nicht hin, dass beides gleichzeitig funktioniert. Offenbar ist es problematisch, interaktive Inhalte so zu kombinieren.

Crossposting:
http://forum.chip.de/html-css-javas…em-1874055.html

Wie möchtest Du es denn haben:
Wenn eine neue Seite geöffnet wird, soll das Menü wie auf der alten Seite offen sein
oder
Wenn ein Anker angesprochen wird, soll das Menü zugehen, wie beim Wechsel auf eine andere Seite?

Hallo Lexxa,
diese Diashow ist mit CSS realisiert. Dazu ist folgendes zu sagen: Man kann vieles mit CSS machen, aber man muss jeweils fragen, ob es auch empfehlenswert ist: Eine CSS-Lösung ist in diesem Fall nur umständlich zu ändern, weil die Werte der Keyframes jedes Mal geändert werden müssen, wenn sich die Anzahl der Bilder ändert. Bei einer Lösung mit Javascript/jQuery kann das automatisch durch das Plugin erfolgen, so dass man nur den HTML-Text erstellen/ändern muss.
Ich habe trotzdem mal, so gut ich es konnte, diese Slideshow zum Laufen gebracht.
http://pastebin.com/9KbFw6zX

BTW: Die Kätzchen sind ja sehr süß!

Dies hier:

maxheight - maxheight * values / 100

liefert einen negativen Wert, wenn values[ i ] größer als 100 ist so dass der Balken die obere Grenze des Canvas überschreitet.
So funktioniert es:

ctx.fillRect(barwidth * i + distance * i, maxheight - values[i] , barwidth, values[i]);

Natürlich kannst Du auch beide Achsen beschriften. Es gibt jedoch gute Bibliothen, um solche Diagramme zu zeichnen, z. B. chart.js
http://www.chartjs.org/

Das kannst Du auch ohne Flex-Layout sehr einfach erreichen, indem Du zunächst die Elemente mit text-align:center horizontal zentrierst. Damit ersparst Du dir schon Mal die Berechnung der x-Positionen.
Die vertikalen Abstände kannst Du leicht mit margin-top einstellen.
Und um für die Tabelle einen freien Raum zu schaffen (ich nehme an, sie wird dynamisch angelegt) würde ich sie in einen Wrapper mit min-height verpacken. Wenn Du min-height verwendest, reserviert dieser Wrapper eine Mindesthöhe, erweitert sich aber, wenn die Tabelle größer wird.
Ein weiterer Vorteil, wenn Du nicht absolut positionierst ist, dass alles automatisch hoch oder runter rutscht, wenn Du bei einem Element die Höhe änderst. Bei absoluter Positionierung musst Du dagegen alles neu berechnen.

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.