Beiträge von Sempervivum

Ein potenzielles Problem beim Verschieben sehe ich noch: Beim dragstop setzt Du ja die Koordinaten in den Eingabefeldern auf die neue Position. Diese haben jedoch je einen Eventlistener für "change" und der triggert natürlich auch, wenn Du mit Javascript etwas einträgst und veranlasst ein Neuzeichnen. Trägst Du die x-Koordinate ein, wird sofort neu gezeichnet, obwohl die y-Koordinate noch gar nicht gesetzt ist. Ich könnte mir vorstellen, dass das Probleme verursacht.

Weil ich es analysieren wollte, habe ich ein Demo ohne den ganzen Overhead gemacht und dort funktioniert das Verschieben und die Ausgabe der Koordinaten einwandfrei:

https://jsfiddle.net/Sempervivum/gwffr4ow/3/

Ich habe eine Weile suchen müssen, aber jetzt habe ich die Ursache für die zu kleine Schrift gefunden:

Die Schriftgröße wird in global.css so fest gelegt:

.g-font-size-15--xs {
    font-size: 0.9375rem !important;
}

Wie man hier nachlesen kann, ist die Basis für rem die Fontsize, die im html-Element definiert ist:
https://die-netzialisten.de/wordpress/em-u…er-unterschied/

Im html-Element wird die Fontsize sowohl von Bootstrap mit 10px als auch in style.css mit 16px definiert. Auf der problematischen Seite

http://kahn.8sf.de/nested-tabs-test/menu-tabs-footer.html

wird zunächst style.css und dann das Bootstrap-CSS eingezogen, so dass die 10px von Bootstrap die 16px von style.css überschreiben. Auf der Seite, wo die Schriftgröße passt, ist es umgekehrt, so dass style.css mit 16px wirksam ist.

Deaktiviert man die Definition von Bootstrap ist alle OK:

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

D. h. wenn Du die Reihenfolge von style.css und Bootstrap-CSS tauschst, sollte alles wieder OK sein.

D. h. auch, dass das Problem nicht durch die Nested Tabs verursacht wird.

Zitat

beim Zeichnen benutzt Du ja x1, y1, x2, y2, x3, y3. Versuche mal, diese auszulesen und daraus x und y zurück zu berechnen.

Zitat

Die zweite Idee von dir hat dementsprechend nicht so richtig funktioniert

Ja, das habe ich inzwischen auch fest gestellt: x1, y1 etc. ändern sich überhaupt nicht beim Dragging.

Dreieck mit Polygon in die linke Ecke:

https://jsfiddle.net/Sempervivum/v83hquqj/6/

Das Problem beim Verschieben überblicke ich leider noch nicht ganz. Vermutlich liegt es daran, dass jCanvas die Eigenschaften x und y nicht kennt, denn beim Zeichnen benutzt Du ja x1, y1, x2, y2, x3, y3. Versuche mal, diese auszulesen und daraus x und y zurück zu berechnen.

Also ich finde jCanvas schon sehr einfach. Eine kompakte Doku, wo man sehr schnell findet, was man machen will. Der Nachteil ist, dass es pixelbasiert ist und deshalb schlecht skalierbar. Daher habe ich auch häufig d3.js benutzt und finde es dort wesentlich schwieriger, herauszufinden, wie man ein Vorhaben umsetzt. Es gibt noch mehr Bibliotheken für Vektorgrafiken, aber damit habe ich mich noch nicht beschäftigt.

Dies meine ich:

https://jsfiddle.net/Sempervivum/v83hquqj/1/

Dadurch, dass man einen Radius angibt, definiert man ja einen (unsichtbaren) Kreis. Und das Polygon wird sehr wahrscheinlich dadurch definiert, dass man Punkte auf diesen Kreis setzt und mit geraden Linien verbindet. Und die Koordinaten beziehen sich sehr wahrscheinlich auf diesen unsichtbaren, umgebenden Kreis.

Was das Dreieck betrifft, so vermute ich stark, dass sich die Koordinaten auf den umgebenden Kreis beziehen. Beim Zeichnen gibt man ja auch den Radius an.

Entscheidend ist, dass Du dieses CSS nach dem Einziehen von Bootstrap einfügst, etwa so:

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<style>
#tg-container * {
    box-sizing: content-box;
}
</style>

