Beiträge von Sempervivum

Zitat

Hast du damit schon gearbeitet ?

Ja, habe ich, kein eigenes Projekt, sondern ich habe jemand unterstützt, der einen Stundenplan für die Schule programmieren wollte.

Zitat

ist die Syntax einfach ?

Ich fand es ein wenig einsteiger-unfreundlich aber wenn man erst mal drin ist und das Grundprinzip verstanden hat, geht es gut.

Sonst bei HTML/CSS/JS/PHP finde ich praktisch immer ganz schnell für ein Problem eine Lösung im Web aber bei jsGrid ist das weniger so. Musste das meiste durch Debuggen und Versuch-Irrtum heraus finden.

Meine Idee: Die Objekte in einem Array führen und dieses in der Funktion update abarbeiten, um sie zu bewegen. Dann für die Objekte, die später starten sollen, eine Zeit aufziehen mit setTimeout und erst nach Ablauf dieser Zeit das Objekt dem Array hinzu fügen. Beim nächsten Durchlauf der update-Funktion wird das neue Objekt dann in die Bearbeitung einbezogen und bewegt.

Da gibt es etwas anderes, mit dem ich gerade bekannt geworden bin, und zwar jsGrid. Diese Bibliothek kann eine Tabelle aus einer DB nicht nur anzeigen, sortieren, seitenweise laden etc. sondern ermöglicht auch das Editieren mit Eingabefeldern und Selectboxes. Wird das Editieren bestätigt, wird nicht die ganze Tabelle neu geladen sondern nur die geänderte Zeile wird zum Server geschickt und dort in der DB aktualisiert. Einfügen und Löschen ist selbstverständlich auch möglich.

Besonders dramatisch wird das ja, wenn man 3D-Berechnungen machen muss - bei Spielen nichts ungewöhnliches. Ich weiß es nicht ganz genau, aber ich glaube mich zu erinnern, dass WebGL die GPU nutzt. Vielleicht kannst Du in der Richtung weiter nachforschen.

Zitat

Das mit dem BB-Code habe ich nicht verstanden, tut mir leid.

In diesem Forum brauchst Du auch kein BB-Code denn beim Verfassen hast Du oben die Werkzeugleiste, mit der Du alles formatieren kannst, was unterstützt wird.

Meine Empfehlung: Keine spezielle Slideshow verwenden, sondern eine ausgereifte, die vielfältig konfigurierbar ist. Dann sind z. B. mehrere getrennte Slideshows auf einer Seite kein Problem.

Meine Empfehlungen:

https://swiperjs.com

https://owlcarousel2.github.io/OwlCarousel2/

Beide sind touch-ready, d. h. sie können auch auf dem Handy oder Tablet bedient werden.

Zitat

gibt es dennoch möglichkeiten weiter zu minimieren ??

Ja, eine Möglichkeit gibt es: Du brauchst nur eine Schleife zu verwenden:

const hoverballs = document.querySelectorAll("img.hoverball ")
console.log(hoverballs)
for( let hoverball of hoverballs){
    hoverball.addEventListener("mouseover", function einschalten(e){
        hoverball.classList.remove("hoveranimationoff")
        hoverball.classList.add("hoveranimationon")
    });
    hoverball.addEventListener("mouseout", function ausschalten(e){
        hoverball.classList.remove("hoveranimationon")
        hoverball.classList.add("hoveranimationoff")
    });
}

Dafür gibt es ein Beispiel:

https://datatables.net/examples/basic_init/filter_only.html

Im Prinzip geht das mit Image-Maps, siehe hier:

https://wiki.selfhtml.org/wiki/HTML/Mult…sitive_Grafiken

Aaaaber:

1. Sie sind nicht responsiv, darauf wird auch bei Selfhtml hingewiesen.

2. I. allg. wird davon abgeraten, Informationen als Bilder darzustellen, weil sie dann für Suchmaschinen nicht auffindbar sind.

Zitat

stimmt hier irgendeine Reihenfolge nicht ??

Das glaube ich auch: Die Skripts für die Bibliotheken bindest Du erst im Footer ein, aber die Tabelle schon im Header. Eigentlich wäre das OK, weil Du ja document-ready verwendest, aber auch jQuery wird erst im Footer eingebunden und steht im Header noch nicht zur Verfügung. Verschiebe den Code hinter Einbinden der Bibliotheken, dann sollte es funktinieren:

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="../js/custom.js"></script>
<script>
  $(document).ready( function () {
    $('#tabelle11').DataTable();
  });
