Beiträge von AndreasB

Was ich damit meine ist, dass du bei jedem Schleifendurchlauf das Ergebnis einem Objekt festhältst.

So in Etwa:

var ergebnisse = {};

  for (i = 0; i < wortliste.length; i++) {
    var wort = wortliste[i]
    ergebnisse[wort] = false;

    for (j = 0; j < splittedEingabe.length; j++) {
        var eingabeTeil = splittedEingabe[j];

      if (eingabeTeil.toLowerCase() == wort) {
        ergebnisse[wort] = true;
        break;
      }
    }
  }

Hinterher hast du dann ein Objekt wi in #4 beschrieben.

Zitat von brina42

1. Eigentlich wollte ich beide Arrays mit .equals() vergleichen.

equals ist keine native JavaScript Methode. Aus welcher Library ist die?
edit: Ich verstehe...

Zitat von brina42

Stattdessen funktioniert es aber mit dem Vergleichsoperator ==. Soll das so?

Du meinst hier:

splittedEingabe[j].toLowerCase() == wortliste[i]

Ja, das soll so sein. (Was wundert dich denn daran?)

Zitat von brina42

2. Das eigentliche Problem ist allerdings, dass das Programm niemals in den if-Teil springt, selbst wenn ich ein exaktes Wort aus der Liste verwende. Es kommt immer die Ausgabe aus dem else-Teil. Als ich die Eingabe noch nicht in substrings gesplitted hatte, ging das mit einem Wort allerdings problemlos.

Hast du die Funktion schonmal gedebuggt? (Für den Anfang schreib mal Konsolenausgaben in jeden If-Zweig).

War das vorher nur eine einfache Schleife?
Das Problem, dass du hast, ist, dass break nur aus der Inneren Schleife springt und dann mit dem nächsten Eintrag der Wortliste weitermacht.

Wenn das letzte Wort in der Wortliste kein Treffer ist, siehst du nur die Ausgabe aus dem else-Zweig, denn die Ausgabe wird jedes Mal überschrieben.

Ich würde dir vorschlagen, statt das Ergebnis direkt in dein HTML zu schreiben, in deiner Schleife ein Ergebnisobjekt zu füllen, das jeden Eintrag deines Wortarrays auf einen boolischen Wert mappt, der anzeigt, ob das Wort gefunden wurde oder nicht.
Das würde dann so in etwa aussehen:

var ergebnis = {
  "5g": true,                // Hier gab es einen Treffer
  strahlung: false,
  "5g-strahlung": false,
  auswirkung: false,
  auswirkungen: false,
  gefahr: false,
  gefahren: true,            // Hier gab es einen Treffer
  risiken: true,             // Hier gab es einen Treffer
  gesundheit: false,
  gesundheitliche: false,
  risiko: false,
  massenexperiment: false,
  elektrosmog: false,
};

Wenn das Objekt erstellt wurde, kann man es dann auswerten.

Wenn es nur um Treffer oder nicht geht, würde ich dir empfehlen eine Boolische Variable zu deklarieren mit false zu initialisieren und wenn ein Begriff gefunden wurde, auf true zu setzen:

var treffer = false;

for (/*...*/) {
    for (/*...*/) {
      
      if (/* Wenn ei Begriff gefunden wurde */) {
        treffer = true;
    }
  }
}

// NACH der Schleife erfolgt die Auswertung:
if (treffer) {
    /*...*/
} else {
    /*...*/
}

Das Geheimnis warum es in "Bildschirmgrößen testen" mal geht und mal nicht, liegt an diesem kleinen Knopf: html-seminar.de/woltlab/attachment/2906/
Der stellt die Touch-Emulation ein bzw. aus. Wenn du ein Device auswählst, wird der automatisch aktiviert. Wenn du "Benutzerdefiniert" auswählst, wir der automatisch deaktiviert.

Im Grunde hast du das Problem richtig erkannt:

Zitat von lagraf

Warum bleibt das Submenü stehen wenn es über :hover geöffnet wird und verschwindet, wenn es am Touchdevice mit Klick (:active) geöffnet wird?

