Kein Problem, das geht recht einfach mit CSS-Animation:
Beiträge von Sempervivum
-
-
... richtiger: mousedown und mouseup
-
Sieh dir die Funktionen setInterval() und clearInterval() an, damit kannst Du den wiederholten Aufruf einer Funktion starten (beim Drücken bzw. keydown) und beenden (beim Loslassen, onkeyup).
https://wiki.selfhtml.org/wiki/JavaScript/Window/setInterval
-
Wenn ich das teste, stoße ich auf folgende Probleme:
- Bei breitem Fenster und wenn ich mit der Scrollposition ganz am Anfang bin, ist das Infofenster nicht sichtbar, weil es weiter unten liegt, so dass ich zunächst dachte, das Hover funktioniert nicht.
- Bei schmalem Fenster flimmert es beim Hover.
Ich empfehle, ein Plugin wie Tooltipster einzusetzen. Dieses legt die Lage des Infofensters intelligent fest, so dass es unabhänig von der Scrollpositon und der Lage des Infobuttons immer sichtbar ist und kein Flimmern auftritt. Trigger durch Hover oder Click/Touch ist konfigurierbar.
-
Du registrierst das onclick innerhalb der Funktion checkWidth(), d. h. mehrfach, weil diese Funktion mehrfach aufgerufen wird (der Eventhandler wird nicht überschrieben sondern immer neu hinzu gefügt). Nimm es aus dieser Funktion heraus und platziere es an einer Stelle, wo es nur einmal beim Laden der Seite aufgerufen wird.
-
Wenn Du den Zugriff über eckige Klammern verwendest, kannst Du den Schlüssel auch zusammenbauen:
var holz = all['daten' + dat][lev].holz;
-
Bei mir (Opera auf PC) funktioniert es einwandfrei: Bei breitem Fenster ist die Nav sichtbar, bei schmalem nur das Burger-Symbol und die Nav öffnet sich, wenn man darauf klickt.
Auf Samsung S4 funktioniert es auch: Touch auf Burger-Symbol öffnet die Nav, sowohl im Android-Browser als auch in Opera.
-
Zitat
hast du vieleicht mal einen Link oder so ?
Ich sehe immer noch keine Möglichkeit, den Code einzusehen, oder übersehe ich etwas?
-
Der erste Codeabschnitt sieht gut aus, so sollte es funtionieren. Du hast uns jedoch immer noch nicht gezeigt, wie Du die Texte in diesem Javascript-Objekt zur Anzeige bringst.
-
Am besten gleich hier das Tutorial durcharbeiten:
-
Hiernach:
https://www.html-seminar.de/html-texte-formatieren-2.htm
ist das sup-Tag der richtige Weg. Dein Code zeigt jedoch ein Javascript-Objekt. Gib uns den Code, wie Du dideses Tag anwendest und wie Du die Texte auf deine Seite bringst
-
Ja, wegen der Semantik. Google ist ein gutes Beispiel, weil es dann eine präzise Zuordnung zwischen Text und Bild gibt. Wenn ich nach Bildern suche, stehe ich häufig vor dem Problem, dass ein gefundenes Bild nicht dem Suchbegriff entspricht und ich erwarte, dass das figure-Tag solche Fehler ausschließt.
-
Auch wenn Lupus sie als "Cards" bezeichnet, werbe ich immer dafür, für diesen Zweck, ein Bild mit einer Beschreibung dazu, das figure-Tag zu verwenden.
-
Merkwürdig, da liegt so ein Popup über dem Codepen: "Email needs verification"?
-
Ja, jetzt habe ich es verstanden.
Da fällt mir leider keine Lösung mir reinem CSS ein. Mit Javascript und transition jedoch kein Problem:
HTML
Alles anzeigen<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test Scrolling Text</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style> .textBox { height: 30px; overflow: hidden; line-height: 30px; padding: 0px; display: inline-block; width: 300px; } .textBox span { display: inline-block; white-space: nowrap; transition: 1.5s linear; } </style> </head> <body> <p class="textBox"> <span id="mySpan">The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog</span> </p> <script> function doScroll() { var innerEle = document.querySelector(".textBox span"); var outerEle = document.querySelector(".textBox"); var innerWidth = innerEle.offsetWidth; var outerWidth = outerEle.offsetWidth; var diff = outerWidth - innerWidth; if (diff < 0) { innerEle.addEventListener("mouseover", function () { this.style.transform = 'translate(' + diff + 'px)'; }); innerEle.addEventListener("mouseout", function () { this.style.transform = 'translate(0px)'; }); } } doScroll(); </script> </body> </html>(Begonnen habe ich mit Webanimation, daher die querySelector. Sollte man noch umstellen.)
-
Hallo Draku,
mit Prozentwerten für die Verschiebung bist Du schon auf dem richtigen Weg. Jedoch: Wenn Du transform:translate für die Verschiebung benutzt, brauchst Du gar keine absolute Positionierung. Dieses funktioniert genau so gut:
Code
Alles anzeigen<p class="textBox"> <span id="mySpan">The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog</span> </p> <style> .textBox { height: 30px; overflow: hidden; line-height: 30px; padding: 0px; display: inline-block; } .textBox span { display: inline-block; white-space: nowrap; transform: translateX(0); transition: 1.5s; } .textBox:hover span { transform: translateX(-100%); } </style>Ist das gewollt, dass der Text nur zum Teil nach links gleitet? In meinem Beispiel habe ich -100% verwendet, so dass er ganz verschwindet.
-
... dieses ist das, woran ich mich erinnere:
Muss man prüfen, ob das Sortieren leicht zu integrieren ist, oder ob man nur das Drag&Drop benutzen kann und den Rest behält, wie es schon ist.
-
Zitat
ein Array zu erzeugen und dann in PHP die Dateien erst zu löschen
Das ist natürlich das einfachste, hat aber den Nachteil, dass die gelöschte(n) Datei(en) erst Mal hochgeladen werden müssen.
Was das Drag&Drop betrifft, so kenne ich zwar keine Erklärung oder ein Tutorial aber ich habe da ein Beispiel. Muss es nur heraussuchen ...
-
Das wird hier diskutiert:
https://stackoverflow.com/questions/1694…utfile/16943684
Scheint machbar zu sein mit dem Objekt DataTransfer. Wenn Du nicht zum Ziel kommst, melde dich wieder.
-
Man kann die Animationen auch kombinieren und auf das selbe Element anwenden: