Beiträge von Sempervivum

Sempervivum

Glückwunsch, dass Du die Lösung gefunden hast. Freut mich zu lesen.

Sempervivum

Ja, das Schlüsselwort lautet "orientation". Offenbar leider nicht von Safari und Android-Browser unterstützt:

https://caniuse.com/#feat=screen-orientation

Sempervivum

Zur Sicherheit habe ich mal gegoogelt: jQuery-document-ready feuert nicht, wenn Inhalte durch Ajax nachgeladen werden:

https://stackoverflow.com/questions/2024…-document-ready

Dies führt zu einem Problem mit dem Javascript, das mitgeladen wird, wo die Eventlistener für Mouseup registriert werden. Offenbar findet das gar nicht statt. Du kannst es überprüfen, indem du in diesem Codeabschnitte ein console.log einfügst.

Lösung, indem Du die Eventlistener ebenfalls im complete-Callback registrierst:

Code

        function smartRefresh() {
            if (typeof (activeBlock) != "undefined") {
                url = "./lib/parade_blockrefresh.php?blockID=" + activeBlock;
            } else {
                url = contentPath + "?" + 1 * new Date()
            }
            $("#refresh.active").load(url, function () {
                if (typeof (left) != "undefined") { $('.block-row-left').scrollLeft(left); }
                if (typeof (middle) != "undefined") { $('.block-row-midddle').scrollLeft(middle); }
                if (typeof (right) != "undefined") { $('.block-row-right').scrollLeft(right); }

                $('.carousel-item.active .block-row-left').mouseup(function () {
                    left = $(this).scrollLeft();
                });

                $('.carousel-item.active .block-row-middle').mouseup(function () {
                    middle = $(this).scrollLeft();
                });

                $('.carousel-item.active .block-row-right').mouseup(function () {
                    right = $(this).scrollLeft();
                });
            });
            $(".popover").popover('hide');
        }

Alles anzeigen

Sempervivum

... oder etwas kürzer ohne doppelten Code:

Code

            function smartRefresh() {
                if (typeof (activeBlock) != "undefined") {
                    url = "./lib/parade_blockrefresh.php?blockID=" + activeBlock;
                } else {
                    url = contentPath + "?" + 1 * new Date()
                }
                $("#refresh.active").load(url, function () {
                        if (typeof (left) != "undefined") { $('.block-row-left').scrollLeft(left); }
                        if (typeof (middle) != "undefined") { $('.block-row-midddle').scrollLeft(middle); }
                        if (typeof (right) != "undefined") { $('.block-row-right').scrollLeft(right); }
                    }
                );
                $(".popover").popover('hide');
            }

Alles anzeigen

Sempervivum

Mir scheint, da sind die Klammern nicht richtig gesetzt und den Callback brauchst Du in beiden Zweigen des if:

Code

        function smartRefresh() {
            if (typeof (activeBlock) != "undefined") {
                $("#refresh.active").load("./lib/parade_blockrefresh.php?blockID=" + activeBlock), // hier Klammer nicht schliessen
                    function () {
                        if (typeof (left) != "undefined") { $('.block-row-left').scrollLeft(left); }
                        if (typeof (middle) != "undefined") { $('.block-row-midddle').scrollLeft(middle); }
                        if (typeof (right) != "undefined") { $('.block-row-right').scrollLeft(right); }
                    } // sondern hier
                $(".popover").popover('hide');
            }
            else {
                $("#refresh.active").load(contentPath + "?" + 1 * new Date()); // auch hier den Callback
                $(".popover").popover('hide');
            }
        }

Alles anzeigen

So sollte es richtig sein:

Code

        function smartRefresh() {
            if (typeof (activeBlock) != "undefined") {
                $("#refresh.active").load("./lib/parade_blockrefresh.php?blockID=" + activeBlock,
                    function () {
                        if (typeof (left) != "undefined") { $('.block-row-left').scrollLeft(left); }
                        if (typeof (middle) != "undefined") { $('.block-row-midddle').scrollLeft(middle); }
                        if (typeof (right) != "undefined") { $('.block-row-right').scrollLeft(right); }
                    }
                );
                $(".popover").popover('hide');
            }
            else {
                $("#refresh.active").load(contentPath + "?" + 1 * new Date(),
                    function () {
                        if (typeof (left) != "undefined") { $('.block-row-left').scrollLeft(left); }
                        if (typeof (middle) != "undefined") { $('.block-row-midddle').scrollLeft(middle); }
                        if (typeof (right) != "undefined") { $('.block-row-right').scrollLeft(right); }
                    }
                );
                $(".popover").popover('hide');
            }
        }

