Weiß nicht, ob es so etwas fertig gibt, aber man kann es relativ leicht selbst implementieren:
Hier wird beschrieben, wie man die Mausposition relativ zu einem Element ermittelt, in deinem Fall wäre das der Container der Slideshow:
https://stackoverflow.com/questions/2586…lement/25870569
Dann würde ich empfehlen, die Automatik aus zu lassen und mit der API das Weiterschalten zu veranlassen. Die API von Cycle 2 ermöglicht das. Das Intervall dabei kann man aus der Mausposition berechnen.
Würde ich auch erwarten, dass es dann geht. Um den Fehler einzugrenzen, würde ich mir $_FILES["uploaded_music"]["error"] ansehen.
Die max. Größe einer hochgeladenen Datei ist begrenzt, siehe hier:
https://stackoverflow.com/questions/2184…pload-file-size
Dort wird auch beschrieben, wie man sie vergrößern kann.
Empfehlenswert ist, Fehler abzufragen und dem Benutzer eine entspr. Meldung auszugeben.
Näheres findest Du hier:
Ich empfehle gern die Cycle-2-Slideshow und dort funktioniert sowohl das Vergrößern mit Strg+ als auch mit CSS:
Kein Problem, das geht recht einfach mit CSS-Animation:
... 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:
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.
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:
<!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:
<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.