Beiträge von Sempervivum

Sempervivum · Freitag, 18:01

Immer wieder gern.

Dann viel Erfolg beim Staatsexamen. Das hört sich nach Jura an?

Sempervivum · Freitag, 16:43

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

div.stadion {
overflow-x: scroll;
}
#bande {
/* width: 100%; */
display: inline-flex;
/* overflow-x: scroll; */
}

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

Sempervivum · Freitag, 13:18

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

const now = new Date();
now.setUTCFullYear(2021);
now.setUTCMonth(3);
now.setUTCDate(9);
now.setUTCHours(13);
now.setUTCMinutes(0);
now.setUTCSeconds(0);
console.log(now.toLocaleString('de-DE'));

Sempervivum · Freitag, 12:41

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.

Sempervivum · Donnerstag, 19:21

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.

Sempervivum · Donnerstag, 15:02

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

<div id="pano-outer">
<div id="pano-inner">
<img id="pano-img">
<img id="pano-img-2" style="filter: grayscale(1);">
</div>
</div>

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

Und das CSS dafür:

Code

#pano-inner {
/* Der Container muss seine Groesse abhaengig vom Inhalt einstellen,
daher verwenden wir inline-flex */
display: inline-flex;
}

Dann die weiteren Berechnungen auf den inneren Container beziehen:

Code

