Beiträge von Sempervivum

Ja, ich denke, mit deiner Vermutung liegst Du richtig. Lösung indem Du für das geklonte Eingabefeld ebenfalls den Datepicker initialisierst:

function addbase() {
    var elmnt = document.getElementsByClassName("input")[a];
    var cln = elmnt.cloneNode(true);
    var zuf = document.getElementsByClassName("inhalt")[0];
    zuf.appendChild(cln);
    $(cln).datepicker();
    var btn = elmnt.getElementsByTagName("DIV")[4];

Immer voraus gesetzt, dass Du den Datepicker von jQuery-UI verwendest.

Mit einer Tabelle wäre es sicher möglich, wenn man spanning für den inneren Bereich nehmen würde, aber sematisch sicher verfehlt.

Ich habe hier mal etwas mit Flexbox ausgearbeitet. Etwas kompliziert vom CSS her, aber eine bessere Lösung fiel mir nicht ein.

Möglicher Weise mit Bootstrap, aber damit habe ich mich noch nicht beschäftigt.

https://jsfiddle.net/1gq0tuqu/8/

Nein, replace ist schon richtig. Auf die Namen hatte ich jetzt nicht so geachtet und sie stimmen noch nicht. Außerdem ist bei den ersten replace eine Klammer zu viel. Und das += funktioniert nicht für das innerHTML. Dieses funktioniert bei mir:

           function init() {
                allBirds.classList.remove("hidden");
                var obj = JSON.parse(listOfBirds);
                console.log(obj);
                var templ = document.getElementById("bird-list-entry").innerHTML;
                var thehtml = "";
                for (var i = 0; i < obj.length; i++) {
                    thehtml += templ.replace("<%= latinName %>", obj[i].latinName)
                                       .replace("<%= name %>", obj[i].name)
                                       .replace("<%= imagePath %>", obj[i].imagePath); // evtl. weitere Ersetzungen
                }
                document.querySelector(".bird-list").innerHTML = thehtml;
            }

Oh, da ist mir ein Fehler unterlaufen. Versuche dies für die erste Zeile:

var templ = document.getElementById("bird-list-entry").innerHTML;

Wie man globale Variablen vermeidet, wird z. B. hier beschrieben:

https://stackoverflow.com/questions/1841…s-in-javascript

Eine Möglichkeit, die ich selber gern anwende ist, die Werte in data-Attributen zu speichern, z. B. so bei den Clicks:

                //clicks = 0;
                
                document.getElementById("score").innerHTML = 0;
                document.getElementById("score").setAttribute("data-clicks", 0);
                document.getElementById("endscore").innerHTML = 0;

// und im weiteren Verlauf:
document.getElementById("score").setAttribute("data-clicks", parseInt(document.getElementById("score").getAttribute("data-clicks")) + 1);

Hier bietet es sich sofort an, das Element #score nur einmal zu ermitteln, aber dann muss man Obacht geben, dass man nicht wieder eine globale Variabel erzeugt.

Ah so. Jetzt hast Du ja das HTML und brauchst die Elemente nicht mehr mit Javascript anzulegen. Jetzt müsste es also etwa so aussehen:

var templ = document.getElementById("bird-list-entry");
for(var i =0; i< obj.length; i++){
    var thehtml = templ.replace(("<%= latinName %>", obj[i].latinname)
                       .replace("<%= name %>", obj[i].name)
                       .replace("<%= imagePath %>", obj[i].imagepath); // evtl. weitere Ersetzungen
}
document.querySelector(".bird-list").innerHTML += thehtml;

Was ist dir denn unklar? In Posting #2, der zweite Codeblock, ist angeben, wie Du des Text eines Templates ausliest. Dann brauchst Du ihn zunächst nur mit replace() zu überarbeiten. Dann mit innerHTML in die bird-list einfügen.

Du kannst das Template wie vorher schon das JSON, mit innerText auslesen und dann die Platzhalter mit replace ersetzen, etwa so:

thehtml = thehtml.replace("<%= latinName %>", obj.latinname)
                 .replace("<%= name %>", obj.name); // evtl. weitere Ersetzungen

Was ist denn das für Template? Für ein CMS? Oder ist es selbst gemacht nur für diese Aufgabe?

Ja, das ist richtig. Aber hier erzeugt er ja das Element gerade neu und es kann noch keine andere Klasse vorhanden sein.

Ich empfehle, jeweils ein p-Element für die Namen zu verwenden, dann werden sie automatisch untereinander angeordnet. Wenn Du innerHTML verwendest, um den Text einzutragen, kannst Du auf die Verwendung von textNode verzichten:

name = document.createElement("p");
name.innerHTML = obj[i].name;

Das Attribut heißt in Javascript className:

img.className = "bird-image";

In deinem CSS beziehst Du dich auf die Klasse .bird-image. Dann musst Du beim Anlegen des Elementes diesem auch diese Klasse zuweisen.

Zitat

Der schwarze rand ist ja der border von der tabelle.Meines wissens läst sich da nicht rein schreiben.

Man müsste die Tabelle etwas umbauen und das anders Regeln.

In meinen Augen etwas unlogisch, dass die Caption der Tabelle nicht innerhalb des Rahmens angezeigt wird. Ich schlage vor, einen Wrapper um die Tabelle zu legen und diesem den Rahmen zu geben.

Wüsste nicht, dass man die Geschwindigkeit auslesen könnte. Lädt man eine Datei über Ajax, kann man den Fortschritt ermitteln und anzeigen. Habe ich früher mal programmiert. IMO wäre dann aber das Verhältnis zwischen Aufwand und Nutzen nicht verhältnismäßig. Außerdem handelt es sich teilweise um MJPEG-Streams und ich bezweifle, dass man die mit Ajax laden kann.

Soll die Liste im Browser hinterher so aussehen wie in aufgabe.jpg? Dann brauchst Du in jedem Listenelement das Bild, den deutschen und den lateinischen Namen und das "+"-Symbol.

Und in dem CSS in posting #14 vermisse ich das Bild.

Es wäre nicht verkehrt, wenn man das mal vollständig online und in Aktion sehen könnte. Ist es öffentlich und kannst Du die URL posten?

Der Container wächst auch, aber dem Bild hast Du eine feste Größe gegeben:

.dabinich img {
    width: 100px;
    height: 60px;
}

Mit Größe 100% funktioniert es:

dabinich img {
    width: 100%;
    height: 100%;
}

Auch das verstehe ich nicht richtig, ohne das Umfeld zu sehen. Der Parameter value ist der Wert, der aktuell angezeigt werden soll. max ist der Maximalwert, der auftreten kann. Der Maximalwert wird beim Start nur temporär eingesetzt, um die Größe berechnen zu können, sofort anschließend wird er durch value ersetzt:

                    // Wir setzen zunächst den Text auf den Maximalwert um die 
                    // benötigte Groesse berechnen zu können:
                    text: Eigenschaften.templateText.replace("{value}", max).replace("{remaining}", max)
                });
                // Dann berechnen wir die Groesse:
                yBar = pos + balkenID.measureText('text').height / 2 - Eigenschaften.barHeight / 2;
                if (Eigenschaften.textPos == "left") {
                    var xBar = pos + balkenID.measureText('text').width + 35,
                        xText = pos;
                } else {
                    var xBar = pos,
                    xText = pos + Eigenschaften.barWidth + 10;
                }
                var width = pos + balkenID.measureText('text').width + 10 + Eigenschaften.barWidth + pos;
                balkenID.attr("width", width);
                balkenID.attr("height", height);
                balkenID.setLayer('text', {
                    // Und jetzt setzen wir den Text auf den aktuellen Wert entspr. value
                    text: getText(value, max, Eigenschaften),

Ich würde ja eher eine Galerie empfehlen, die durch Klick bedient wird, damit sie auch auf Touch-Geräten funktioniert. Diese habe ich früher mal gemacht:

<style>
        .thumbs {
            display: inline-block;
            width: 50px;
            vertical-align: top;
        }

            .thumbs img {
                width: 50px;
                height: auto;
            }

        .mainimg {
            position: relative;
            display: inline-block;
            height: 400px;
            width: calc(100% - 50px);
        }

            .mainimg input {
                display: none;
            }

            .mainimg figure {
                position: absolute;
                width: 100%;
                height: auto;
                left: 0;
                top: 0;
                opacity: 0;
                transition: opacity ease 3s;
            }
            .mainimg figure img {
                width: 70%;
                height: auto;
                float: left;
            }
            .mainimg figure figcaption {
                display: inline;
            }

            .mainimg input:checked + figure {
                display: block;
                opacity: 1;
            }
    </style>
    <div class="thumbs">
        <label for="img1"><img src="images/dia0.jpg" /></label>
        <label for="img2"><img src="images/dia1.jpg" /></label>
        <label for="img3"><img src="images/dia2.jpg" /></label>
    </div><div class="mainimg">
        <input type="radio" name="radio-mainimg" id="img1" />
        <figure><img src="images/dia0.jpg" /><figcaption>Caption for image 1</figcaption></figure>
        <input type="radio" name="radio-mainimg" id="img2" checked />
        <figure><img src="images/dia1.jpg" /><figcaption>Caption for image 2</figcaption></figure>
        <input type="radio" name="radio-mainimg" id="img3" />
        <figure><img src="images/dia2.jpg" /><figcaption>Caption for image 3</figcaption></figure>
    </div>

Edit: Ich sehe, dass die Galerie von Gipspferd das auch realisiert, mit :focus. Nehme alles zurück.