Ach so, ich hatte dies übersehen:
window['func_mouseout'+i] = r_on_out(i);
Was hier passiert, ist folgendes: Da der Funktionsname r_on_out von einem Klammernpaar gefolgt wird, wird nicht diese Funktion zugewiesen sondern r_on_out wird ausgeführt mit i als Parameter und der Rückgabewert wird zugewiesen. D. h. ganz etwas anderes als das, was Du möchtest.
Wie definierst Du denn
window['func_mouseout'+id]?
[size=10]Möglicher Weise kommt man hier nicht daran vorbei, das ungeliebte eval einzusetzen, um Funktionen der Form myListener1, myListener2 zu erzeugen.
Dies ist ein häufiges Problem, wenn man Eventlistener in einer Schleife registriert und dabei den Schleifenindex verwendet. Was passiert, ist folgendes: Der Code in der anonymen Funktion wird ja nicht beim Registrieren ausgeführt, sondern erst, wenn das Ereignis, in diesem Fall das Mouseout, eintritt. Dann ist die Schleife längst durchgelaufen und der Index hat seinen Endwert von 13. Lösung ist folgende:
st_list[i].addEventListener('mouseout', function(idx) {return function() {r_on_out(idx)};}(i), false);
In diesem Fall wird die äußere Funktion sofort aufgerufen, weil auf die Definition ein Klammernpaar folgt. Innerhalb der äußeren Funktion hat der Parameter idx den aktuellen Wert, der in der inneren Funktion verwendet wird. Die äußere Funktion gibt die innere als Returnwert zurück und die innere wird als Listener registriert.
"kann auch diese per automatischem scrollen über die Links perfekt erreichen." Meinst Du damit, dass die Seite langsam zu der betr. Stelle scrollt? Dann hast Du doch sicher noch Javascript, das das veranlasst? Am besten postest Du mal die URL der Seite.
Gängige Ursache für solche Probleme: Groß- und Kleinschreibung. Wenn Du unter Windows arbeitest ist es egal, aber dein Webserver unterscheidet Groß- und Kleinschreibung: bild.jpg ist etwas anderes als Bild.jpg, oder bild.jpg vs. bild.JPG.
Das liegt an diesen beiden CSS-Anweisungen, die auf beide Bilder wirken:
.td5 img { height: 80px!important;}
img { height: auto; max-width: 100%; vertical-align: middle;}
Das max-width bei dem zweiten, beides in style.css definiert. Hast Du Zugriff auf diese Datei? Ich würde empfehlen, beide Bilder gezielt anzusprechen und die Breite und die Höhe zu setzen:
.imgtip > img { height: 80px!important;}
.imgtip > span > img { max-width: none;}Selbstverständlich ist das möglich: Gib der Tabelle, die abweichend formatiert werden soll, eine ID:
<table id="special">Darauf beziehst Du dich dann im CSS:
table#special { border-collapse: separate; border-spacing: 0.2em; margin-left: 2em; box-shadow: 0 0 0.1em #666; position: relative; z-index: 1; cursor: context-menu;}table#special th,table#special td { padding: 0.2em 0.5em; border-radius: 0.1em;}table#special thead th { background-image: linear-gradient(to top, red 10%, blue ); color: white; }usw.
Hast Du das Problem inzwischen gelöst? Auf meinem Handy (Android, Samsung Ace3) funktioniert es nämlich einwandfrei, sowohl im Standardbrowser als auch im Opera.
Natürlich geht das. Du brauchst nur dieses wegzulassen:
if (selIndexes.length > 0) selIndexes += ", ";
selIndexes += optionTag.text + " ";[/code]
Du hast schon richtig erkannt: Wenn Du dein Ziel erreichen willst, musst Du konsequent mit Prozent- statt Pixel-Angaben arbeiten. Ich habe es mal so gemacht:
<!DOCTYPE html><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="outerbox">
<div id="sliderbox">
<img src="images/01.png"><img src="images/02.png"><img src="images/03.png"><img src="images/04.png">
</div>
</div>
<style>
#outerbox {
width: 100vw !important;
height: auto;
overflow: hidden;
}
#sliderbox {
position: relative;
width: 400%;
animation-name: sliding;
animation-duration: 20s;
animation-iteration-count: infinite;
}
#sliderbox img {
width: 25%;
}
@keyframes sliding {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: 0%;
}
}
</style>
</body> </html>Ist sicherlich eine interessante Aufgabe, so etwas nur mit CSS zu machen, aber ich finde, nicht alles, was machbar ist, ist auch sinnvoll. Vor allem die Änderungsfreundlichkeit beim Hinzufügen neuer Bilder lässt zu wünschen übrig, weil man alle Prozentangaben neu berechnen muss. Bei einem Slider mit Javascript ist es kein Problem, ihn so anzulegen, dass man nur die Bilder hinzu fügt und alles andere passt sich automatisch an.
Bitte keine Crosspostings, die Mühe hier hätte ich mir sparen können:
https://www.tutorials.de/threads/knoepf…rzeugen.403983/
Versuche diese Javascript:
var texts = [ "Diese spende hat einige Features",
"Diese Spende hat mehr Features als die 10€ Spende",
"Diese Spende hat noch mehr Features"
];
function GetSelected(selectTag) {
var selIndexes = "";
for (var i = 0; i < selectTag.options.length; i++) {
var optionTag = selectTag.options[i];
if (optionTag.selected) {
if (selIndexes.length > 0)
selIndexes += ", ";
selIndexes += optionTag.text + " ";
selIndexes += texts[i] + "<br>";
}
}
var info = document.getElementById("info");
if (selIndexes.length > 0) {
info.innerHTML = "Selected options:<br>" + selIndexes;
}
else {
info.innerHTML = "There is no selected option";
} }Hast Du dich schon mit Arrays beschäftigt? Wenn Du mit Indices arbeitest, wäre es nahe liegend, die Texte in einem Array abzulegen und mit dem Index dort heraus zu lesen.
Ich verstehe nicht ganz, was Du vor hast. OK, Du erzeugst eine Tabelle mit dem Ergebnis der Datenbankabfrage.
"Beim Versuch diese in eine Liste zu packen scheiter ich allerdings."
Was meinst Du da für eine Liste? Eine Liste i. S. von HTML (ul-li).
Edit: Habe einen genaueren Blick auf deinen Code geworfen und gesehen, dass Du ja versuchst, eine ul-li-Liste anzulegen. Dabei sehe ich das Problem, dass Du - von dem Anlegen der Tabelle her - mit dem Cursor schon am Ende angelangt bist. Du musst zuvor der Cursor zum Anfang zurück spulen.
Außerdem verstehe ich nicht, warum Du beides anlegen willst, eine Tabelle und eine Liste.
PS: Wenn Du programmieren lernen möchtest, solltest Du dich mit den Diagnosemöglichkeiten der jeweiligen Sprache vertraut machen. Bei Javascript, HTML und CSS sind das die Developertools deines Browsers. Damit findet man solche Fehler leicht.
Hast Du das von irgendwo übernommen?
Der Fehler liegt hier:
monat[monatDesJahres]
Dies setzt voraus, dass es ein Array monat gibt mit den Namen der Monate, so:
var monat = ["Januar", "Februar", /*usw.*/ "Dezember"];Das ist aber die HP bei Arcor und die funktioniert ja, wenn ich dich richtig verstehe. Also nicht geeignet, den Fehler zu finden. Bei welchem Hoster hast Du es denn versucht? Ich empfehle bplaced.net. Und welchen FTP-Client benutzt Du zum Hochladen? Ein Screenshot vom Serverfenster wäre ebenfalls hiflreich.
Normaler Weise sind gängige Ursachen:
Aber in deinem Fall funktionierte ja alles bei Arcor. Am besten postest Du mal die URL deiner Seite und einen Screenshot der Ansicht in deinem FTP-Client, die Ansicht auf dem Server.
Wahrscheinlich bekommst Du deshalb keine Antworten, weil Du im falschen Unterforum bist.
"deshalb sind die alle Verzerrt" - das liegt daran, dass Du deinem img-Tag eine feste Breite und Höhe gegeben hast:
<img name="austausch" src="Seenotretter.jpg" width="1200" height="800" style="position: relative; top: 17px; left: 22px">
Lass das weg, dann werden deine Bilder nicht verzerrt sondern in originaler Größe angezeigt und ohne das Seitenverhältnis zu verfälschen.
Wenn es um Klick vs. Hover geht, würde ich eher empfehlen, danach zu unterscheiden, ob Touch unterstützt wird und nicht nach Bildschirmgröße. Ich verwende dazu folgendes:
var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
(So bei stackoverflow gefunden, diese Quelle halte ich für zuverlässig.)