const panoOuter = document.querySelector('#pano-outer'),
panoInner = document.querySelector('#pano-inner'),
panoImg = document.querySelector('#pano-img'),
panoImg2 = document.querySelector('#pano-img-2');
// Um sicher zu stellen, dass beide Bilder geladen sind,
// verwenden wir jetzt das load-Event für "window":
window.addEventListener('load', event => {
// Die Breite des "Bildes" ergibt sich jetzt aus der des
// inneren Containers:
const wPanoImg = panoInner.getBoundingClientRect().width,
// Die Positionen fest legen, bei denen im Bild
// die Uebergaenge zwischen Kurven und Geraden liegen:
pos1 = 0,
pos2 = wPanoImg / 4,
pos3 = wPanoImg / 4 * 2,
pos4 = wPanoImg / 4 * 3,
startPos = pos4,
// Die Breite des sichtbaren Bereichs im Container des Bildes:
wWin = panoOuter.getBoundingClientRect().width,
maxScrollPos = wPanoImg - wWin;
let scrollPos = 0;
// Zeichnet einen Kreisbogen-Indikator:
function drawArcIndi(start, end, translate) {
// usw. wie bisher
// Eventhandler fuer das Scrollevent beim Container registrieren:
panoOuter.addEventListener('scroll', event => {
scrollPos = panoOuter.scrollLeft + startPos;
// Frueher gezeichnete Indikatoren loeschen:
svg.selectAll(".indi").remove();
// Neuzeichnen der Indikatoren veranlassen:
update();
});
}); // Ende Eventlistener fuer window
// Jetzt muessen wir natuerlich beide Bilder laden:
panoImg.src = "_HP-Subdomain/images/2016-06-05_Wolfenbüttel_Bankplatz_Panorama_3708x640.jpg";
panoImg2.src = "_HP-Subdomain/images/2016-06-05_Wolfenbüttel_Bankplatz_Panorama_3708x640.jpg";
</script>
</body>

Alles anzeigen

Sempervivum · Donnerstag, 14:28

Nein, mit dem return klappt das in diesem Zusammenhang nicht. Du kannst jedoch das Ergebnis des confirm abfragen:

Code

$('#btnSendEIN1').click(function(){
if (confirm('Would you like switch on?')) {
// usw.:
$.ajax({

Sempervivum · Donnerstag, 14:17

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

Code

<div class="grid-item">
<span><span style="font-size:40px" id="Voltage1">12</span> V</span>
<span><span style="font-size:40px" id="Voltage2">24</span> V</span>
</div>

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

Sempervivum · Donnerstag, 14:07

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:

Code

<div class="grid-item" id="btnSendEINAUS1">Off</div>
</div>
<script>
$('#btnSendEINAUS1').click(function () {
let url;
// Abhaengig davon ob die Klasse "is-on" vorhanden ist,
// setzen wir den Text und die URL fuer das Umschalten:
if ($(this).hasClass('is-on')) {
url = '/relais1AUS';
$(this).text('Off');
} else {
url = '/relais1EIN'
$(this).text('On');
}
// Zustand der Klasse wechseln:
$(this).toggleClass('is-on')
$.ajax({
type: 'POST',
url: url,
success: function (data) {
alert(data);
}
});
});
</script>
</body>

Alles anzeigen

Sempervivum · Donnerstag, 12:18

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

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

Code

<script>
$(document).ready(function(){
$('#btnSendEIN1').click(function(){
$.ajax({
type: 'POST',
url: '/relais1EIN',
success: function(data){
alert(data);
}
});
});
});
</script>

Alles anzeigen

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

Sempervivum · 7. April 2021

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.

Sempervivum · 7. April 2021

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:

HTML

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MerryFisher | BoatPanel</title>
<style type="text/css">
html,
body {
height: 100%;
}
body {
margin: 0;
background-color: black;
display: flex;
}
#grid-container {
flex: 1;
display: grid;
/* Aufteilung der Breite der Spalten: */
grid-template-columns: 1fr 1fr 2fr 2fr;
/* Aufteilung der Höhe der Zeilen,
6 Zeilen, alle gleich hoch: */
grid-template-rows: repeat(6, 1fr);
/* Abstand zwischen den Zellen: */
gap: 0.25em;
/* Abstand außen: */
margin: 0.25em;
}
/* Die beiden Items, die zwei Zeilen ueberspannen sollen: */
.grid-item.span1 {
grid-column: 3 / 4;
grid-row: 1 / 3;
}
.grid-item.span2 {
grid-column: 4 / 5;
grid-row: 1 / 3;
}
.grid-item {
/* Inhalt der Griditems zentrieren: */
display: flex;
align-items: center;
justify-content: center;
background-color: darkgray;
color: white;
}
</style>
</head>
<body>
<div id="grid-container">
<div class="grid-item">Battery 1</div>
<div class="grid-item">12 V</div>
<div class="grid-item">Battery 2</div>
<div class="grid-item">24 V</div>
<div class="grid-item span1">0 km/h</div>
<div class="grid-item span2">0</div>
<div class="grid-item">Temp 1</div>
<div class="grid-item">20,7 C</div>
<div class="grid-item">0</div>
<div class="grid-item">Shutdown</div>
<div class="grid-item">Temp 2</div>
<div class="grid-item">20,5 C</div>
<div class="grid-item">0</div>
<div class="grid-item">Reboot</div>
<div class="grid-item">Temp 3</div>
<div class="grid-item">20,2 C</div>
<div class="grid-item">0</div>
<div class="grid-item">On/Off</div>
<div class="grid-item">Temp 4</div>
<div class="grid-item">20,2 C</div>
<div class="grid-item">0</div>
<div class="grid-item">On/Off</div>
</div>
</body>
</html>

Alles anzeigen

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

Sempervivum · 6. April 2021

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

&:hover{
flex: 7;
}

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

Code

.item:hover {
flex: 7;
}

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.

Sempervivum · 6. April 2021

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:

Code

<div id="pano-outer">
<img id="pano-img">
</div>
<svg width="600" height="300">
</svg>
<script>
const innerRadius = 80,
outerRadius = 85,
svg = d3.select("svg");
// der weitere Code wie bisher
//Zeichnen der Indikatoren veranlassen:
scrollPos = startPos;
update();
// Eventhandler fuer das Scrollevent beim Container registrieren:
panoOuter.addEventListener('scroll', event => {
scrollPos = panoOuter.scrollLeft + startPos;
// Frueher gezeichnete Indikatoren loeschen:
svg.selectAll(".indi").remove();
// Neuzeichnen der Indikatoren veranlassen:
update();
});
}); // Ende Eventlistener für das load-Event des Bildes
// Jetzt setzen wir das src-Attribut:
panoImg.src = "http://temp.9rp.de/forum/zaun.jpg";
</script>

Alles anzeigen

Sempervivum · 6. April 2021

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:

PHP

<?php
$images = glob('images-gallery/*.jpg');
$css = '';
$html = '';
for ($i = 0; $i < count($images); $i++) {
$css .= '.item-' . ($i + 1) . ' {
background-image: url(' . $images[$i] . ');
}';
$html .= '<div class="item item-' . ($i + 1) . '"></div>';
}
?>
Dann im head-Bereich das CSS einfuegen
<style>
<?php echo $css; ?>
</style>
und im body das HTML genau so.

Alles anzeigen

Sempervivum · 6. April 2021

Das scheint mir sehr simpel zu sein: Einfach flex-direction auf column ändern und Bingo:

https://codepen.io/Sempervivum/pen/JjEyGGW

Sempervivum · 5. April 2021

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

<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

<!-- <div class="zaun">
<img src="zaun_cplatz_300px.jpg" alt="TV 1861 Amberg">
</div> -->
<div id="pano-outer">
<img id="pano-img" src="zaun_cplatz_300px.jpg">
</div>
<svg width="600" height="300"></svg>

Sempervivum · 5. April 2021

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.

Sempervivum · 5. April 2021

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?

Sempervivum · 5. April 2021

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?

Beiträge von Sempervivum

div/img mit Regler auf Bild scrollen

div/img mit Regler auf Bild scrollen

Zeitoffset mit HTML

Ich suche ein Responsives vertikales Akkordeon für Bilder

Ich suche ein Responsives vertikales Akkordeon für Bilder

div/img mit Regler auf Bild scrollen

Click in Zelle führt Funktion aus

Zeilenumbruch in einem Grid

Click in Zelle führt Funktion aus

Click in Zelle führt Funktion aus

Ich suche ein Responsives vertikales Akkordeon für Bilder

HTML-Tabelle | Formatierung / Anpassung der Spaltenbreiten/Zeilenhöhen

Ich suche ein Responsives vertikales Akkordeon für Bilder

div/img mit Regler auf Bild scrollen

Ich suche ein Responsives vertikales Akkordeon für Bilder

Ich suche ein Responsives vertikales Akkordeon für Bilder

div/img mit Regler auf Bild scrollen

div/img mit Regler auf Bild scrollen

div/img mit Regler auf Bild scrollen

div/img mit Regler auf Bild scrollen