Der Grund dafür ist der, dass die Pseudoklasse :active so lange auf das Element gesetzt wird, wie auf das Element geklickt / getouched wird.

Ich muss MrMurphy recht geben: Wenn du sowas sauber und Cross-Plattform Sicher implementieren möchtest muss du das mit JavaScript machen.
Das Qhover-Ausklappverhalten" ist ganz nett zum Spielen, aber nichts für Produktionscode.

Also bei mir bleibt da alles offen. Ich Kann dein Problem leider nicht nachvollziehen.

Außerdem muss man beim Navigieren ja gar nicht klicken. Hovern reicht doch.

Du hast vergessen das Bootstrap JavaScript einzubinden.

https://getbootstrap.com/docs/…ing-started/introduction/

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Alles was bei dir klappt ist reines CSS. Die Klick Funktion ist JS.

Meinst du so in etwa?

https://codepen.io/Mr_Beer/pen/vYygZXy?editors=0011

function isElementInViewport(element, percent = 100) {
   const rect = element.getBoundingClientRect();
   const distanceThreshold = rect.height * (percent / 100);
   const isRectPartlyOffTop = rect.bottom - distanceThreshold >= 0;
   const isRectPartlyOffBottom = rect.top + distanceThreshold <= (window.innerHeight || document.documentElement.clientHeight);

   const rectIsInViewport =
      isRectPartlyOffTop &&
      isRectPartlyOffBottom &&
      rect.left >= 0 &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth);

   return rectIsInViewport;
}

var elements = document.querySelectorAll(".mein-element");

function callbackFunc() {
   for (var i = 0; i < elements.length; i++) {
      if (isElementInViewport(elements[i], 20)) {
         elements[i].classList.add("visible");
         console.log('show');
      } else {
         /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
         elements[i].classList.remove("visible");
         console.log('hide');
      }
   }
}

window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);

um rechts links habe ich mich jetzt nicht gekümmert, kannst du aber gerne nachbessern.

kannst du deinen Code als Codeblock posten? oder besser: einen codepen erstellen? Dann können wir dir viel besser helfen.

Ich denke mir die erste Regel von Using ARIA sagt es schon sehr gut:

Zitat von 2.1 First Rule of ARIA Use

If you can use a native HTML element or attribute with the semantics and behavior you require already built in [...] then do so.

... Es gibt aber auch noch die 4 weiteren Regeln.

Der erste Teil deine Problems klingt nach position: sticky.

Was du mit:

Zitat von PeterLustig9

[...] außer wenn man wieder auf die Startseite gelangt.

meinst, erschließt sich mir gerade nicht.

MrMurphy hat es schon in #11 gesagt: Wenn es so floaten soll, wie du willst, dürfen die <p> Elemente kein float: right und kein display: inline-block haben.

Die width-Angabe kannst du dann auch komplett von den <p> Elementen entfernen.

Außerdem solltest du für .card h1 das height entfernen. Dadurch wächst dann dein h1 Container mit, wenn die Überschrift zweizeilig wird.

Bitte poste noch deinen Code (html UND css in Code-Blocks)

Und beschreibe kurz das ist und das soll verhalten.

Zitat von Marcus2010

Meinst du so ?

Ja, das war die Idee.

Zu deinen Lösungsansätzen: Wenn ich das Problem nicht kenne, kann ich nichts zu den Lösungen sagen.

Es geht wohl um das archivieren, von alten Einträgen? Ergibt sich das Problem erst durch die Lösung mit dem extra Server,

Zitat von Marcus2010

Dein Link geht nicht (Page not found)

ich habe den Link gefixed.

Zitat von Marcus2010

Wie gesagt im Serverheader kann ich nichts setzen da ich da Softwaretechnisch nicht hinkomm.

Daher war auch der Vorschlag, dass du einen separaten Webserver aufsetzt, der die Daten vom NAS bereit stellt und die CORS Header setzt.

Zitat von Marcus2010

[...] Schon im <head> der Html Seite [...]

