Beiträge von Sempervivum

Sempervivum

Ich habe eine Lösung, aber keine Erklärung:

Der Debugger zeigt, dass in schools.lower this das window-Objekt ist und nicht schools. Ändere ich die Zeile, indem ich eine anonyme Funktion verwende, die lower aufruft, funktioniert es:

Code

        function renew_all() {
            schools.change();
            schools.bigger();
            window.setTimeout(function () { schools.lower() }, 2500);
            window.setTimeout(renew_all, 4000);
            //renew_all();
        }

Vielleicht kann jemand mit tieferen Kenntnissen erklären, warum das so ist.

Sempervivum

Der Grund ist, dass Du die betr. Listenpunkte absolut positioniert hast, ohne eine Position anzugeben. Ändere folgendes:

Lösche position:absolute; bei den Listenpunkten der Untermenüs.
Gib den Listenpunkten im Hauptmenü ein position:relative; und den uls der Untermenüs ein position: absolute; und ein top: 100%;.
Beim Hover gib dem ul der Untermenüs ein display: flex; und flex-direction: column;
Entferne alles float bei den Untermenüs.

Dann sieht es so aus:

html-seminar.de/woltlab/attachment/1815/

Feinheiten müssen noch etwas überarbetet werden, z. B. muss die Position noch etwas weiter herunter.

Sempervivum

Die Seite wird über https geladen, jQuery jedoch nicht. Lade jQuery auch über https, dann sollte es funktionieren.