Alles anzeigen

Die URL und die anonyme Funktion sind beide Parameter von load(():

Sempervivum

Zitat

runterladen und selbst hosten

Da habe ich Bedenken, ich sage nur "Urheberrecht" und "AGBs von Youtube".

Sempervivum

Habe ich gefunden.

Wahrscheinlich feuert das document-ready nur, wenn die ganze Seite fertig ist und nicht, wenn Du einen Teilbereich mit jQuery-load nachlädst. Versuche, das Setzen der Scrollposition in den Callback für das load zu verschieben:

Code

function smartRefresh() {
    $("#refresh.active").load(
        contentPath + "?" + 1*new Date(),
        function() {
            if (typeof(left) != "undefined") {$('.block-row-left').scrollLeft(left);}
            if (typeof(middle) != "undefined") {$('.block-row-midddle').scrollLeft(middle); alert(middle);}
            if (typeof(right) != "undefined") {$('.block-row-right').scrollLeft(right);}
        }
    );
    $(".popover").popover('hide');
}

Alles anzeigen

(ungetest, ich hoffe, ich habe mich bei den Klammern nicht verlaufen).

Sempervivum

Wenn ich mir das ganze life auf deiner Seite ansehe, verstehe ich es nicht: Die Seite ist responsiv und ich bekomme keinen horizontalen Scrollbalken zu Gesicht?

Sempervivum

Bei Flex ist der Zeilenumbruch standardmäßig ausgeschaltet. Du kannst ihn mit flex-wrap: wrap; einschalten.

Sempervivum

Verstehe, ein ähnliches Problem hat man, wenn man wieder zur Startseite will.

Das kannst Du beheben, indem Du mit absoluten Pfadangaben relativ zum Basis-URI referenzierst, wie es bei SelfHtml genannt wird:

https://wiki.selfhtml.org/wiki/HTML/Tuto…I_referenzieren

Also dem Link ein / voranstellen:

<a href="/index.php">Startseite</a>

Sempervivum

Zitat

Allerdings geht das ganze nicht mehr zurück wenn ich im Reiter „aktuelle Würfe“ bin.

Wie meinst Du das?

Sempervivum

Zitat aus der Fehlermeldung auf https://www.puschelreich.de/puschels/kitten/index.php:

Zitat

http:// wrapper is disabled in the server configuration by allow_url_include=0

...
failed to open stream: no suitable wrapper could be found

Und im Manual von include steht:

Zitat

Wenn "include-URL-Wrapper" aktiviert sind (was sie in der Standard-Konfiguration sind), kann die einzubindende Datei mit einem URL (über HTTP oder ein anderes unterstütztes Protokoll - siehe Unterstützte Protokolle und Wrapper für eine Liste unterstützter Protokolle) anstall eines lokalen Pfades eingebunden werden.

Offenbar ist das auf deinem Server nicht der Fall. Verwende statt dessen relative Adressierung, d. h.

../../steuerungoben.php

Sempervivum

Auch kein Problem, wenn Du durch eine geeignete Adressierung die Pfeilstruktur auf die erste Stufe beschränktst:

Code

        #my-breadcrumbs>ul>li>a:after {
            content: "";
            border-top: 40px solid transparent;
            border-bottom: 40px solid transparent;
            border-left: 40px solid #4060A5;
            position: absolute;
            right: -40px;
            top: 0;
        }

        #my-breadcrumbs>ul>li>a:before {
            content: "";
            position: absolute;

            margin-top: -30px;
            border-width: 40px 0 40px 40px;
            border-style: solid;
            border-color: #4060A5 #4060A5 #4060A5 transparent;
            left: -40px;
        }

Alles anzeigen

Sempervivum

Zitat

Jetzt wäre es halt noch toll, wenn das Submenu untereinander angezeigt wird und überlappt und nicht alles verschiebt.

Das kannst Du erreichen, wenn Du das Submenu absolut positionierst. I. allg. etwas wovon man abrät, aber in diesem Fall und allgemein bei Aufklappmenüs ein gängiges und bewährtes Verfahren:

CSS

        li {
            position: relative;
            display: inline-block;
        }

        ul.submenu {
            position: absolute;
            z-index: 999;
            left: 0;
            top: 100%;
            display: flex;
            flex-direction: column;
        }

        li:hover ul.submenu li {
            margin-top: 0 !important;
        }

        li:hover ul.submenu {
            margin-top: 0 !important;
        }

Alles anzeigen

