Beiträge von Sempervivum

"sondern es sollen unendlich viele Bilder hochgeladen werden können." Ich glaube, Du hast mich falsch verstanden: Ich meine keine Galerie, die man von Hand anlegt und wo man den HTML-Text für jedes Bild selber schreiben muss, sondern die Galerien, die ich angegeben habe, sind PHP-Skripte, die es ermöglichen, beliebig viele Bilder hochzuladen und die das HTML, CSS und ggf. Javascript für die Anzeige automatisch generieren. Coppermine und Tinywebgallery ermöglichen, Beschreibungen anzulegen, so wie Du es haben möchtest.

Ein kleines Script kenne ich leider nicht, aber es gibt eine ganze Reihe von vorgefertigten Galeriescripts, wo sicher auch eines dabei ist, das Beschreibungen ermöglicht:
Gallery wollte ich erst schreiben, aber ein Blick auf die Homepage zeigt, dass sie eingestellt wurde.
Coppermine, 4images und TinyWebGallery fallen mir noch ein.
Zitat von Coppermine: "caption, title, description and user defined fields for each picture (searchable);" - das müsste das sein, was Du dir vorstellst.

Sehr gut, genau das wollte ich auch gerade vorschlagen. Ich bin weder ein Freund von diesem noch von eval aber mir kommt es so vor, dass in dem Fall kein Weg daran vorbei geht, das eine oder das andere zu verwenden, weil man den Funktionsnamen dynamisch aufbauen muss.

Wie ich schon schrieb: Mit eval kann man Variablen- und Funktionsnamen dynamisch anlegen. Müsste dann so aussehen:

st_list[i].addEventListener('mouseout', eval('function listener' + i + '() {r_on_out(' + i + ')}'), false);

Ich denke mal darüber nach, ob es noch eine bessere Lösung gibt.

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"];