Beiträge von Sempervivum

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.

Der Fehler liegt beim Aufruf:

erstelleBalken(balkenId3, 0, 0, { colorBar: 'black', templateText: "{remaining}\'", textPos: "left" });

Der dritte Parameter ist der Maximalwert und darf nicht Null sein. Das Skript setzt zunächst den Maximalwert in den Text ein um den maximal benötigten Platz zu messen. Übergibst Du 0, wird der Platz für "0'" berechnet. Nimmt der Wert im weiteren Verlauf größere Werte an, reicht der Platz nicht aus.

Der Grund ist, dass dieses:

circle.onclick=add

den Listener überschreibt, während addEventListener(), wie der Name sagt, hinzu fügt.

In jedem Fall ist es IMO sauberer und klarer, wenn man ihn nur einmal bei Laden der Seite hinzu fügt, denn das Kreiselement bleibt ja unverändert im Spielverlauf.

Hier eine Version ohne jQuery, allerdings ohne slideUp und slideDown. Du musst auch das CSS übernehmen, weil das Skript jeweils darauf aufbaut.

Versuch macht kluch - ich habe es getestet und Du hast Recht: Definiert man die Funktion add() außerhalb, funktioniert es richtig. Das hatte ich zunächst nicht erwartet, sondern dass die Funktion mehrfach registriert wird, egal ob sie innerhalb oder außerhalb von startGame() liegt. Offenbar ist es jedoch so, dass die selbe Funktion nicht mehrfach registriert wird, auch wenn addEventListener() mehrfach aufgerufen wird.

Wahrscheinlich liegt es daran, dass ich jQuery verwendet habe und Wordpress dieses offenbar im Compatibility-Mode bereit stellt.

Hier ist eine Beschreibung, um jQuery und das Skript so einzubinden, wie Wordpress es vorsieht:https://comlounge.net/jquery-plugin-wordpress-theme/

Wenn Du auf diese Weise nicht zum Ziel kommst, könnte ich das Skript umschreiben, so dass es ohne jQuery funktioniert.

Zitat

Wie kann ich diese an eine andere Stelle positionieren?

Wie meinst Du das? In der Seite gibt es nur die Galerie. Du kannst sie zentriert, links oben, links mittig etc. positionieren. Ist es das, was Du meinst?

Ja, meiner (MS Visual Studio Community) zeigt Validierungsfehler sofort an.

Habe da etwas zum Blättern ausgearbeitet:

Wenn ich das richtig sehe, wird die Funktion startGame() im Spielverlauf mehrfach aufgerufen, so dass der Eventlistener mehrfach registriert wird und beim Klick die Funktion add() mehrfach aufgerufen wird.

Bitte auch die Funktionen getText und getColor2. Und den Aufruf der Funktion, mit dem der Fehler auftritt.

Stimmt, aber das ist nicht der einzige Fehler:

allBirds = document.getElementById(".bird-gallery"),
listOfBirds = document.querySelector("bird-list").innerHTML;

getElementById erwartet eine ID als Parameter. Hier kannst Du am sinnvollsten document.querySelector verwenden.

document.querySelector erwartet dagegen einen CSS-Selektor, d. h. Du musst ein # voran stellen.

Dies funktioniert:

allBirds = document.querySelector(".bird-gallery"),
listOfBirds = document.querySelector("#bird-list").innerHTML;

Hm, und wo ist da das Javascript? In einer der Javascript-Dateien, vermute ich?

Ah so. Mein erster Code funktioniert aber auch, ich habe ihn getestet.

Mit

listOfBirds = document.querySelector("bird-list");

bekommst Du nur das DOM-Element, nicht den Text darin . So funktioniert es:

<script type="text/template" id="bird-list">
        [{ "id":1, "name":"Haussperling", "latinName":"Passer domesticus", "imagePath":"resources/images/haussperling.png", "audioPath":"resources/data/audio/haussperling.ogg" },{ "id":2, "name":"Kohlmeise", "latinName":"Parus major", "imagePath":"resources/images/kohlmeise.png", "audioPath":"resources/data/audio/kohlmeise.ogg" },{ "id":3, "name":"Star", "latinName":"Sturnus vulgaris", "imagePath":"resources/images/star.png", "audioPath":"resources/data/audio/star.ogg" },{ "id":4, "name":"Amsel", "latinName":"Turdus merula", "imagePath":"resources/images/amsel.png", "audioPath":"resources/data/audio/amsel.ogg" }]
    </script>
    <script>
        listOfBirds = document.getElementById("bird-list").innerText;
        var obj = JSON.parse(listOfBirds);
        console.log(obj);
    </script>

Allerdings ist das ganze unnötig kompliziert. Dieses funktioniert genau so gut:

<script>
        var listOfBirds = [{ "id": 1, "name": "Haussperling", "latinName": "Passer domesticus", "imagePath": "resources/images/haussperling.png", "audioPath": "resources/data/audio/haussperling.ogg" }, { "id": 2, "name": "Kohlmeise", "latinName": "Parus major", "imagePath": "resources/images/kohlmeise.png", "audioPath": "resources/data/audio/kohlmeise.ogg" }, { "id": 3, "name": "Star", "latinName": "Sturnus vulgaris", "imagePath": "resources/images/star.png", "audioPath": "resources/data/audio/star.ogg" }, { "id": 4, "name": "Amsel", "latinName": "Turdus merula", "imagePath": "resources/images/amsel.png", "audioPath": "resources/data/audio/amsel.ogg" }];
    </script>
    <script>
        console.log(listOfBirds);
    </script>

Für background-image ist auch der Wert none möglich:

http://wiki.selfhtml.org/wiki/CSS/Eigen…ackground-image

Informiere dich über Mediaquries, damit ist es kein Problem.

Sehe gerade, dass das SVG ist. Dann weiß ich es auch nicht. Aber warum SVG? Das kannst Du doch problemlos mit HTML und CSS machen?