Ich habe es nicht bis ins Detail ausgearbeitet. Z. B. bei der Überdeckung heben sich die Menüpunkte wegen der einheitlichen Farbe nicht ab, da ist noch Feinarbeit gefragt.

Sempervivum

Mit Grid habe ich keine Erfahrung aber mit Flex ist es einfach:

https://jsfiddle.net/Sempervivum/h10nte9u/9/

Es geht auch mit weniger Containern:

https://jsfiddle.net/Sempervivum/h10nte9u/13/

Sempervivum

Mit Margins und Flex kann man noch viel mehr machen:

https://stackoverflow.com/questions/3255…856609#33856609

Sempervivum

Zitat

es liegt einfach daran das

halt kein Platz mehr vorhanden ist um alles zu zentrieren.

Das trifft zu, justify-content kann nur wirken, wenn freier Raum vorhanden ist.

Aber warum bist Du denn der Meinung, dass Du jetzt nicht mehr mit margin arbeiten kannst? Dieses funktioniert einwandfrei, um vertikalen Abstand zwischen den Bildern herzustellen:

Code

        aside {
            background-color: #808000;
            width: 175px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        aside>img,
        aside>a {
            margin-top: 20px;
        }

Alles anzeigen

(p-Element wurde entfernt).

Sempervivum

So, dieses funktioniert bei mir:

Code

    <input onchange="checkdir(this.value);">
    <script>
        function checkdir(pdir) {
            $.ajax({
                url: "checkdir.php",
                method: "post",
                data: { dir: pdir }
            }).done(function (output) {
                if (output == "true") console.log(pdir + " existiert");
                else console.log(pdir + " existiert nicht");
            });
        }
    </script>

Alles anzeigen

checkdir.php:

PHP

<?php
if (isset($_POST['dir'])) {
    if (file_exists($_POST['dir'])) {
        echo "true";
    } else {
        echo "false";
    }
}
?>

Sempervivum

Zitat

Zuerst mal, muss es nicht in Zeile 7 data: vdir heißen?

Da hast Du vollkommen recht, so wie es da steht, ist es Blödsinn. So sollte es richtig sein:

Code

$.ajax({
        url: "checkdir.php",
        data: {dir: vdir}
    }).done(function(output) {

success und done sollten eigentlich gleichwertig sein. Ich werde mal ein vollständige Testseite machen ...

Sempervivum

Das "resultiert wahrscheinlich immer in einem Fehler" muss ich korrigieren: Ich habe es jetzt nicht genau untersucht, aber ich erwarte dass sich der Aufruf eines Verzeichnisses mit Ajax genauso verhält wie der Aufruf im Browser: Ist das Verzeichnis für Directory-Browsing freigegeben, wird das HTML des Directory-Listings zurückgegeben, ist es gesperrt, führt es zu einem Fehler.

Was das done() betrifft: Diese Funktion wird aufgerufen, wenn der Ajax-Aufruf erfolgreich war und hat die Ausgabe des Skriptes als Parameter. Müsste dann so aussehen:

Code

function check(txt){
    var vval = ($("#text").val());
    var vdir = './upload/' + vval + '/';
    console.log(vdir);
    $.ajax({
        url: "checkdir.php",
        dir: vdir
    }).done(function(output) {
        if (output =="true") {
            // das Verzeichnis existiert
            $('#frage').animate({"opacity": "1"}, 500);
            $('#background').animate({"opacity": ".70"}, 500);
            $('#background, #frage').css({"display": "block" , "margin": "1% auto"});
            console.log('exists code');
        } else {
            console.log('not exists code');
        } 
    });
}

Alles anzeigen

Ungetestet.

Beiträge von Sempervivum

Scrollposition übergeben funktioniert nicht

Viewport

Scrollposition übergeben funktioniert nicht

Scrollposition übergeben funktioniert nicht

Scrollposition übergeben funktioniert nicht

YT Videos einbinden via HTML

Scrollposition übergeben funktioniert nicht

Scrollposition übergeben funktioniert nicht

Hover effekt container

Include .php aus einem anderen Verzeichnis lesen

Include .php aus einem anderen Verzeichnis lesen

Include .php aus einem anderen Verzeichnis lesen

Submenü anders gestalten

Submenü anders gestalten

right aligned Navbar mit Bild und Text

Bilder im Container zentrieren

Bilder im Container zentrieren

Existierendes Verzeichnis erkennen und entsprechend handeln

Existierendes Verzeichnis erkennen und entsprechend handeln

Existierendes Verzeichnis erkennen und entsprechend handeln