</script>
</body>
</html>

Ich weiß nicht, ob das für dich anwendbar ist, aber bei Elementen, die durch Flex nebeneinander angeordnet werden, tritt dieser ärgerliche Effekt nicht auf:

https://jsfiddle.net/Sempervivum/537k9mqc/1/

Solch eine Aufgabe kommt öfter vor. Die Lösung lautet: Lege den Code in eine Funktion und übergebe die variablen Parameter:

    <div id="test"></div>
    <section></section>
    <script>
        function getThem(selHeader, selSection, url) {
            function populateHeader(jsonObj) {
                var myH1 = document.createElement('h1');
                myH1.textContent = jsonObj['squadName'];
                header.appendChild(myH1);

                var myPara = document.createElement('p');
                myPara.textContent = '' + jsonObj.response[0].name;
                header.appendChild(myPara);
            }
            var header = document.querySelector(selHeader);
            var section = document.querySelector(selSection);
            var requestURL = url;
            var request = new XMLHttpRequest();
            request.open('GET', requestURL);
            request.responseType = 'json';
            request.send();
            request.onload = function () {
                var superHeroes = request.response;
                populateHeader(superHeroes);
                // showHeroes(superHeroes);
            }
        }
        getThem('#test', 'section', 'https://api.truckyapp.com/v2/traffic/servers')

Hallo Bastelklug und willkommen im Forum.

height ist auch nicht geeignet, um einen Text zu verschieben. Verwende padding oder margin.

Allgemeiner Hinweis: Wenn Du gerade anfängst, deine Website zu entwickeln, ist es besonders empfehlenswert, gleich die richtigen Techniken zu verwenden. Du wirst dir damit die Arbeit sehr erleichtern.

Vergiss float und verwende statt dessen Flexlayout:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox

Außerdem ist es empfehlenswert, semantische Tags zu verwenden, also z. B. <header> statt <div id="kopf">

https://wiki.selfhtml.org/wiki/HTML/Tuto…nstrukturierung

Ist ja mysteriös. Bist Du sicher, dass Du genau den gleichen Code wieder eingefügt hast? Sagt die Console etwas?

Du benötigst schon CSS und Javascript, aber Du brauchst es nicht selber zu entwickeln, denn das gibt es schon:

https://datatables.net

Nicht benötigte Features können weg konfiguriert werden. Wenn ich mich richtig erinnere, ist Booststrap-Layout möglich.

Das Grundprinzip ist einfach: Eine Regel, die spezifischer ist als eine andere setzt sich durch, unabhängig von der Reihenfolge. Z. B. ist ein Selektor mit einer ID spezifischer als einer mit einer Klasse. Nur wenn beide gleich spezifisch sind, wird nach der Reihenfolge entschieden.

Mache dich hiermit vertraut, dann findest Du die Erklärung:

https://wiki.selfhtml.org/wiki/CSS/Tutor…instieg/Kaskade

Eine Holzhammermethode, um das Problem zu lösen, ist, deinen eigenen Eigenschaften ein !important anzuhängen, das wird auch in dem Link beschrieben.

Genau, deshalb auch mein Hinweis, dass es üblich ist, sich auf das Laden der Bilder zu beziehen (wenn man eine Fortschrittsanzeige haben will) oder auf das onload-Event. Hätte es vielleicht etwas strikter formulieren sollen, denn ohne das macht das Ganze keinen Sinn.

Versuche dies CSS:

.preloadercontainer {
    animation preloader 1s forwards;
    animation-delay: 2s;
}
@keyframes preloader {
   from {opacity: 1;}
   to {opacity: 0;}
}

(ungetestet)

Naja, das Javascript muss ja auch erst geladen werden und das CSS steht i. allg. im Head, so dass es auch schnell wirksam ist. Ich erwarte, dass sich das nicht viel nimmt. I. allg. beanspruchen die Bilder den größten Teil der Ladezeit und viele Preloader nehmen nicht einfach eine feste Verzögerung sondern prüfen, wie viele von den Bildern geladen sind.