Beiträge von Sempervivum

Poste doch Mal die URL der Seite, damit man es sich im Zusammenhang ansehen kann.

In dem Fiddle sieht man sowohl position: fixed als auch position:absolute. Deaktiviert man beides, ist es OK.

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

Leider gibt es eine Einschränkung: Der Entwickler schreibt, dass er Mobilgeräte noch nicht unterstützt. Da ist u. U. noch etwas Handarbeit angesagt. Vor allem muss man unterbinden, dass sich gleichzeitig die Standardtastatur öffnet.

Die bleiben verschwunden, weil die Klasse .opa noch gesetzt ist, so dass der Endwert der Animation wirksam ist.

Hover hat drei Nachteile:

1. Funktioniert nicht auf Touch-Geräten
2. Führt zum (langsamen) Flackern, wenn sich das Hexagon weg bewegt und nicht mehr unter der Maus liegt.
3. Es ist praktisch unmöglich, das mittlere zu vergrößern, weil man zuvor mit der Maus über eines der äußeren fährt und dieses dann das mittlere überdeckt.

Schau mal, ob dies etwas für dich ist:

https://github.com/srm985/mok-project/tree/master

So etwas gibt es von jQuery-UI:

https://jqueryui.com/autocomplete/

Ob es Sinn macht, darüber will ich nicht urteilen. Funktionieren tut es auf jeden Fall, wenn Du die absolute Positionierung weg lässt. Ob es praktikabel ist, hängt zum großen Teil davon ab, wie viel Inhalt Du in die Kästen tun willst, ob er hineinpasst, wenn man die Größe auf das Browserfenster begrenzt.

Einfach die position-Angaben weg lassen.

Zitat

als was macht man dann die Navigation auch als flex das ich die Seite in drei Lines aufbaue?

Weiß nicht genau, ob ich das richtig verstehe: Du möchtest drei statt zwei Zeilen? Dann brauchst Du nur eine dritte Zeile hinzu zu fügen. Oder meinst Du drei Zeilen einschl. Navi?

Das liegt daran, dass Du position:absolute bzw. position:fixed für den Header verwendest - immer wieder eine Quelle für Probleme. Die Navi wird nicht in das erste Div gerechnet sondern sie überdeckt dieses und es sieht so aus, als ob seine Höhe zu klein sei.

Was mich betrifft, so habe ich das Ganze bisher nicht verstanden. Habe es mir aber noch Mal angesehen und mir scheint, man kann das Problem auf etwas ziemlich einfaches reduzieren:

Auf der Pauschalreisen-Seite gibt es einen iFrame, der momentan auf eine feste Höhe von 5000px eingestellt ist. Und Du möchtest, dass sich die Höhe dynamisch an den Inhalt anpasst?

Edit: Diese Link, wo die Höhenanpassung funktioniert, liefert zzt. eine leere Seite:

https://www.preiswerter-buchen.de/traffics_resize.html

Laut Doko heißt es einfach

align: 'left'

https://projects.calebevans.me/jcanvas/docs/text/

Dort wird auch beschrieben, wie man den Text automatisch umbrechen kann, indem man eine Breite angibt.

Zitat

die alte Leiste wieder sichtbar mache und dann die neuen Namen für den Text ( Vornamen) reinschreibe.

Oder arbeitet ich bessewr mit removeLayers()?

Schwer zu sagen, was besser ist. Einfacher zu realisieren ist u. U. die zweite Möglichkeit, weil Du dabei deine Funktion für das Erstellen einfach nur erneut mit anderen Parametern aufrufen musst, während Du bei der ersten es mit setLayer neu machen musst.

Vermutlich ist es so, dass der Code korrekt ausgeführt wird, aber die Änderungen nicht sichtbar werden, weil das drawLayers() für die letzten beiden Anweisungen fehlt.

Das geht relativ einfachemit jQuery.getJSON():

$.getJSON( "deine-json-datei.json", function(data) {
    var id = data.id,
        type = data.type,
        status = data.status,
        title = data.title;
        // So kannst Du auf die einzelnen Element zugreifen
});

