Beiträge von Sempervivum

Dann lass uns doch mal dieser Vermutung nachgehen:

Zitat

Nur die Vermutung dass das Ersetzen der Platzhalter irgend wie asynchron erfolgt und noch nicht erledigt ist, wenn die Funktion aufgerufen wird.

Das müsste sich überprüfen lassen, indem man den betr. Parameter in der Console ausgibt:

function onofflight(Status,Name)

{
console.log(Status);



for(var i=0; i<3; i++)

{

if (Status[i] =='0')

{

document.getElementByClassName(Name[i]).setAttribute("fill", "white");

....

}

Ich versuche gerade, die Bilder zu verstehen:

Posting #11: Mit "trocken" meinst Du, dass der Code einfach im Browser läuft ohne die SPS-Umgebung? Dann müsste links auf den Webserver (mit eingesetzten Variablen) und rechts trocken sein?

Posting #12 verstehe ich aber das Array sieht auf beiden Screenshots gleich aus und ich habe keine Erklärung, dass es auf der SPS nicht funktioniert. Nur die Vermutung dass das Ersetzen der Platzhalter irgend wie asynchron erfolgt und noch nicht erledigt ist, wenn die Funktion aufgerufen wird. Funktionieren die Skripts denn, wenn Du kein Array verwendest sondern eine einfache Variable?

Posting #13 verstehe ich, man sieht, dass das Einfärben nicht funktioniert hat.

Unterstützt der Webserver des SPS denn die gängigen Debug-Möglichkeiten, insbesondere mit Ausgaben in der Console?

Zitat

Das mit dem Bild siehst du erst, wenn du das Browserfenster schmäler machst. Auf normaler Größe ist alles ok.

Hast Du das Problem inzwischen gelöst? Ich kann nämlich kein Herausragen mehr entdecken wenn ich das Browserfenster schmaler mache, Auch nicht in der Handy-Simulation im HTML-Inspektor.

Edit: Verstehe jetzt, Du hast das Problem gelöst, indem Du die Breite kleiner als 100% gesetzt.

Anscheinend bist Du nicht der einzige, der dieses Problem hat:

https://stackoverflow.com/questions/3276…-items/32765152

Ich teilte bisher die Erwartung des TO dort, der schreibt:

Zitat

I was under the impression that a margin can be added to flex items/children, and flexbox should automatically take that into account and calculate the correct spacing between the items.

Aber offensichtlich trifft das nur auf padding und border zu, nicht auf margin.

Dort werden zwei Lösungen angeboten:

1. Padding statt margin und verschachtelte Container verwenden oder
2. die Breite mit calc berechnen, dann kann man das margin genau einkalkulieren. Einfach den Prozentwert verkleinern passt nicht präzise, man erkennt, dass auf deiner Seite mit 94.5% die Abstände links und rechts nicht ganz gleich sind.

Wenn Du document.getElementByClassName verwendest, musst Du beachten, dass dieses eine Nodelist, in etwa ein Array mit mehreren Elementen, zurück liefert. Um alle Elemente darin zu erfassen, müsstest Du darüber wiederum ein Schleife bauen. Gemischt Klassen und IDs zu verwenden würde ich nicht empfehlen.

Nein, mit einer for-Schleife wird das nichts weil die sofort von Anfang bis Ende durchläuft. Aber Du willst ja eine Verzögerung haben zwischen dem Wechsel des Inhaltes. Informiere dich über setInterval, damit geht das, was Du vor hast:

https://wiki.selfhtml.org/wiki/JavaScript/Window/setInterval

Der Fehler liegt hier:

onofflight("[0,1,0]","[Test1,Test2,Test3]");

Du übergibst jeweils einen String statt eines Arrays von Strings. So wäre es richtig:

onofflight(['0','1','0'],['Test1','Test2','Test3']);

Im Sessionstorage kannst Du nur Strings speichern, keine Objekte etc. Wenn Du deine Variable myTab speicherst wird Javascript implizit eine Konvertierung in einen String vornehmen. Liest Du diesen dann wieder aus, bekommst Du nicht das ursprüngliche Objekt mit seinen Methoden etc., daher gibt es darin auch keine Methode focus().

Zitat

Also, ich habe die Daten jetzt als Json, wie kann ich jetzt einzelne davon aufrufen?

Ich nehme an, das ist so zu verstehen, dass Du ein PHP-Skript hast, das die Daten im JSON-Format ausgibt? Dann wäre der nächste Schritt, die Daten für die zyklische Anzeige mit Javascript vom Server zu holen. Eine Möglichkeit, das zu tun, wäre, Ajax zu verwenden, siehe z. B. hier mit der fetch-API:

https://wiki.selfhtml.org/wiki/JavaScript/Window/fetch

Da Du aber schriebst, dass Du die Daten gleich vollständig bereit stellen kannst, kannst Du sie auch gleich auf der Seite ermitteln und an Javascript übergeben:

<?php
    // Die Daten ermitteln, sie stehen dann in einem, wahrscheinlich mehrdimensionalen Array zur Verfügung
?>
<script>
    const data = <?php echo json_encode($dein_array); ?>;
    // jetzt stehen die Daten in der Variablen data zur Verfügung
</script>

Das ist zunächst mal recht einfach, mit diesem CSS kannst Du den Timer rechts oben anheften:

        #timer_lek_beginn {
            display: inline-Block;
            position: fixed;
            right: 0;
            top: 0;
            padding: 1em;
            border: 2px solid lightblue;
        }

Es gibt da jedoch ein kleines Problem: Der Timer wird dann den Inhalt auf deiner Seite überdecken. Möglicher Weise ist das akzeptabel, weil dieses Fensterchen ja wahrscheinlich recht klein sein wird.

Ein anderer heißer Kandidat für die Problemursache ist die Groß- und Kleinschreibung: Sofern Du einen Windows-Rechner hast, ist diese egal, wenn Du die Datei lokal öffnest. Der Server unterscheidet jedoch nach Groß- und Kleinschreibung bei Dateinamen, d. h. wenn deine Bilddatei z. B. "dasbild.JPG" heißt und im HTML steht <img src="dasbild.jpg"> wird die Datei auf dem Server nicht gefunden und der Browser zeigt das Bild nicht an.

Zitat

Aber der Inhalt sprengt in der ersten section den Rahmen. Daher müsste man wohl schon min-height draus machen.

Offenbar wünschst Du dir, dass jede Section genau den freien Raum unterhalb des Headers einnimmt und hast deshalb die Höhe fest definiert. Wenn der Inhalt dann den Rahmen sprengt, ist dieser Wunsch nicht mehr zu erfüllen und die Lösung mit min-height löst das Problem. Es sei denn, sofern der Inhalt das zulässt, Du teilst es auf zwei Sections auf.

Zitat

Aber wie löse ich dann das Problem mit der Positionierung innerhalb der section bei "Über mich"?

Da ist mir jetzt nicht klar, was Du damit meinst?

Du schriebst ja:

Zitat

Wenn ich z. B. auf Seite A.com gehe, wird Logo A angezeigt (über die CSS-Datei bestimmt) und wenn ich auf B.com gehe, wird Logo B angezeigt.

Daraus habe ich geschlossen, dass es für jede Seite eine getrennte HTML-Datei gibt und dann kannst Du ja in jeder Seite ein img-Tag mit der individuellen URL eintragen. Oder handelt es sich um einen Onepager, wo es nur eine HTML-Datei gibt und die Inhalte dynamisch eingeladen werden?

Dieses Javascript fügt dem aktuellen Link die Klasse "active" hinzu:

    <script>
        const url = document.location.href;
        document.querySelectorAll('#navigation li a').forEach(item => {
            if (url.includes(item.href)) {
                item.classList.add('active');
            }
        });
    </script>

Dann kannst Du ihn mit CSS hervor heben, z. B. so:

    <style>
        #navigation li a.active {
            background-color: lightblue;
        }
    </style>