Da funkt dir Bootstrap dazwischen durch sein box-sizing:border-box. Abhilfe leicht, indem Du für den Container der Timeline den default-Wert setzt:

#tg-container * {
    box-sizing: content-box;
}

Zitat

Hat niemand eine Idee ?

Ich nicht, aber bei Stackoverflow gibt es einige Hinweise für diverse Versionen von Bootstrap:

https://stackoverflow.com/questions/1542…itter-bootstrap

Verstehe nur Bahnhof: Ich sehe nur links dieses hellbaue Herz und ganz rechts dieses Anmerkungssymbol, was hier im Forum "Abo verwalten" ist.

Aber mal in's Blaue geraten: Meinst Du dies:

        function show(e) {
            e.preventDefault()
            var value = $(this).val();
            alert(value);
        }

Und wenn Du HTML postest, solltest Du besser das generierte HTML posten, das die Quelltextansicht des Browsers anzeigt.

Wenn Du ein GIF erstellst, kannst Du festlegen, ob es nur einmal abgespielt wird oder wiederholt. Wie das geht, hängt von dem Programm ab, mit dem Du es erstellst.

Das Problem ist wohl, dass sich hier keiner mit diesem Captivate auskennt. Den Fenster für das Javascript hast Du ja schon gefunden. Du musst in der Doku nachlesen und heraus finden:

1. Wie man die Antwort des Benutzers an Javascript übergibt und
2. Wie man das Ergebnis, d. h. die Punkte, aus dem Javascript zurück an Captivate übergibt.

Ja, die Beschreibung in dem Link ist etwas dürftig. Als Einstieg ist vielleicht dieses besser geeignet:

Zitat

<div><img src=....> ?

Nein, wie ich schon schrieb, sind es dann keine Hintergrundbilder. Lies meinen Link, dort ist beschrieben, wie es geht.

Nein, so wie Du es jetzt hast, sind es keine Hintergrundbilder. Lies hier, wie es geht:

http://wiki.selfhtml.org/wiki/CSS/Eigen…ben_und_-bilder

Du wirst background-image, background-position und background-repeat brauchen.

Diese Funktion sollte die Punktezahl berechnen, voraus gesetzt, ich habe dich richtig verstanden:

        function getScore(value) {
            var lowerLimit = 75, upperLimit = 80,
                maxValue = 100; maxScore = 10;
            if (value < lowerLimit) factor = value / lowerLimit;
            else if (value > upperLimit) factor = (maxValue - value) / (maxValue - upperLimit);
            else factor = 1;
            return maxScore * factor;
        }

Demo zum Testen:

    Antwort: <input id="myinput" onchange="calcScore(this.value);"> Punkte: <span id="result"></span>
    <script>
        function getScore(value) {
            var lowerLimit = 75, upperLimit = 80,
                maxValue = 100, maxScore = 10;
            if (value < lowerLimit) factor = value / lowerLimit;
            else if (value > upperLimit) factor = (maxValue - value) / (maxValue - upperLimit);
            else factor = 1;
            return maxScore * factor;
        }
        function calcScore(value) {
            document.getElementById("result").textContent = getScore(value);
        }
    </script>

Ist dieses Thema nicht das gleiche wie hier????

https://www.html.de/threads/grundsaetzliche-frage.58440/

Zitat

Kennt ihr außer Flexbox und Float noch andere möglichkeiten, mit denen man die 3 Absätze von oben nebeneinander stellen kann? Mit dem Code von oben sind die ja untereinander

Dass sie untereinander angeordnet werden liegt daran, dass es p-Elemente sind, diese belegen standardmäßig eine neue Zeile. Inline-Elemente wie img oder span werden dagegen standardmäßig nebeneinander angeordnet. Du kannst es testen, indem Du entweder den Tagnamen in span änderst oder den Elementen ein display:inline oder display:inline-block gibst. Womit wir bei einer dritten Möglichkeit wären, Elemente nebeneinander anzuordnen.

Ich empfehle, der Option mit flex Priorität zu geben, weil man dann viele Möglichkeiten hat, die Elemente anzuordnen und festzulegen, wie sie den Platz füllen.