Beiträge von Sempervivum

Letzteres trifft zu, die Reihenfolge ist egal.

Meistens wird eher gewünscht, dass ein Tooltipp beim Hover oder Klick aufgeht, also ein kleines Fenster mit weiteren Informationen. Dafür gibt es zahlreiche vorgefertigte Lösungen. Bei deiner Aufgabe glaube ich eher nicht, dass es etwas komplett fertiges gibt. Für den Slider jedoch schon, da gibt es ebenfalls zahlreiche. Selber benutze ich Swiper, der hat eine API, die keine Wünsche offen lässt und funktioniert auch auf Touch-Geräten. Für den Rest ist dann wohl selber machen angesagt. Was ist das denn für ein Bild? Raster, also JPG, PNG o. ä. oder Vector (SVG)? Und soll das Ganze auch responsiv sein?

Javascript hat aber nur interaktiv Zugriff auf das lokale Dateisystem. Wäre das aktzeptabel? Statt csv würde ich in Betracht ziehen, eher das JSON-Format zu verwenden, weil Du da wesentlich freier in den Datenstrukturen bis.

Zitat

Wird hier trotzdem ein Server benötigt?

Offenbar ja:

Zitat

The indexedDB API only works inside a webserver. When you navigate to it using the file system it won't work. The indexedDB API needs a domain context to work in and the file system doesn't provide that. Short you need an url to use the api.

https://stackoverflow.com/questions/1569…local-html-file

Bleibt dir wohl nichts anderes übrig, als einen lokalen Webserver zu installieren, wenn das bei euch zulässig ist.

OK, dann empfehle ich die zweite Variante. Als ID würde ich einen "sprechenden" String empfehlen, damit Du dir keine Nummern merken musst.

Etwa "superHeroes" in deinem Beispiel. Könnte dann auf PHP-Seite so aussehen:

