Beiträge von Sempervivum

Oh, jetzt sind wir in eine Falle getappt, in die schon viele hinein getappt sind. Hier ist beschrieben, warum es so nicht funktioniert und es sind einige Lösungen angegeben:

http://www.webdeveloper.com/forum/showthre…ot-working-help

Da Du jQuery nicht möchtest, kommt wohl nur die Lösung aus Posting #3 in Fragen. Würde dann so aussehen:

        var skills = document.querySelectorAll('.skill');
        for (var i = 0; i < skills.length; i++) {
            document.addEventListener('scroll', function (idx) {
                return function () {
                    var skill = skills[idx];
                    animate(skill, skill.clientHeight);
                };
            }(i));
        }

Der Fehler liegt hier:

document.addEventListener('scroll', animate(element, element.clientHeight))

So weist Du den Returnwert der Funktion animate()als Callback zu, Du musst jedoch eine Funktion zuweisen.

So funktioniert es:

            document.addEventListener('scroll', function () {
                animate(element, element.clientHeight);
            });

Obacht: forEach für eine Nodelist wird von IE nicht unterstützt:

https://developer.mozilla.org/en-US/docs/Web…odeList/forEach

Zitat

Das bedeutet ich müsste die Dateien dann 0.jpg, 1.jpg .... - 12.jpg benennen.

Das wäre eine Möglichkeit. Mein Code im Original erfordert jedoch gar keine bestimmte Benennung sondern liest einfach die Dateien aus dem Verzeichnis und zeigt sie Tag für Tag an. Eine Nummerierung ist nur erforderlich, wenn Du eine bestimmte Reihenfolge erzwingen willst.

Zitat

Den kleineren Artikeln würde ich sobald ich diese alle in einer Reihe nebeneinander habe zum "wischen", einfach die gleiche höhe geben und ein width: auto

Das ist sicher eine gute Lösung. Sie sind dann in der Horizontalen schön ausgerichtet.

Glückwunsch zum ersten PHP-Skript!

Du hättest dir die Sache einfacher machen können, wenn Du die Funktionen file_get_contents() und file_put_contents() verwendet hättest. Damit kann man mit einer einzigen Anweisung eine Datei lesen oder schreiben.

Mit meinen Hinweisen wollte ich auf so etwas hinaus:

    $now = time();
    $basedate = strtotime("2017-01-01");
    $datediff = $now - $basedate;
    $days = floor($datediff / (60 * 60 * 24));
    $imgs = glob("images/*.jpg");
    $idx = $days % count($imgs);
    echo '<img src="' . $imgs[$idx] . '">';

Jetzt habe ich mir die Seite angesehen. Das responsive Verhalten funktioniert schon sehr gut. Ein kleiner Mangel besteht noch darin, dass die Bilder auf einem schmalen Bildschirm verzerrt werden. Ich habe mir die Seite auch auf meinem Samsung S4 angesehen und dort passt ebenfalls die Anordung aber die Verzerrung ist deutlich. Man kann sie beheben, indem man die feste Höhe im CSS löscht, aber dann wird wird leider das ganze Layout zerstört, weil die Bilder kein einheitliches Format haben. Eine Lösung dafür mit CSS kenne ich nicht, Mein Wissen geht dahin, dass man das Seitenverhältnis nur beibehalten kann, wenn man sich an den natürlichen Abmessungen des Bildes orientiert.

Zwei Lösungen sehe ich:

1. Die Bilder, die nicht passen, mit PHP auf die richtige Größe bringen.
2. Die Höhe mit Javascript dynamisch einstellen, so dass das Seitenverhältnis erhalten bleibt.

In Posting #47 hast Du geschrieben, dass Du die kleinen Bilder gern in einer Reihe nebeneinander haben möchtest. Hast Du das wieder verworfen?

Dies könnte dir weiter helfen:

Nummer des Tages ermitteln:

https://stackoverflow.com/questions/2040…tween-two-dates

Modulo-Operator:

http://php.net/manual/de/language.operators.arithmetic.php

Und die Funktion glob(), wie wir sie schon hatten, um die Bildernamen aus dem Verzeichnis in ein Array zu lesen.

Zitat

Ich würde gerne auf dem Handy die vier kleineren Zufallsartikel in einer Reihe haben, aber in der aktuellen Größe.

Sodass man diese von links nach rechts und andersherum wischen kann, ich hoffe das ist verständlich ausgedrückt.

Ich empfehle, dass Du dich über Flexlayout informierst. Ich benutze immer diese Seite:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ausrichtung nebeneinander ist Standard für einen flex-Container, ebenso flex-wrap:nowrap. Damit hättest Du schon alle Artikel in einer Reihe und kannst sie auf dem Handy durch Wischen bewegen.

Es hat mich heraus gefordert, dein Layout responsiv zu machen, ohne dass die Bilder verzerrt werden und dies ist dabei heraus gekommen:

https://jsfiddle.net/Sempervivum/hvo59tyq/11/

Zitat

.. habe soeben gemerkt, dass es auf anderen Geräten, in diesem Fall mein Smartphone, nicht funktioniert wie gedacht..

aber da muss ich dann morgen nochmal ran.

Ja, eine Seite responsiv und mobiltauglich zu machen, ist eine Herausforderung für sich. Ich sehe, Du hast schon die Darstellung abhängig von der Fensterbreite umgeschaltet. Leider werden dann die Bilder vom Seitenverhältnis her verzerrt. Da gibt es sicher noch zu tun.

