Beiträge von Sempervivum

Sempervivum

BTW: Möglicher Weise lässt sich das Ganze noch vereinfachen und übersichtlicher machen, wenn Du das HTML etwas anders arrangierst und jeweils eine Tiergruppe in einen übergeordneten Container legst:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <script src="http://www.muench-herdecke.de/js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.buttons a').click(function () {
                $('.container').hide();
                var sAttr = $(this).attr("data-filter");
                if (sAttr == 'all')
                    $('.container').show();
                else
                    $('.' + sAttr).show();
                return false;
            });
        });
    </script>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <a data-filter="all">alle Tiere</a>
        &nbsp;I&nbsp;
        <a data-filter="hund">Hund</a>
        &nbsp;I&nbsp;
        <a data-filter="katze">Katze</a>
        &nbsp;I&nbsp;
        <a data-filter="maus">Maus</a>
    </div>
    <section class="container hund">
         <h2>Hunde</h2>
        <h3>Hund 1</h3>
        <h3>Hund 2</h3>
    </section>
    <section class="container katze">
         <h2>Katzen</h2>
        <h3>Katze 1</h3>
        <h3>Katze 2</h3>
    </section>
    <section class="container maus">
         <h2>Mäuse</h2>
        <h3>Maus 1</h3>
        <h3>Maus 2</h3>
    </section>
</body>

</html>

Alles anzeigen

Sempervivum

Das lässt sich leicht machen: Gib den Überschriften ebenfalls die geeigneten Klassen und beziehe dies beim Ausblenden ein:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <script src="http://www.muench-herdecke.de/js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.buttons a').click(function () {
                $('.container, .headline').hide();
                var sAttr = $(this).attr("data-filter");
                if (sAttr == 'all')
                    $('.container').show();
                else
                    $('.' + sAttr).show();
                return false;
            });
        });
    </script>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <a data-filter="all">alle Tiere</a>
        &nbsp;I&nbsp;
        <a data-filter="hund">Hund</a>
        &nbsp;I&nbsp;
        <a data-filter="katze">Katze</a>
        &nbsp;I&nbsp;
        <a data-filter="maus">Maus</a>
    </div>
    <h2 class="headline hund">Hunde</h2>
    <div class="container hund">
        <h3>Hund 1</h3>
    </div>
    <div class="container hund">
        <h3>Hund 2</h3>
    </div>
    <h2 class="headline katze">Katze</h2>
    <div class="container katze">
        <h3>Katze 1</h3>
    </div>
    <div class="container katze">
        <h3>Katze 2</h3>
    </div>
    <h2 class="headline maus">Maus</h2>
    <div class="container maus">
        <h3>Maus 1</h3>
    </div>
    <div class="container maus">
        <h3>Maus 2</h3>
    </div>
</body>

</html>

Alles anzeigen

Sempervivum

Zitat

Ich habe irgendwo gelesen, dass es Viewport auch in CSS gibt und dass man da die Seite im querformat anderst anzeigen kann, wie im hochkanntformat.

Dann bin ich mir ziemlich sicher, dass das, was Du gelesen hast, "orientation" war und dann trifft darauf die Einschränkung zu, dass es nicht von allen Browsern unterstützt wird. Wenn Du sicher gehen willst, dass es in allen Browsern funktioniert, dann ermittle die Orientierung mit Javascript und weise den betr. Elementen eine geeignete Klasse zu. Damit kannst Du sie dann mit CSS gestalten.

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).

Beiträge von Sempervivum

nicht benötigte Headlines ausblenden

nicht benötigte Headlines ausblenden

Viewport

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