Das würde CORS ja ad absurdum führen, wenn man das im Client setzten könnte.

Du musst den Header im Server beim Response setzen.

Schau' dir das mal an: https://developer.mozilla.org/de/docs/Web/HTTP/CORS

Zitat von Marcus2010

Glaube die S7 1200 kann kein Php.

Aber doch scheinbar http. Dann Bau' dir doch ein Gateway (Die Sprache ist völlig egal), das die .csv vom NAS bereit stellt und die benötigten CORS header setzt.


Wie Jonas3344 meinte:

Zitat von jonas3344

- Du lieferst die Files von der Fritzbox per Webserver und PHP aus (wenn die so was hat) und setzt dabei die CORS-Header richtig

nur ist hier PHP nicht entscheidend sondern, dass die CORS Header gesetzt sind.

Zitat von jonas3344

eine API welche Dir die Daten liefert so dass du Dir die Charts selbst zusammenbauen kannst.

Das wäre jetzt auch meine Idee.

Such dir eine API, die dir die gewünschten Daten liefer und stelle sie mit D3.js oder ähnlichem dar.

Zitat von caddy

die Herausforderung ist, das ich im negativen Fall trotzdem in den positiven zweig möchte.

dafür ist Promise.prototype.finally() da.

(Außer du musst den IE11 berücksichtigen)

Aber du kannst das natürlich auch so machen wie du es nun tust.

Solange es funktioniert und nicht mehr als ein Paar Leute damit arbeiten müssen (sonst kann es sein, dass du deine Kollegen damit verwirrst), kannst du das implementieren, wie es für dich passt.

Wo kommt den das data her, das du versuchst auszugeben?

deine Daten befinden sich in der Variablen processedResponse.

Die musst du ausgeben.

get_record(key).then(response => {
   return response;
 }).then(processedResponse => { // <- hier sind deine Daten!
   if (processedResponse === true) {
      console.log('data: ' + data) // <- wo kommt das her?
      update_record(data); // <- oder das?
   } else {
     insert_record(data); // <- oder das?
   }
 })

caddy Danke für den Code, jetzt verstehe ich was du tun willst.

jonas3344 hat recht, du gibst aus der Funktion schon ein Promise zurück, allerdings nur wenn db truthy ist.

Du solltest IMMER ein Promise zurückgeben, sonst kannst du mit der Funktion nicht gut arbeiten.

Du versuchst das ja selber mit:

let processedResponse = get_record(key);
if (processedResponse === false) { 
    return resolve("false") } 
else { 
    return resolve("true")
}

auszubügeln.

Versuch das mal so:

function get_record(strkey) {
  return new Promise((resolve, reject) => {
    if (!db) {
      reject(Error('db ist nicht vorhanden!'));
    }

    const get_transaction = db.transaction(tablename, 'readonly');
    const store = get_transaction.objectStore(tablename);
    get_transaction.onerror = function () {
      console.log('Transaktion kann nicht durchgeführt werden get_record ');
      reject(Error('Transaktion kann nicht durchgeführt werden get_record '))
    };

    get_transaction.oncomplete = function () {
      console.log('alle Transaktion durchgeführt get_record !');
    };

    const request = store.get(strkey);

    request.onsuccess = function (event) {
      //console.log('event.target.result ' , event.target.result)
      if (event.target.result === undefined) {
        console.log('nicht gefunden get_record');
        reject(Error('nicht gefunden get_record'));
      } else {
        //resolve(event.target.result);
        console.log('gefunden get_record', event.target.data);
        resolve(event.target.result);
      }
    };
    request.onerror = function (e) {
        reject(Error(`fehler ist aufgetreten ${e.message}`));
    };
  });
}

Außerdem hat deine Funktion zwei Abhängigkeiten (db und tablename) die du am Besten mit in die Funktion gibst um sie handelbarer zu machen.

caddy get_record ist kein Standard JavaScript. Welches Modul/Framework verwendest du denn?

Außerdem verwendest du get_record Synchron. Wieso wrappst du die dann nochmal ein ein Promise?