Meine Homepage:

http://ulrichbangert.de

Wie Du siehst, geht es vor allem um die Präsentation meiner Fotos. Weil das Interesse begrenzt ist, habe ich sie in letzter Zeit nur noch wenig gepflegt und meine Fotos mehr bei Facebook gepostet:

https://www.facebook.com/ulrich.bangert.9

Außerdem kann ich dir zwei kleinere Skripte zeigen, die ich für Forenbesucher gemacht habe:

http://ulrichbangert.de/div/webentwick…ize_roof_5.html

Da kann man Elemente in einem Bild verschieden einfärben ohne für jede Farbe ein eigenes Bild zu brauchen.

http://ulrichbangert.de/div/webentwick…rawing-pad.html

Dies ist ein Zeichenbrett mit HTML5-Canvas. Wurde auch mal in einem Forum nachgefragt und ist dann im Sande verlaufen.

http://www.nachrichtentisch.de

Dies ist nicht meine Seite aber ich habe den Betreiber beim Skripting unterstützt. Was man in den Feldern sieht, sind Nachrichtenfeeds, die von den Zeitungen zur Verfügung gestellt werden und auf dieser Seite gesammelt angezeigt werden.

Ah, verstehe, Du wolltest, dass der Footer am unteren Rand ist, auch wenn die Seite sehr kurz ist.

Versuche, ob position:fixed für den footer das liefert, was Du dir vorstellst.

Zitat

Ich arbeite weiterhin mit dem Standard Windows Editor.

Dann ist es sehr einfach: Bei "Speichern unter" findest Du links neben dem Button "Speichern" ein Dropdown-Menü für die Zeichenkodierung.

Zitat

Was bedeutet die Datei als UTF 8 speichern?

Das bedeutet, dass Du, wenn Du deine Dateien speicherst, in deinem Editor eine bestimmte Zeichenkodierung, in diesem Fall UTF-8, einstellen musst. Bei mir (Visual Studio) wird ein entspr. Menüpunkt bei "Speichern unter" sichtbar, aber weil ich deinen Editor nicht kenne, kann ich dir dazu keine Hinweise geben. Möglicher Weise ist es auch irgend wo in den Einstellungen versteckt.

Diese Seite sieht doch schon sehr gut, dafür brauchst Du dich doch nicht zu entschuldigen.

Mir fällt auf, dass die Bilder in dem Raster noch nicht zufällig sind. Hast Du noch nicht mehr als vier Artikel?

Dann musst Du die Datei auch als UTF-8 speichern. Auch die Artikel-Datei, weil die Überschrift ja daraus entnommen wird. Leider kann ich dir nicht sagen, wie das bei deinem Editor geht.

Das Ergebnis dieses Threads würde ich gern sehen. Poste doch mal die URl:

Oh, natürlich $currentfile, da habe ich mich ein wenig vertan.

Zitat

Da fehlt dann noch die URL des Artikels, oder bin ich auf dem falschen Weg?

Ah so, Du möchtest auch einen Link anbringen. Bei der Überschrift? Das wäre dann die Variable $file. Ich würde empfehlen, die mit in das Array zu übernehmen, dann steht sie dir zur Verfügung:

$files = glob("verzeichnis/*.php");
$h1img = [];
foreach ($files as $currentfile) {
    $doc = new DOMDocument();
    $doc->loadHTMLFile($currentfile);
    $h1 = $doc->getElementsByTagName('h1')->item(0);
    $headline = $h1->nodeValue;
    $img = $doc->getElementsByTagName('img')->item(0);
    $imgsrc = $img->getAttribute("src");
    $h1img[] = ["h1" => $headline, "img" => $imgsrc, "link" => $file];
}

Ist das wirklich nötig? Sowohl für einen Bildpfad als auch für einen Link kannst Du doch eine relative URL verwenden. Das hat ohnehin Vorteile, weil Du dann problemlos lokal testen und problemlos auf eine andere Domain umziehen kannst.

Zitat

Gibt es zum Beispiel die Möglichkeit, dass der anstatt nur ein File zu durchsuchen, alle FIles eines Ordners zu durchsuchen, und für jedes File ein Array zu erstellen?

Ja, die gibt es: Du kannst dir die Dateien in einem Ordner mit der Funktion glob ermitteln:

$files = glob("verzeichnis/*.php");
$h1img = [];
foreach ($files as $currentfile) {
    $doc = new DOMDocument();
    $doc->loadHTMLFile($currentfile);
    $h1 = $doc->getElementsByTagName('h1')->item(0);
    $headline = $h1->nodeValue;
    $img = $doc->getElementsByTagName('img')->item(0);
    $imgsrc = $img->getAttribute("src");
    $h1img[] = ["h1" => $headline, "img" => $imgsrc];
}
var_dump($h1img);

Du hast dann nur das Problem, dass es weitere Dateien in dem Ordner geben könnte, die nicht zu durchsuchen sind. Dann brauchtest Du ein zusätzliches Kriterium, um die richtigen herauszufiltern, z. B. durch ein Prefix:

$files = glob("verzeichnis/article-*.php");

Ja, so hast Du das Problem, dass die Überschrift drüber liegt. Der Grund dafür, dass meine Version funktioniert, ist das Event-Bubbling:

Überschrift und Bild sind Kindelemente vom header. Hovert man diese, so steigt das Event wie eine Blase in der Hierachie auf und erreicht den header, wo es abgefangen wird.