BTW: Wenn Du das Javascript an das Ende stellst, brauchst Du weder $(document).ready(function(){ noch $(function () {.

Sempervivum

Ich würde es nicht mit dem Setzen des Attributes machen sondern mit addEventListener:

Sempervivum

1. Du hast da zwei Mal das Semikolon vergessen: In Zeile 3 und in Zeile 9.

2. Damit das Hover funktioniert, kannst Du mein CSS aus #3 fast 1-zu-1 übernehmen, nur verwendest Du jetzt Klassen und musst daher die # durch Punkte ersetzen:

Code

        .obj_1:hover~.obj_2 {
            opacity: 0;
        }

        .obj_1 {
            width: 30px;
            height: 30px;
            background-color: blue;
        }

        .obj_2 {
            width: 30px;
            height: 40px;
            margin: 30px;
            background-color: green;
            transition: opacity 0.5s;
        }

Alles anzeigen

Sempervivum

Ich habe ja auch nicht definitiv gesagt, dass eine Tabelle mehr zu empfehlen ist. Ich würde jedoch von float abraten. Außerdem ist es mir sympatischer, wenn die Daten, die zusammengehören, auch zusammenstehen. Auf diese Weise habe ich folgendes gemacht:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Test Tabelle</title>
    <style>
        #Text {
            background-color: #acacd5;
            left: 2em;
            bottom: 2em;
            overflow-x: scroll;
            font-size: 5em;
            display: flex;
        }

        .Spalte {
            display: flex;
            flex-direction: column;
        }

        .Spalte div {
            height: 1em;
            white-space: nowrap;
            padding: 0.2em;
        }

        .Spalte div:nth-child(1) {
            background-color: lightblue;
        }

        .Spalte div:nth-child(2) {
            background-color: lightsalmon;
        }

        .Spalte div:nth-child(3) {
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div id="Text">
        <div class="Beschriftung Spalte">
            <div>Name:</div>
            <div>Straße:</div>
            <div>Ort:</div>
        </div>
        <div class="Spalte">
            <div>Bernd</div>
            <div>Hamburger Straße</div>
            <div>Berlin</div>
        </div>
        <div class="Spalte">
            <div>Ulrich</div>
            <div>Schulweg</div>
            <div>Dresden</div>
        </div>
        <div class="Spalte">
            <div>Werner</div>
            <div>Stralsundstraße</div>
            <div>Hannover</div>
        </div>
    </div>
</body>

</html>

Alles anzeigen

Also mit Flexlayout. U. U. wäre Gridlayout besser gewesen, aber ich empfehle das nicht gern, weil es von IE11 nicht richtig unterstützt wird.

Sempervivum

Zitat

dass man table gar nicht mehr so nutzt?

So pauschal sollte man das nicht sagen. Es trifft zu, dass man Tabellen besser nicht für Layoutzwecke verwenden sollte. Für die Darstellung von Daten, die tabellarischer Natur sind, ist nichts dagegen einzuwenden, Tabellen zu verwenden. Auf der einen Seite trifft das auf deine Daten zu, auf der anderen Seite auch wieder nicht, weil die Überschriften vertkal in der linken Spalte stehen statt horizontal im Kopf.

Sempervivum

Verstehe. Ist sicher machbar, aber mir im Moment zu kompliziert. Für sich gesehen, wäre es noch relativ einfach, diese Seiten horizontal zu sliden, aber man müsste es in das vorhandene Skript integrieren und das macht es ein wenig kompliziert.

Vielleicht macht es jemand anders.

Sempervivum

Verstehe nicht ganz: Weder im oberen noch im unteren Bereich sehe ich Pfeile nach links und rechts, sondern oben navigiert man durch horizontales Wischen? Oder meinst Du das Weiterschalten mit den Pfeiltasten?

Sempervivum

Dieses CSS:

Code

.uk-margin-top uk-button uk-button-large uk-button-danger {
    display: none;
}

wird nicht funktionieren, denn es würde bedeuten:
Das Element mit dem Namen "uk-button-danger" (also nicht der Klasse) ist ein Nachfahre des Elementes mit dem Namen "uk-button-large" und dieses ist ein Nachfahre des Elementes mit dem Namen "uk-button" und dieses ..., siehe hier:

https://wiki.selfhtml.org/wiki/CSS/Selek…ahrenkombinator

Richtig wäre dieses:

Code

.uk-margin-top.uk-button.uk-button-large.uk-button-danger {
    display: none;
}

Allerdings ist es auf jedenfalls empfehlenswert, einen Selektor zu verwenden, der spezifischer ist als diese Klassen, wie von Justus vorgeschlagen.

Sempervivum

Das geht relativ leicht auch mit CSS aber mit Einschränkungen bzgl. der Anordnung:

Das zweite Element muss ein Geschwisterelement oder ein Kind eines Geschwisterelementes des ersten Elementes sein.
Das zweite Element muss nach dem ersten notiert werden.

Es gibt aber auch einen Vorteil: Mit CSS-Transition oder -Animation können viele Eigenschaften einfach animiert werden.

Code

<style>
        #obj_1:hover~#obj_2 {
            opacity: 0;
        }

        #obj_2 {
            transition: opacity 0.5s;
        }
    </style>
    <!-- Dein Objekt in HTML. Als Beispiel ein Button -->
    <input type="button" id="obj_1" />
    <!-- Dein zweites Objekt -->
    <div id="obj_2">
        <input type="button" />
    </div>

Alles anzeigen

Sempervivum

Dieses CSS in eine Datei custom.css im Verzeichnis css schreiben:

Code

img.customimg {
    width: 10%;
    height: auto;
}

Diese Datei in der HTML-Datei einbinden:

Code

    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/dragdealer.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" />  <!-- dieses einfuegen -->
    <script src="js/modernizr.custom.js"></script>
</head>

Das HTML für das Einbinden des Bildes, wie Du siehst, habe ich dem Bild die Klasse "customimg" gegeben, damit man es zweifelsfrei identifizieren kann.

Code

                <div class="content" data-content="content-2">
                    <h2>Round Table <span>King Arthur's creative team
                            techniques</span></h2>
                    <img class="customimg" src="img/buttonpause.png">
                    <p>Passing by the rugged Socotra, we soon sighted
                        the mountainous southern coast of Arabia, and by
                        midday on January 20 we were focussing our binoculars on the picturesque gate of the Indian
                        Ocean, Aden. Curious it is how Britain has secured all the great strategical points of the
                        world—Gibraltar, Suez, Aden, Singapore, Thursday Island, the Cape of Good Hope, and the rest.
                        And one has only to see Aden, with its rocky peaks piercing the skyline, to realize how strong
                        it is, and how futile would be any effort to capture it. For all the defences of Aden seem to be
                        hewn out of solid granite.</p>

Alles anzeigen

Sempervivum

Und damit es unabhängig von Groß- und Kleinschreibung ist, kannst Du beide Strings zuvor in Kleinschreibung umwandeln:

https://developer.mozilla.org/de/docs/Web/Ja…ing/toLowerCase

Sempervivum

Dann ist es ganz einfach: Informiere dich über indexOf(), damit kannst Du prüfen, ob ein Teilstring in einem anderen String enthalten ist:

https://wiki.selfhtml.org/wiki/JavaScrip…/String/indexOf

Sempervivum

Ja, das HTML bleibt unverändert.

Sempervivum

Der Name des Bildes ist im CSS nicht notwendig, denn das ist eine allgemeine Formulierung. Verbal etwa: Nimm alle divs, die ein Attribut data-content mit dem Wert "content-2" haben. Darin suche jeweils ein img-Element und wende darauf die CSS-Anweisungen in den geschweiften Klammern an.

Und das CSS gehört dann in den Head.

Sempervivum

Doch, das hat schon seine Richtigkeit, denn das ist CSS, kein HTML. Wenn Du es in deine HTML-Seite einbetten willst, muss es so aussehen und dann sind auch die spitzen Klammern da:

Code

<style>
    div[data-content="content-2"]>img {
       width: 30%;
       height: auto;
    }
</style>

Sempervivum

Wenn Du die Einträge aus einer Datenbank ausliest, kannst Du Wildcards verwenden, siehe z. B. hier:

https://www.guru99.com/wildcards.html

Sogar Regexes sind möglich:

https://dev.mysql.com/doc/refman/8.0/en/regexp.html

Sempervivum

Nein, so kann es nicht funktionieren, denn das, was ich zuletzt gepostet habe, ist CSS und kein HTML. Informiere dich, wie Du CSS einbinden kannst:

https://wiki.selfhtml.org/wiki/CSS/Tutor…heets_einbinden

Sempervivum

Wenn es direkt in dem Container div.content liegt, so wie Du es in #12 gepostet hast, kannst Du es anpassen, indem Du die Größe in Prozent angibst:

Code

div[data-content="content-2"]>img {
   width: 30%;
   height: auto;
}

Liegt es in irgend welchen Untercontainern, kannst Du statt dessen Viewport-Units verwenden, z. B.:

width: 30vw;d. h. 30% der Breite des Browserfenstern.

Beiträge von Sempervivum

Eine Methode funktioniert eine ähnliche nicht

Untermenüpunkte liegen übereinander

Back to top Button

Attribute für alle Links setzen.

Hovern über ein Objekt soll Opacity von einem anderen Objekt ändern

div mit eigenem Scroll horizontal als Tabelle

div mit eigenem Scroll horizontal als Tabelle

drag slider durchsichtig

drag slider durchsichtig

Button ausblenden mit display: none

Hovern über ein Objekt soll Opacity von einem anderen Objekt ändern

drag slider durchsichtig

Durchsuchen eines Strings anhand Teileingabe des Inhalts

Durchsuchen eines Strings anhand Teileingabe des Inhalts

drag slider durchsichtig

drag slider durchsichtig

drag slider durchsichtig

Durchsuchen eines Strings anhand Teileingabe des Inhalts

drag slider durchsichtig

drag slider durchsichtig