Beiträge von Sempervivum

Sempervivum

Wenn das Bild im Cache ist, kann es sein, dass es schon geladen ist, wenn das Skript abläuft. Kann man abfangen, indem man den Ladezustand abfragt:

Code

        var theimg = jQuery(".wp-post-image");
        onResize = function () {
            var hoehe = theimg.height();
            jQuery(".pic-wrap").css("height", hoehe);
        }
        if (theimg.prop('complete')) {
            onResize();
        } else {
            theimg.on('load', onResize);
        }
        jQuery(window).bind('resize', onResize);

Alles anzeigen

Sempervivum

Ich weiß nicht genau, wie Du das meinst. Ein bestimmtes Bild kannst Du ohne weiteres ansprechen und einen Eventlistener registrieren, bei deinem Beispiel so:

Code

onResize = function() {
    var hoehe = jQuery(".wp-post-image").height();
    console.log("Höhe", hoehe);
    jQuery(".pic-wrap").css("height", hoehe);
}

jQuery(".wp-post-image").on('load', onResize);

jQuery(window).bind('resize', onResize);

Sempervivum

Zitat

Noch ein wenig Zeit sparen, indem man nur die eine spezielle Grafik auf vollständiges Laden prüft, geht wohl nicht?

Doch, auch die Grafik hat ein load-Event und Du kannst das on-load auch darauf anwenden.

Sempervivum

Du benutzt das document-ready-Event. Bei diesem Event kann es sein, dass die Bilder noch nicht geladen sind und die Abmessungen nicht richtig berechnet werden. Du musst statt dessen das load-Event benutzen, siehe hier:

https://api.jquery.com/load-event/

Und beachte dort den gelb hinterlegten Hinweis.

Sempervivum

Zitat

Wenn man das a weg macht ( so wie du es hattest ) geht es nicht. Obwohl das andere alle geht was da drinne steht .

Kennt hier eine die erklärung dafür ?????

Der Grund ist, dass ihr das Hintergrund-Bild einfach mit background zuweist. Dadurch werden alle anderen Eigenschaften des Hintergrundes auf ihre Defaultwerte gesetzt. Verwendet man background-image funktioniert es auch ohne a im Selektor. Siehe das erste Bild:

https://codepen.io/Sempervivum/pen/XWWPezN?editors=1100

Sempervivum

Hier findest Du eine Anleitung für ein Layout, das weitgehend deinen Vorstellungen entspricht:

https://developer.mozilla.org/en-US/docs/Web…CSS_Grid_Layout

Sempervivum

Warum mal wieder das Rad neu erfinden und einen Slider entwickeln? Es gibt genügend, die HTML-Inhalte unterstützen, d. h. kein Problem Bilder mit Texten zu sliden. Meine Favoriten:

https://swiperjs.com

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

Beide touch-ready und responsiv.

Sempervivum

Genau so habe ich es mir auch vorgestellt. Funktioniert es so nicht? Hier:

https://pixijs.io/examples/#/demos-basic/container.js

finde ich einen Ticker, in dem das Objekt animiert wird. Statt rotation müsstest Du dann x und/oder y animieren.

Sprechen wir überhaupt über das selbe pixi.js?

Sempervivum

Zitat

Aber ich verstehe nicht wie ich da die Richtung beeinflussen kann.

Um die Richtung festzulegen, müsstest Du ja x oder y animieren. Das müsstest Du als Eigenschaft bei jedem Objekt hinterlegen. Dann kannst Du sie ja auch während der Bewegung noch ändern.

Sempervivum

Zitat

möchte den Tabellenkörper scrollbar gestalten, während der Tabellenkopf stehen bleibt.

So etwas brauchst Du nicht selber zu entwickeln, denn das gibt es schon vorgefertigt:

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

Wenn Du die anderen Features wie Suche, Sortieren, etc. nicht brauchst, kannst Du sie problemlos weg konfigurieren.

Sempervivum

... oder, etwas universeller, mit JSON übergeben:

PHP

<?php
   $arr = array(1,2,3,4);
?>
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Titel</title>
  </head>
  <body>
     Body
  <script>
    var ar = <?php echo json_encode($arr); ?>;
    console.log(ar);
  </script>
  </body>
</html>

Alles anzeigen

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.

Sempervivum

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.

Sempervivum

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.

Sempervivum

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.

Sempervivum

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.

Sempervivum

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.

Sempervivum

Zitat

gibt es dennoch möglichkeiten weiter zu minimieren ??

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

Code

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")
    });
}

Alles anzeigen

Sempervivum

Dafür gibt es ein Beispiel:

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

Sempervivum

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.

Beiträge von Sempervivum

Höhe beim Reload manchmal falsch berechnet

Höhe beim Reload manchmal falsch berechnet

Höhe beim Reload manchmal falsch berechnet

Höhe beim Reload manchmal falsch berechnet

Hilfe: background (code kürzen!)

CSS Grid Layout

Mehrere JavaScript Funktionen in onClick HTML Variante benutzen?

GameLoop nutzen und Dinge bewegen [Logik]

GameLoop nutzen und Dinge bewegen [Logik]

Fixed Table Headers -- Problem mit Tabellen, die breiter sind, wie das Browserfenster..

Wie gehe ich mit Daten um, die von einem PHP-Skript auf einer Webseite erzeugt wurden?

DataTable laden

GameLoop nutzen und Dinge bewegen [Logik]

DataTable laden

Ich werde die CPU zum animieren meines Canvas verwenden, aber wie?

Text einrücken

mehrere Slideshows

Toggle nur jedes zweite mal

Bootstrap Tabelle sortieren

Bereiche einer Grafik auswählen und verlinken in Dreamweaver