<?php
// die URLs mit ihren IDs
$urlarray =[
    'superHeroes' => 'die-url-der-API-mit-key',
    'andere-id' => 'die-url-einer-anderen-API-mit-key'
    // usw.
];
// die URL aus der Liste auslesen
if (isset($_GET['id'] && isset(urlarray[$_GET['id']]) {
    $theurl = urlarray[$_GET['id']];
    // die API auslesen
    $response = file_get_contents($theurl);
    // und den Inhalt ausgeben
    echo $response;
}
?>

Ungetestet. Die ID musst Du dann beim Aufruf des Skripts als GET-Parameter übergeben. Etwas komplizierter wird es, wenn Du neben dem Key noch andere Parameter übergeben musst.

Weiß nicht genau, wie deine Frage zu verstehen ist: Normaler Weise gibt es zu einer bestimmten API und URL einen Key. Möchtest Du mit getData.php mehrere verschiedene APIs abfragen? Das ginge, wenn Du die URL ohne Key als Parameter übergibst und dann im Skript den Key einsetzt. Oder nur eine ID als Parameter übergeben und anhand dessen aus einer Liste die URL einschl. Key holen - möglicher Weise die bessere Lösung. Einfacher wäre es aber, für jede API ein eigenes Skript zu schreiben.

Dann poste doch mal das HTML und das CSS der Tabelle.Wenn die Tabelle sehr lang ist, kannst Du sie auf ein paar Reihen kürzen.

Wie hast Du denn diese Tabelle gestaltet? Was hast Du für einen Editor? Hast Du das CSS selbst geschrieben oder ist es ein WYSIWYG-Editor, der es automatisch erzeugt?

Gute Frage! Früher habe ich mal gelernt, dass lokale Variablen innerhalb einer Funktion nicht mehr verfügbar sind, nachdem diese durchlaufen und verlassen wurde. In diesem Fall trifft das offenbar nicht zu. Javascript merkt sich diese und sie sind auch später verfügbar, wenn der Eventlistener triggert. Der Begriff dafür lautet "closure", wenn ich mich richtig erinnere. Ein Verfallsdatum gibt es nicht, die Variable bleibt beliebig lange verfügbar.

Ich würde versuchen, die Bilder testweise einzubetten. Dann müsstest Du im HTML-Inspektor oder in der Quelltextansicht des Browsers das src-Attribut mit dem Pfad des Bildes auslesen können.

Der Grund ist, dass window.onload nur eine Funktion aufnehmen kann. Mit der zweiten Zuweisung von readTestText2 überschreibst Du readTestText. Die Lösung ist einfach: Beides in eine Funktion packen:

window.onload = readTestText;
function readTestText() {
    $('#absatzM').load('read.php');
    $('#absatzZ').load('readZ.php');
}

BTW: Du kannst auf das onload verzichten, wenn Du das Javascript ganz an das Ende des body stellst, vor das schließende </body>.

BTW2: Du kannst hier vorteilhaft mit einem einzigen PHP-Skript auskommen, wenn Du den Anfangsbuchstaben als Parameter übergibst. Aber einen Schritt nach dem anderen.

Dieses Skript eignet sich eher weniger dafür, mehrere verschiedene Galerien zu verwalten. Besser als es aufzubohren, ist wahrscheinlich, gleich ein ausgewachsenes Lightbox-Skript wie Fancybox 3 zu verwenden:

https://fancyapps.com/fancybox/3/

Zitat

ob es dafür einen Weg gibt um dies zu schützen aber ich meine ich habe dazu schonmal ein Thema gemacht

Ich kann mich auch erinnern, dass es dazu schon Mal einen Thread gab, aber ich finde ihn auf die Schnelle nicht wieder. Die Lösung besteht darin, die API in PHP z. B. mit file_get_contents zu lesen und auszugeben und im Javascript dann dieses PHP-Skript zu lesen. Dann ist der Key verborgen.

Rufe die Datei benutzer.php mal direkt im Browser auf und prüfe, ob sie das ausgibt, was Du erwartest.

Ich verwende mit bestem Erfolg das kostenlose Freefilesync für die Sicherung meiner persönlichen Daten. Kopiert nur die Dateien, die sich seit der letzten Synchronisation geändert haben, daher ist die Sync. im Nu erledigt.

Flex ist zwar sehr häufig nützlich aber in diesem Fall nicht notwendig. So funktioniert es:

https://codepen.io/Sempervivum/pen/vYNxoZr?editors=1000

"Ich konnte auch im Internet nichts entsprechendes finde." Ich leider auch nicht, mir ist nur eine Lösung mit Javascript eingefallen:

    <script>
        const cells = document.querySelectorAll('div.grid-funk > div');
        cells.forEach((item, idx) => {
            const iRow = parseInt(idx / 3),
                theClass = 'row-' + iRow;
            item.classList.add(theClass);
            item.addEventListener('mouseover', () => {
                document.querySelectorAll('div.grid-funk > div.' + theClass).forEach((item, idx) => {
                    item.classList.add('hovered');
                });
            });
            item.addEventListener('mouseout', () => {
                document.querySelectorAll('div.grid-funk > div.' + theClass).forEach((item, idx) => {
                    item.classList.remove('hovered');
                });
            });
        });
    </script>

CSS:

    .grid-funk>div.hovered {
        background-color: lightgray;
    }

Am einfachsten geht das, indem man der betr. Tabellenzelle eine Klasse gibt:

<td class="bold-on-hover">Inhalt</td>

Dann kann man die Schrift in dieser Zelle fett machen:

#tbl_ersatzteil tbody tr:hover td.bold-on-hover {
    font-weight: bold;
}

Die Standard-Überschriften kannst Du doch beliebig mit CSS anders stylen. Warum möchtest Du selbst welche definieren?

Zitat

Was ist "best use"? Meiner Auffassung nach der schlankere HTML-Code in Form einer einzigen ul ohne Unterliste. Was meint Ihr?

Ich bin da anderer Meinung: Hier spielt nicht nur eine Rolle, wie schlank der HTML-Code ist und wie leicht er sich stylen lässt sondern auch die Logik bzw. Semantik: Die Unterpunkte sind jeweils einem Hauptpunkt unter- bzw. zugeordnet und das sollte sich auch direkt im HTML wiederspiegeln.

Zitat

In CSS brauche ich so so oder so einen Klassenselektor für die Unterliste.

Nicht unbedingt:

CSS für die Listenelemente der Hauptliste:

nav>ul>li {
}

CSS für die Listenelemente der Unterliste:

nav>ul>li>ul>li {
}