Ja, so sollte es gehen:

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

Zitat

macht dein Code das ?

Das sieht man sofort, wenn man sich mein Beispiel in Aktion ansieht: Die vier Boxen füllen den Raum unterhalb der Navi vollständig aus, ohne dass man selbst irgend etwas berechnen muss. Man kann die Navi beliebig anlegen, mit fester oder automatischer Höhe, und der Browser füllt mit den zwei Boxenreihen immer den freien Raum darunter aus.

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

Zitat

flex

This is the shorthand for flex-grow, flex-shrinkand flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.

Nein, wenn man Flexlayout richtig einsetzt, braucht es kein calc. Siehe mein Beispiel.

Schau mal, ob dies das ist, was Du dir vorstellst:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>

<body>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #wrapper {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        nav {
            font-size: 2em;
            background-color: lightblue;
        }
        .line {
            flex: 1 1 10px;
            display: flex;
        }
        .box {
            border: 2px solid blue;
            flex: 1 1 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .line:first-of-type .box:first-child {
            background-image: url(images/dia0.jpg);
            background-size: cover;
        }
        .line:last-of-type .box:last-child {
            background-image: url(images/dia1.jpg);
            background-size: cover;
        }
        
    </style>
    <div id="wrapper">
        <nav>
            Hier die Navigation
        </nav>
        <div class="line">
            <div class="box">
            </div>
            <div class="box">
                Der Text<button>Der Button</button>
            </div>
        </div>
        <div class="line">
            <div class="box">
                Der Text<button>Der Button</button>
                </div>
            <div class="box">
            </div>
        </div>
    </div>
</body>

</html>

Bevor wir mit einem Modal anfangen, sollten wir auf das prompt verzichten und statt dessen ein Input-Felder verwenden:

<form>
        <label>
            Attributwert Attribut1 ändern:
            <input class="attrinput" type="text">
            <input class="okbutton" type="button" value="Abschicken" data-deviceid="deviceid1" data-attributeid="attributeId1">
        </label>
        <label>
            Attributwert Attribut2 ändern:
            <input class="attrinput" type="text">
            <input class="okbutton" type="button" value="Abschicken" data-deviceid="deviceid2" data-attributeid="attributeId2">
        </label>
    </form>
    <script>
        jQuery(".okbutton").on("click", function () {
            var deviceId = $(this).data("deviceid"),
                attributeId = $(this).data("attributeid"),
                newValue = $(this).prev(".attrinput").val();
            console.log("clicked", deviceId, attributeId, newValue
            );
            if (newValue != null) {
                jQuery.get('rest/devices/' + deviceId,
                    + '/attributes/' + attributeId
                    + '/valueText?set=' + newValue);
            }
        });
    </script>

Erst Mal um zu testen, ob es damit funktioniert. console.log ist für mich zum Testen, jQuery.get konnte ich verständlicher Weise nicht testen.

Ich verstehe das Ganze nicht mehr richtig. Wo ist denn da die SPS, von der Du weiter oben geschrieben hast?

Ohne es richtig zu verstehen, könntest Du statt des prompt ein Modal verwenden und testen, ob das Problem damit auch auftritt.

Also offenbar ein Cross-Origin-Problem. Wird die Seite in dem iFrame denn überhaupt angezeigt?

Verstehe ich das richtig: Die Elternseite ist Joomla und liegt auf einem lokalen Webserver. Die Kindseite, die in dem iFrame angezeigt werden soll, liegt auf einem anderen Webserver, den die SPS bereit stellt?

Es gibt zu diesem Problem einiges bei Stackoverflow:

https://stackoverflow.com/ques…iframe-cross-domain-issue

Zitat

You need control over the domain you want to embed to remove/amend its CORS policy. It the domain has explicitely blocked Cross-Origin requests, there's nothing you can do about it.

Wahrscheinlich hast Du ja Zugriff auf die SPS?