Beiträge von Sempervivum

    Mir scheint, es liegt am HTML und CSS. Nimm das div.frame aus dem div.stadion heraus und platziere es dahinter, so dass im div.stadion nur das div#bande liegt. Und dann ändere das CSS so:

    Code
    1. div.stadion {
    2. overflow-x: scroll;
    3. }
    4. #bande {
    5. /* width: 100%; */
    6. display: inline-flex;
    7. /* overflow-x: scroll; */
    8. }

    Dies habe ich nur mit dem HTML-Inspektor getestet, wenn es nicht funktioniert, werde ich mir eine neue Testseite mit deinen Namen bauen.

    Mit HTML nicht aber mit Javascript und auch relativ einfach. In welchem Format bekommst Du denn die Uhrzeit? Ich gehe mal davon aus in Stunden, Minuten und Sekunden. Dann gibt es für das Date-Objekt Setter-Funktionen für UTC, z. B. setUTCMinutes.

    https://developer.mozilla.org/…rence/Global_Objects/Date

    Nachdem Du Datum und Uhrzeit damit gesetzt hast, kannst Du dann die lokale Zeit in Stringdarstellung ermitteln.

    Getestet hiermit:

    Code
    1. const now = new Date();
    2. now.setUTCFullYear(2021);
    3. now.setUTCMonth(3);
    4. now.setUTCDate(9);
    5. now.setUTCHours(13);
    6. now.setUTCMinutes(0);
    7. now.setUTCSeconds(0);
    8. console.log(now.toLocaleString('de-DE'));

    Allzu schwer ist das auch nicht zu lösen, wir legen einfach die beiden Bilder in einen weiteren Container und beziehen die weiteren Operationen auf diesen:

    Code
    1. <div id="pano-outer">
    2. <div id="pano-inner">
    3. <!-- Hier zunaechst keine src-Attribute angeben -->
    4. <img id="pano-img">
    5. <img id="pano-img-2" style="filter: grayscale(1);">
    6. </div>
    7. </div>

    (filter nur testweise, damit ich die Bilder auseinander halten kann).


    Und das CSS dafür:

    Code
    1. #pano-inner {
    2. /* Der Container muss seine Groesse abhaengig vom Inhalt einstellen,
    3. daher verwenden wir inline-flex */
    4. display: inline-flex;
    5. }

    Dann die weiteren Berechnungen auf den inneren Container beziehen:

    Da werden wir wohl an zwei zusätzlichen Spans nicht vorbei kommen:

    Code
    1. <div class="grid-item">
    2. <span><span style="font-size:40px" id="Voltage1">12</span>&nbsp;V</span>
    3. <span><span style="font-size:40px" id="Voltage2">24</span>&nbsp;V</span>
    4. </div>

    Und dann beim .grid-item flex-direction: column; setzen.

    Das ist eine Anforderung, die es häufig gibt und auch kein Problem: Über eine Klasse merken wir uns den Zustand des Relais und setzen abhängig davon den Text und die URL:

    Du machst da etwas doppelt: Inline registrierst Du die Funktion relais123_clicked für Click, darin wieder einen Eventlistener für document-ready und dann wiederum über die ID "btnSendAUS2" für Click. Gib der Zelle diese ID, dann kannst Du das jQuery so beibehalten:

    Code
    1. <div id="btnSendAUS2" class="grid-item_relais">on</div>

    (Das language="javascript" brauchst Du heute nicht mehr).

    Zitat

    Ich verspreche Dir, dass ich mich in naher Zeit endlich einmal mit scss befasse und lerne das Zeug zu compilieren obwohl ich da nicht ganz begreife, was das bringen soll

    .... außer, dass es wahrscheinlich schwieriger ist einen compilierten Code abzuändern

    Es gibt sicher lohnendere Lernobjekte als SCSS. Der Nutzen besteht weniger darin, den Code gegen Manipulationen zu schützen sondern es soll Features zur Verfügung stellen, die CSS nicht bietet, z. B. Schleifen. Ich habe da vor längerer Zeit mal hinein gerochen und fest gestellt, dass diese Features dann doch wieder eingeschränkt sind, so dass ich zu dem Schluss gekommen bin, dass der Nutzen begrenzt ist und bin dann nicht tiefer eingestiegen.

    Leider habe habe ich kein iPad und konnte es deshalb weder untersuchen noch beheben. Unabhängig davon bin ich jedoch der Meinung, dass Du bei diesem Layout mit einem Grid besser bedient bist. Ich habe hier mal die grobe Struktur aufgebaut:

    Prüfe, ob das auf dem iPad richtig angezeigt wird und wenn ja, kannst Du es ja weiter verfeinern mit den Hintergrundfarben, Schriftarten etc.

    Mit SCSS bist Du schon auf der richtigen Spur aber es nützt nichts, die Endung einfach zu ändern, weil dieses CSS vorkompiliert werden muss. Betroffen ist nur dieses:

    Code
    1. &:hover{
    2. flex: 7;
    3. }

    Ändere es in dieses um und die Animation wird funktionieren:

    Code
    1. .item:hover {
    2. flex: 7;
    3. }

    Und für die Zukunft, falls Du wieder mal etwas mit SCSS findest: Du kannst dir bei Codepen die kompilierte Version anzeigen lassen, indem Du oben rechts über dem CSS-Fenster auf den Pfeil klickst und "View Compiled CSS" auswählst.


    Und ebenfalls für die Zukunft: Code besser formatiert posten, das Symbol </> rechts oben beim Verfassen eines Beitrages.

    Besser nicht editieren, weil man dann keine Nachricht bekommt, dass es etwas Neues gibt.


    Der Grund für den Fehler ist, dass das load-Event für das Bild schon feuert, bevor wir den Eventlistener dafür registriert haben. Dies kann passieren, wenn das Bild schon im Cache ist, denn dann geht das Laden sehr schnell.


    Lösung indem man das src-Attribut erst setzt, nachdem der Listener registriert wurde:

    Zitat

    Am liebsten sogar so, dass man die Dateinamen gar nicht erst in ein HTML reinschreiben muss, sondern, dass die Namen dann vom Srver aus eingelesen werden.

    Das geht recht einfach mit der PHP-Funktion glob:

    Das konntest Du auch nicht wissen, weil es im jsfiddle ein wenig versteckt ist: Das Skript benutzt d3.js und das musst Du einbinden:

    Code
    1. <script src="https://d3js.org/d3.v6.min.js">

    Oben in dem head-Abschnitt.

    Und das Einbinden des Skriptes script.js nach dem HTML, vor dem schließenden </body>.

    (Die Wortwahl mit "pano" passt für deine Anwendung wahrscheinlich nicht mehr so, aber erst Mal sehen, dass es so funktioniert).


    Und dann musst Du das HTML genau so lassen, weil das Skript auf die Elemente mit der ID zugreift:

    Code
    1. <!-- <div class="zaun">
    2. <img src="zaun_cplatz_300px.jpg" alt="TV 1861 Amberg">
    3. </div> -->
    4. <div id="pano-outer">
    5. <img id="pano-img" src="zaun_cplatz_300px.jpg">
    6. </div>
    7. <svg width="600" height="300"></svg>
    Zitat

    der Positionsanzeiger ist (unabhängig vom Wert) extrem lang. Wie kann ich diesen variieren?

    Die Länge des Anzeigers ist nicht durch einen festen Wert definiert sondern stellt sich proportional nach dem Seitenverhältnis des Bildes ein. D. h. seine Länge ist im Verhältnis zum Umfang des Ovals genau so groß wie der Schieber der Scrollbar im Verhältnis zu ihrer gesamten Breite, so dass genau der sichtbare Bereich des Bildes angezeigt wird. Mein Bild ist noch nicht besonders lang gestreckt, deshalb ist der Anzeiger relativ lang. Verwende ich ein Platzhalter-Bild mit der Größe, die Du früher angegeben hast, 30000x120, sieht es gleich ganz anders aus:

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


    Die Startposition lässt sich relativ leicht ändern, indem man die Positionen pos1, pos2, pos3, pos4 anpasst. Ich werde auch dafür eine Demo machen. Wo möchtest Du die Startposition denn haben?