Immer wieder gern.
Dann viel Erfolg beim Staatsexamen. Das hört sich nach Jura an?
Jetzt das HTML-Seminar als
Video-Tutorial
mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign
Immer wieder gern.
Dann viel Erfolg beim Staatsexamen. Das hört sich nach Jura an?
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:
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:
Das dürfte kein Problem sein, wenn Du die Container verschachtelst: Im äußeren Container flex-direction: column; Jedes der Flex-Items darin ist wiederum ein Flex-Container mit flex-direction: row; und enthält die Elemente des betr. Jahres. Wobei flex-direction: row; Default ist und auch weg gelassen werden kann.
Wie das ohne Dateiendung funktioniert wird hier erklärt:
https://stackoverflow.com/ques…-without-extension-in-img
Wenn ich dein Vorhaben jedoch richtig verstehe, willst Du eigene Bilder anzeigen und dann kannst Du sie ganz normal mit Dateiendung speichern. Das CSS für das Akkordeon ist auf das Format von unsplash.com nicht angewiesen.
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:
(filter nur testweise, damit ich die Bilder auseinander halten kann).
Und das CSS dafür:
Dann die weiteren Berechnungen auf den inneren Container beziehen:
Da werden wir wohl an zwei zusätzlichen Spans nicht vorbei kommen:
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:
(Das language="javascript" brauchst Du heute nicht mehr).
ZitatIch 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:
Ändere es in dieses um und die Animation wird funktionieren:
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:
ZitatAm 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 scheint mir sehr simpel zu sein: Einfach flex-direction auf column ändern und Bingo:
Das konntest Du auch nicht wissen, weil es im jsfiddle ein wenig versteckt ist: Das Skript benutzt d3.js und das musst Du einbinden:
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:
Ich habe es jetzt so gelöst, dass ich die Startposition angebe und auf die Scrollposition addiere:
https://jsfiddle.net/Sempervivum/qwLyrtcz/1/
Ich hoffe, das ist, was Du brauchst.
Zitatder 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?
Fertig:
https://jsfiddle.net/Sempervivum/d4j7ckat/1/
Es ist eine kleine Inflation an Fallunterscheidungen geworden aber weiter konnte ich es nicht vereinfachen. Was noch zu tun wäre: Auch die Abmessungen der Rechtecke für die Geraden als Konstanten definieren, damit es leichter ist, sie zu ändern.
Ich vermute, jetzt brauchst Du noch ein Rechteck für den Zaun?