BTW: Für die Navigation kannst Du mit Vorteil auch das nav-Tag verwenden.

@Schwebbs Ich verstehe nicht, warum Du das so kompliziert mit CSS machen willst. Wenn es sich um ein Logo handelt, könntest Du es doch einfach mit einem img-Tag anzeigen lassen?

Ich finde das macht sehr viel Sinn, wenn die Unterseiten, wie Du schreibst, komplex sind und viele Daten benötigen.

Praktiziere es selber so.

In den Verzeichnissen für die Unterseiten wiederum Verzeichnisse img etc., sofern diese spezifisch für die Unterseiten sind.

Zitat

nun stehen sie in meiner nun einzigen php-datei 2x drin, eben oben und unten, beide als segment mit einer id versehen und eben mittels mediaquery, in abhängigkeit der größe die eine auf "hidden" gesetzt

Mit Flex und der Eigenschaft order kannst Du die Reihenfolge der Elemente ändern unabhängig davon wie sie notiert sind und den Button z. B. ganz an das Ende stellen.

Nächster Versuch, ungetestet: Versuche es explizit mit dem Event touchstart:

<i class="fa fa-shopping-basket fa-2x" ontouchstart="doLink(event)" onclick="doLink(event)"></i>

Ohne das genauer untersucht zu haben: Möglicher Weise kommt sich da deine toggle-Funktion mit der Default-Aktion des Touch ins Gehege. Versuche, diese zu deaktivieren:

<div id="anfrage">
        <i class="fa fa-shopping-basket fa-2x" onclick="doLink(event)"></i>
        <a href="anfrage.html" target="Anfrage">
            <p>Sende eine Anfrage, wir beraten dich gerne pers&ouml;nlich!</p>
        </a>
</div>
<script>
function doLink(event) {
    event.preventDefault();
    document.getElementById("anfrage").classList.toggle("move");
    }
</script>

Zitat

Oder ist das bei dieser Anleitung nur Zufall?

Ja, das ist Zufall und kommt dadurch zu Stande, dass die Texte in den beiden letzten Containern die selbe Höhe beanspruchen wie die längsten in den ersten drei. Verkürze ich die Texte mit dem HTML-Inspektor, schrumpfen die Container auch.

Zitat

Im zweiten Block habe ich bei displaygar nichts gemacht und a innerhalb von p platziert. margin-top greift hier allerdings nicht und ich weiß nicht warum.

Die Erklärung findest Du z. B. bei Selfhtml:

Zitat von Selfhtml

• Bei Inline-Elementen sind margin-top und margin-bottom wirkungslos.

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Abstand/margin

Wenn Du das display auf inline-block oder block änderst, funktioniert es mit dem Margin.

Bei dem ersten Block funktioniert es ja einwandfrei, ich nehme an, so soll es aussehen?

Dieses Layout kannst Du auch sehr einfach mit Flex erzielen:

Die Elemente untereinander anordnen mit display: flex; und flex-direction: column; . Dann werden sie untereinander dargestellt und füllen die Breite aus. Den Link kannst Du dann gezielt mit align-self; rechts anordnen.

Und das Layout mit den drei Boxen, wo automatisch ein Umbruch erzeugt wird, kannst Du auch sehr einfach mit Gridlayout erzeugen, sieh dir diese Demo an:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Image Stack</title>

    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

        .cell {
            border: 2px solid lightblue;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</body>

</html>