Beiträge von Sempervivum

Auch kein Problem, man muss dann nur die Hintergrundfarbe ändern:

    <style>
        #machinedata {
            border-collapse: collapse;
        }
    </style>
    <script>
        function hightlighttime() {
            var therows = machinedata.rows;
            for (var i = 1; i < therows.length; i++) {
                var cell = therows[i].cells[1];
                cell.innerHTML = cell.innerHTML - 1; // nur zum Test
                if (cell.innerHTML < 5) {
                    //cell.classList.add("low");
                    therows[i].style.color = "white";
                    therows[i].style.backgroundColor = "red"
                } else {
                    therows[i].style.color = "black";
                    therows[i].style.backgroundColor = "white";
                }
            }
        }
        setInterval(hightlighttime, 1000);

An dieser Stelle offenbaren sich die Vorteile des Verfahrens mit einer Klasse, das ich zuerst gepostet hatte, denn dann muss man nur das CSS ändern.

Zitat

Vergleicht der Befehl cell.innerHTML die zweite Spalte oder wie ?

Genau das tut er:

var cell = therows[i].cells[1];

cells[1] ist die zweite Zelle in der Zeile. cells[0] die erste, cells[1] die zweite, cells[2] wäre die dritte.

Zitat

Und ich möchte dann das die ganze Zeile rot eingefärbt wird.

Auch das ist kein Problem:

<script>
        function hightlighttime() {
            var therows = machinedata.rows;
            for (var i = 1; i < therows.length; i++) {
                var cell = therows[i].cells[1];
                cell.innerHTML = cell.innerHTML - 1; // nur zum Test
                if (cell.innerHTML < 5) {
                    //cell.classList.add("low");
                    therows[i].style.color = "red"
                } else {
                    therows[i].style.color = "black";
                }
            }
        }
        setInterval(hightlighttime, 1000);
    </script>

Zitat

Bei mir ist der Unterschied, das ich in meiner HTML Datei den Tabellenkopf definiere und in der Javascript Datei wird die Tabelle mit Inhalt gefüllt.

Ich weis deshalb nicht wie ich dann die Farbe änder.

Auch das ist kein Problem: Das Skript basiert auf dem DOM und nicht auf dem HTML-Text. DOM-Elemente bzw. Tabellenzeilen und -zellen, die Du mit Javascript hinzu fügst, werden genau so berücksichtigt.

Leider habe ich keine einfache Lösung mit CSS gefunden, um das Menü wieder zu schließen. Dieses kleine Javascript tut es jedoch:

    <script>
        $(".nav-container a").on("click", function () {
            $("nav input#nav").trigger("click");
        });
    </script>

Da es jQuery benutzt, musst Du es hinter den Einziehen von jQuery platzieren, am besten vor dem schließenden </body>.

Eine Alternative wäre, das Menü nicht mit absoluter Positionierung, floating etc. aus dem Fluss herauszunehmen. Dann würde es nach oben verschwinden, wenn der Browser zu dem betr. Anker springt.

Um das Skript zu verstehen, musst Du dir auch das CSS ansehehen.

Dieses Javascript:

      if (cell.innerHTML < 5) {
          cell.classList.add("low");
      }

fügt die Klasse "low" zu der Tabellenzelle hinzu, wenn der Inhalt kleiner als 5 ist.

Und dieses CSS:

        #machinedata td.low {
            color: red;
        }

ändert die Schriftfarbe auf rot, wenn die Klasse "low" bei der Tabellenzelle vorhanden ist.

Ohne CSS würde es so aussehen:

<script>
        function hightlighttime() {
            var therows = machinedata.rows;
            for (var i = 1; i < therows.length; i++) {
                var cell = therows[i].cells[1];
                cell.innerHTML = cell.innerHTML - 1; // nur zum Test
                if (cell.innerHTML < 5) {
                    //cell.classList.add("low");
                    cell.style.color = "red"
                } else {
                    cell.style.color = "black";
                }
            }
        }
        setInterval(hightlighttime, 1000);
    </script>

Zitat

Da zählst du ja selber runter und lässt die Farbe dann aufleuchten aber ich lasse die Tabelle erzeugen mit den Daten der Datenbank

Ja natürlich, ich habe ja dran geschrieben, dass das "selber runterzählen" nur zum Test ist. Meine Absicht war, dir die Lösung für die Ausleuchtung zu zeigen.

