Beiträge von Sempervivum

Ich habe die Zeile 76 wie folgt mutiert: . "<tr class="tab">"

Dann hast Du nur ein simples Problem mit den Hochkommas. So wäre es richtig:

'<tr class="tab">'

Zitat

Mit dem aktuellen code wo ich hier gepostet habe

Wo ist dieser Code? Der in deinem ersten Posting ist unvollständig, man müsste es im Zusammenhang sehen. Am besten die ganze Seite in Aktion. Poste die URL.

chat.scrollTop = elem.scrollHeight;

Wo ist elem definiert?

Du brauchst im wesentlichen nur das, was das Skript bisher für img tut, für figure zu machen:

<section class="gallery">
        <figure><img src="images/dia0.jpg">
            <figcaption>Bild 1</figcaption>
        </figure>
        <figure>
            <img src="images/dia1.jpg">
            <figcaption>Bild 2</figcaption>
        </figure>
        <figure>
            <img src="images/dia2.jpg">
            <figcaption>Bild 3</figcaption>
        </figure>
        <figure>
            <img src="images/dia3.jpg">
            <figcaption>Bild 4</figcaption>
        </figure>
    </section>

$(function () {

            //Globale Variablen

            var active_figure;
            var img_url;

            //Lightbox erstellen

            $('body').prepend('<div id="lightbox_overlay"><div id="lightbox_inhalt"><figure></figure><div id="nav"><i class="fa fa-arrow-left" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i><i class="fa fa-arrow-right" aria-hidden="true"></i></div></div></div>');

            //öffnen und Schließen

            $('.gallery figure').stop().click(function () {

                $('#lightbox_overlay #lightbox_inhalt figure').replaceWith($(this).clone());
                $('#lightbox_overlay').fadeIn(500);

                active_figure = $(this);
            });

            $('.fa-times').stop().click(function () {

                $('#lightbox_overlay').fadeOut(300);

            });

            //nächstes Bild

            $('.fa-arrow-right').stop().click(function () {

                next_figure(active_figure);
            });

            function next_figure(objekt) {
                if ($(objekt).next().is('figure')) {
                    active_figure = $(objekt).next();
                    $('#lightbox_overlay #lightbox_inhalt figure').replaceWith(active_figure.clone());
                } else {

                    active_figure = $(objekt).parent().children('figure').first();
                    $('#lightbox_overlay #lightbox_inhalt figure').replaceWith(active_figure.clone());
                };
            };

            //vorheriges Bild 

            $('.fa-arrow-left').stop().click(function () {
                prev_img(active_img);
            });

            function prev_img(objekt) {
                if ($(objekt).prev().is('img')) {
                    active_img = $(objekt).prev();
                    img_url = $(objekt).prev('img').attr('src');
                    $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
                } else {
                    active_img = $(objekt).parent().children('img').last();
                    img_url = $(objekt).parent().children('img').last().attr('src');
                    $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
                }
            }
        });

Für previous kannst Du es selber umstellen.

Hoffentlich hast Du mich nicht falsch verstanden. "Das geht nur mit jQuery" bezog sich darauf, dass man einen Listener für eine Liste registriert, ohne iterieren zu müssen. Arbeitest Du mit einer Schleife geht es selbstverständlich auch ohne jQuery.

document.getElementsByClassName("sucheKontakte").addEventListener("click", test);

Das geht mit jQuery, aber nicht mit einfachem Javascript. getElementsByClassName() liefert eine Nodelist, in etwa ein Array, über das Du explizit in einer Schleife iterieren und den Listener hinzu fügen musst. Das geklickte Element steht dann unter "this" zur Verfügung und Du kannst das Attribut "value" auslesen.

Ich würde erwarten, dass die Console hier einen Fehler anzeigt.

Zitat

mit ajax alle 1 sekunde nach klick auf submit button laden

Das verstehe ich nicht ganz: "klick auf submit-button" bedeutet, dass dies der Benutzer tut, "alle 1 sekunde" spricht jedoch dafür, dass es automatisch durch das Skript geschieht?

Mit diesem Code in einer Testseite:

    <form name="form">
        <input name="chatform">
    </form>
    <script>
        document.form.chatform.value = 'xxxx';
    </script>

funktioniert es auch im Firefox einwandfrei. Ich finde es jedoch verwirrend, wenn ein name-Attribut den selben Wert hat wie ein Tagname, weil im JS schlecht ersichtlich ist, worum es sich handelt und was wirksam ist. Um heraus zu finden, warum es bei dir nicht geht, müsste man deinen Code im Zusammenhang sehen.

Ja, mit CSS hatte ich früher auch meine Probleme aber im Laufe der Zeit habe ich einiges dazu gelernt und kann es jetzt ganz gut handhaben. Vieles finde ich immer noch unlogisch, z. B. dass es kaum möglich war, etwas vernünftig vertikal zu zentrieren (was jetzt durch Flexlayout kein Problem mehr ist) und kuriose und unerwartete Effekte durch margin-collapse oder baseline-alignment.

Ohne die Hintergrundgrafik erkennt man dein Bild nicht wieder und die Schrift ist unsichtbar, da weiß auf weiß. aber man kann auch ohne das erkennen: Du bringst da etwas durcheinander: align-items gehört zum Flexlayout und ist nur wirksam, wenn auch dispay:flex gesetzt ist. Benutze text-align statt dessen für beide Überschriften, dann werden sie horizontal zentriert. Und das margin-left bei der ersten Überschrift musst Du dann weg lassen.

Und wahrscheinlich ist es besser, die Grafik als Hintergrund anzulegen, dann brauchst Du die Überschriften nicht mit negativem marging darüber zu verschieben. position:relative ist überflüssig, wenn Du sie mit margin verschiebst.

Das geht sehr einfach mit CSS, wenn das Bestätigungsfeld vor dem Datumsfeld steht. Kannst Du das entspr. ändern? Sollte eigentlich möglich sein, da das Bestätigungsfeld ja nicht sichtbar ist.

Wenn Du von Effekten sprichst, meinst Du dann Animationen? Man kann dann sehr viel mit CSS machen. Und für das was damit nicht geht, ist jQuery zu empfehlen. Das Stichwort "Animationen" macht es auch leicht, die Frage nach der Version von jQuery zu beantworten: AFAIK arbeiten erst die 3-er Versionen mit requestAnimationFrame und nach Expertenmeinung ist das sehr zu empfehlen.

Die Frage nach dem Browser-Support kann ich leider nicht beantworten.

Zitat

Aber da ich ja das Ziel habe, JS als solches zu lernen, wäre es meiner Meinung nicht der richtige Weg, direkt sowas wie jQuery einzusetzen, das einem alles erheblich einfacher macht und eigentlich nicht mehr so extrem viel mit der Sprache zu tun hat.

Ich bin schon 64 und das erinnert mich an Diskussionen in den 80-ern des vergangenen Jahrhunderts, wo darüber debattiert wurde, ob man gleich in eine Hochsprache wie C einsteigen, oder erst Mal Assembler lernen sollte. Heute redet niemand mehr von Assembler oder dass man zum Programmieren wissen muss, wie ein Prozessor funktioniert.

Zitat

Ist echt mühselig, auf reines JS zu setzen.

Da hast Du natürlich Recht. Aber was hält dich davon ab, jQuery zu verwenden? Auch dieser Cross-Browser-Code erübrigt sich dann:

var scrollY = window.scrollY || window.pageYOffset;

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.