Zitat

kann ich nicht auch ne Schleife davor schalten und sagen if Zeit[m]<5{Schrift.schwarz }

else (Schrift.rot) oder sowas

Genau das macht doch mein Skript. Ich habe nur den Umweg über eine Klasse gewählt, weil es dann flexibler ist. Du kannst auch den Rahmen oder den Hintergrund einfärben, nur durch Änderung des CSS.

Zitat

Ich habe ein iPhone, da kann man gar nichts von dem eigentlichen Bild erkennen.

Das ist ein wichtige Information. Dann kann ich leider nicht helfen, weil ich kein Apple-Gerät habe. Nur mutmaßen: Möglicherweise streikt der Browser bei diesem Element, wenn eine CSS-Eigenschaft unbekannt ist? Ich empfehle, zunächst alle erweiterten CSS-Eigenschaften für das HG-Bild wegzulassen und zu prüfen, ob es dann angezeigt wird.

Es gibt dazu auch mehrere Diskussionen bei Stackoverflow:

https://www.google.de/search?client=…=UTF-8&oe=UTF-8

Zitat

Ich frage mich warum das Parallax nicht funktioniert, auf anderen Webseiten klappt es doch auch

Das könnte daran liegen, dass man häufig unter Parallax etwas anderes versteht als einen fixierten Hintergrund, nämlich dass sich der Hintergrund ebenfalls verschiebt, nur langsamer als der Inhalt. Siehe z. B. hier:

http://pixelcog.github.io/parallax.js/

Das ist dann meistens mit Javascript realisiert.

Für mich ist die Darstellung auf meinem Handy (jetzt Chrome) bzgl. der Bilder soweit OK und ich dachte, Du hättest das Problem inzwischen schon gelöst. Kannst Du näher beschreiben, was Du mit

Zitat

Allerdings auf dem Smartphone kann man nichts erkennen, als hätte man das Bild zu nah rangezoom

meinst? Da das Parallax nicht funktioniert, ist bei den Bilder natürlich oben/unten etwas ab geschnitten.

Klick mal links auf "External Resources" ...

Zu Nr. 1: Das benutzt Highcharts, die JS-Dateien sind im Fiddle im HTML so eingebunden:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

Ich empfehle aber, nicht so viele Kriegsschauplätze gleichzeitig aufzumachen, sondern dich erst Mal mit den Grundlagen von jQuery vertraut zu machen, z. B. hier:
https://www.html-seminar.de/jquery-tutorial.htm

und dich dann auf ein Projekt zu konzentrieren.

Hier ein Demo, wo Du ablesen kannst, wie die Rotausleuchtung funktionieren kann:

<table id="machinedata">
        <thead>
            <tr>
                <th>Maschine</th>
                <th>Zeit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Maschine 3</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Maschine 2</td>
                <td>17</td>
            </tr>
            <tr>
                <td>Maschine 1</td>
                <td>25</td>
            </tr>
        </tbody>
    </table>
    <style>
        #machinedata td.low {
            color: red;
        }
    </style>
    <script>
        function hightlighttime() {
            var therows = machinedata.rows;
            for (var i = 1; i < therows.length; i++) {
                var cell = therows[i].cells[1];
                cell.innerHTML = cell.innerHTML - 1; // nur zum Test
                if (cell.innerHTML < 5) {
                    cell.classList.add("low");
                }
            }
        }
        setInterval(hightlighttime, 1000);
    </script>

Besser den Code in Codetags posten statt Screenshots.

Im Code ist der Tabellenkörper leer, im Screenshot jedoch nicht. Wie kommen die Daten hinein?

Was das Menü betrifft, brauchst Du, denke ich, das Rad nicht neu zu erfinden. Erster Treffer bei Google:

http://www.olivergast.de/blog/2015/05/2…sive-gestalten/

Zitat

auf dem Smartphone kann man nichts erkennen, als hätte man das Bild zu nah rangezoom

Kann ich nicht reproduzieren (Samsung S4, Android, Opera). Hast Du das Problem schon hiermit gelöst?:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Zitat

auch der Parallax Effekt funktioniert nicht.

Anscheinend ist der Browser-Support für background-attachment:fixed noch mangelhaft:

http://caniuse.com/#search=background-attachment

1. "this" ist nicht verfügbar, bzw. es ist das window-Element, wenn Du den Eventlistener inline notierst. Du musst es als Parameter übergeben:

onclick="schreibId(this);"

2. Wenn Du es so machst, ist this bereits ein DOM-Element und Du brauchst es nicht mehr mit getElementById zu ermitteln.

3. Verabschiede dich von document.write, es ist schwierig zu durchschauen. Definiere statt dessen eine Container und schreibe den Wert hinein.

So funktioniert es:

    <p id="test1" onclick="schreibId(this)"> HierClicken</p>
    <p id="test2" onclick="schreibId(this)"> HierClicken</p>
    <p id="output"></p>
    <script>
        function schreibId(ele) {
            var x = ele.id;
            output.innerHTML = x;
        }
    </script>

Das wäre überhaupt kein Problem. Poste ein Beispiel, wie die Tabelle aussieht, dann kann man dir sagen, wie es geht.

Zitat

kann mir jemand vielleicht eine Seite empfehlen wo ich mir so Grundlagen von null auf aneigne ?

Genau hier, wo dieses Forum ist, bist Du richtig:

https://www.html-seminar.de

Leider habe ich keine Ahnung von data driven documents oder Remote Access zu einer Sqlite-Datenbank. Vielleicht meldet sich da noch jemand anders. Ich werde aber versuchen, selber ein wenig zu recherchieren. Oder vielleicht kann dir auch der Entwickler helfen, der diese Datenbank administriert.

Zitat

Soll ich denn lieber ein neues Thema bezüglich responsive Darstellung aufmachen? Das passt ja nun nicht mehr ganz hier her.

Stimmt natürlich, könnte angebracht sein, ein neues Thema aufzumachen.

Zitat

Was meinst du mit auf der sps läuft ein Webserver?

Die Frage erübrigt sich, weil ich inzwischen gelernt habe, dass die Daten auf einem PC liegen und Du sie von dort holst.

Zitat

Ich geben das Format vor das sieht so aus:

JSON.parse('{ "name": ["Maschine1", "Maschine2", "Maschine3"], "geschwindigkeit": ["10", "5", "4"], "laenge": ["10", "8", "12"]}');

dieses Format wird wird auf dem server mit den aktuellen Daten bereitgestellt und ich greife dann dadrauf zu.

Das sind wichtige Informationen. Funktioniert der Zugriff bzw. das Holen der Daten schon? Und funktioniert das Aufbauen der Tabelle auch schon?
Wenn ja, brauchst Du ja nur noch ein wenig Javascript, um die Zellen abhängig von der Zeit einzufärben.

Ein paar Anmerkungen zum responsiven Verhalten. Ich habe mir etwas angesehen, was mir gleich aufgefallen ist: Bei section.bannerabout verschiebt sich der Text, wenn man das Browserfenster schmaler macht. Das liegt daran, dass die Position des Textes im p-Element mit margin und padding austariert wurde. Das passt nicht mehr, wenn man die Höhe durch eine Mediaquery verkleinert. Ich nehme an, dass Du diesen Text zentriert haben willst, horizontal und vertikal. Das geht sehr viel besser und einfacher mit Flexlayout:

.bannerabout {
    background-image: url(../images/Laptop.jpg);
    height: 400px;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
}

Und bei dem was drin ist, alles an Margin und Padding das der Ausrichtung diente, löschen.

Unter der Überschrift h2.parallax befindet sich ein leeres Element p.parallax_description. Ich nehme an, Du willst dieses noch ausfüllen und es soll unter der Überschrift liegen. Daher habe ich in dem CSS oben flex-direction:column verwendet.

Hast Du die Seite selber aufgebaut oder ein Template verwendet?

Hier hat uns die Vorlage in codepen einen Streich gespielt: Das CSS wirkt generell auf Button-Elemente. Die gibt es auch in der Ansicht von Google-Maps und entspr. taucht dort auch der Text "SENDEN" auf. Korrektur, in dem gezielt der Button mit der ID "button" angesprochen wird:

button#button {
  outline: none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius: 40px;
  background: #fff;
  border: 2px solid #1ECD97;
  color: #1ECD97;
  letter-spacing: 1px;
  text-shadow: 0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease; }
  button#button:hover {
    color: white;
    background: #1ECD97; }
  button#button:active {
    letter-spacing: 2px; }
  button#button:after {
    content: "SENDEN"; }