Beiträge von Sempervivum

Sempervivum

Kann ich mit Chrome nicht reproduzieren. Hast Du das Problem inzwischen gelöst?

Sempervivum

Geht nicht gibt's nicht:

https://stackoverflow.com/questions/6366…ts-by-classname

Allerdings wird das Ganze dann so kryptisch, dass man bzgl. Lesbarkeit kaum noch einen Vorteil gegenüber Regex hat.

Sempervivum

Schau mal, ob dir diese Funktion hilft:

Code

        function formatStr(val) {
            var newstr = "00" + val;
            return (newstr.substr(newstr.length - 2));
        }

Sempervivum

Ich bin zwar mit Joomla-Modulen nicht vertraut aber bei Javascript/jQuery-Bibliothen/Plugins gibt es häufig eine Vielzahl von Optionen, mit denen man alles erdenkliche steuern und konfigurieren kann. Hast Du bei deinem Modul genau nachgesehen, ob es etwas derartiges gibt?

Sempervivum

Oder gib den Imagewrappern pointer-events:none:

Code

        .imgwrapper {
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 600px;
            transform-origin: center center;
        }

Sempervivum

Ich denke, jetzt verstehe ich: Die Container der kleinen Bilder liegen ja über dem Centerimg und überdecken es. Verschiebe das a-tag mit dem Centerimg an das Ende, hinter die Divs.

Sempervivum

Du brauchst nur das a-Tag um das centerimg herum zu legen, dann sollte es funktionieren. Wichtig ist, dass diese Bild die ID centerimg hat:

Code

<a data-toggle="modal" data-target="#step1"><img src="images/centerimg.png" id="centerimg"></a>

Sempervivum

Zitat

wie genau fügt man den in die Javascript Version weitere bilder ein?

Die Anzahl der Bilder kannst du mit der Variablen nrimg einstellen. Alles andere wird dann automatisch berechnet. Aber ich schrieb ja oben schon, dass Du wahrscheinlich verschiedene Bilder haben willst, Dann musst Du diese in einem Array ablegen und in der for-Schleife in das HTML eintragen. Ich wollte dir ja auch noch etwas zu tun lassen ;D

Zitat

Und ist es möglich den abstand der kleinen bilder zum großen zu verkleinern oder ist das durch die Bildgröße vorgegeben?

Ja, der Abstand wird durch die Größe der beiden Container festgelegt:

Code

        #rotwrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: lightblue;
            width: 600px;
            height: 600px;
            position: relative;
        }

und

Code

        .imgwrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 600px;
            transform-origin: center center;
        }

Wenn Du width und height verkleinerst, rücken die kleinen Bilder näher an das zentrale.

Und diese musst Du anpassen:

Code

        #rotwrapper .imgwrapper img {
            width: 74px;
            height: 74px;
            position: absolute;
            top: 0;
            left: 263px;
        }

und zwar left, so dass das Bild genau in der Mitte ist. Hier: 600px/2 - 74px/2

Sempervivum

Mein zweiter Ansatz:

Die Werte werden automatisch mit Javascript berechnet und das CSS und das HTML generiert

Templates und CSS:

Code

    <template id="anitpl">
        .imgwrapper.nr{{nr}} {
        animation: ani{{nr}} 2s infinite linear;
        }

        @keyframes ani{{nr}} {
        from {
        transform: rotate({{start}}deg);
        }

        to {
        transform: rotate({{end}}deg);
        }
        }
    </template>
    <template id="rottpl">
        <div class="imgwrapper nr{{nr}}">
            <img src="images/moon-transparent.png">
        </div>
    </template>
    <style id="dynstyle"></style>
    <style>
        #rotwrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: lightblue;
            width: 600px;
            height: 600px;
            position: relative;
        }

        #rotwrapper img#centerimg {
            width: 300px;
            height: 300px;
        }

        #rotwrapper .imgwrapper img {
            width: 74px;
            height: 74px;
            position: absolute;
            top: 0;
            left: 263px;
        }

        .imgwrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 600px;
            transform-origin: center center;
        }
    </style>

Alles anzeigen

HTML und Javascript:

Code

    <div id="rotwrapper">
        <img id="centerimg" src="images/earth-transparent.png">
    </div>
    <script>
        var vdynstyle = document.getElementById("dynstyle");
        var vanitpl = document.getElementById("anitpl");
        var vrottpl = document.getElementById("rottpl");
        var vrotwrapper = document.getElementById("rotwrapper");
        var nrimg = 13;
        for (var i = 0; i < nrimg; i++) {
            var start = 360 / nrimg * i;
            var end = 360 + start;
            var ani = vanitpl.innerHTML.replace("{{start}}", start)
                .replace("{{end}}", end)
                .replace(/\{\{nr\}\}/g, i + 1);
            vdynstyle.innerHTML += ani;
            var rotimg = vrottpl.innerHTML.replace("{{nr}}", i + 1);
            vrotwrapper.innerHTML += rotimg;
        }
    </script>

Alles anzeigen

Was noch fehlt: Unterschiedliche Bilder. Am besten die URLs in einem Array ablegen und in das Template einfügen.

Sempervivum

Ja, das ist mit CSS möglich. Mein erster Ansatz

nur CSS
Werte müssen händisch berechnet werden

CSS:

Code

<style>
        #rotwrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: lightblue;
            width: 600px;
            height: 600px;
            position: relative;
        }

        #rotwrapper img#centerimg {
            width: 300px;
            height: 300px;
        }

        #rotwrapper .imgwrapper img {
            width: 74px;
            height: 74px;
            position: absolute;
            top: 0;
            left: 263px;
        }

        .imgwrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 600px;
            transform-origin: center center;
        }

        .imgwrapper.nr1 {
            animation: ani1 2s infinite linear;
        }

        .imgwrapper.nr2 {
            animation: ani2 2s infinite linear;
        }

        @keyframes ani1 {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes ani2 {
            from {
                transform: rotate(calc(27.7deg));
            }

            to {
                transform: rotate(387.7deg);
            }
        }
    </style>

Alles anzeigen

HTML:

Code

<div id="rotwrapper">
        <img id="centerimg" src="images/earth-transparent.png">
        <div class="imgwrapper nr1">
            <img src="images/moon-transparent.png">
        </div>
        <div class="imgwrapper nr2">
            <img src="images/moon-transparent.png">
        </div>
    </div>

Das muss dann erweitert werden bis es 13 Bilder sind.

Sempervivum

Wenn die Seite eine vollständige HTML-Seite ist, bietet es sich als Alternative an, sie mit DOMDocument zu parsen und sie dann auszuwerten.

Sempervivum

Welchen Browser benutzt Du denn? IE unterstützt das Download-Attribut nicht:
https://caniuse.com/#feat=download

Wenn es das nicht ist, musst Du es irgend wie falsch anwenden. Poste mal deinen Code.

Sempervivum

Dann probiere mal, ob Du mit dieser Funktion zum Ziel kommst:

Code

function summieren() {
    var outputs = document.querySelectorAll(".divdice p[id^='output']");
    var sum = 0;
    for (var i = 0; i < outputs.length; i++) {
        var content = outputs[i].innerHTML;
        if (content != "") sum += parseInt(content);
    }
    document.getElementById("outputsumme").innerHTML = sum;
}

BTW: Ich habe da auch etwas mit Objekten experimentiert:

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Würfelspiel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/indexDestop2.css">
    <link rel="stylesheet" type="text/css" media="(max-width: 800px)" href="css/indexMobil2.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <template id="dicetpl">
        <div class="divdice" id="divdice{{nr}}">
            <img src="{{img}}">
            <h1 class="h1wuerfel">{{title}}</h1>
            <p class="output"></p>
            <button class="btn">Los!</button>
        </div>
    </template>
</head>

<body>
    <!-- img simon -->
    <div class="divsimon">
        <img class="imgsimon1" src="picture/simon1.jpeg">
        <img class="imgsimon2" src="picture/simon3.jpeg">
    </div>
    <div id="dicecontainer"></div>
    <div id="summary">
        <div>
            <h2>Ausgabe der Werte der Würfel</h2>
            <ul id="sumlist"></ul>
        </div>
        <div>
            <h2>Ausgabe der Summe der Würfel</h2>
            <p id="outsum"></p>
        </div>
    </div>

    <div class="divsimon">
        <img class="imgsimon1" src="picture/simon1.jpeg">
        <img class="imgsimon2" src="picture/simon3.jpeg">
    </div>
    <script>
        function Sum() {
            var list = $("ul#sumlist");
            var outsum = $("#outsum");
            var values = [];
            return {
                createVal: function (nr, title) {
                    values[nr] = 0;
                    list.append('<li>' + title + ': <span id="val' + nr + '"></span></li>');
                },
                reportVal: function (nr, val) {
                    values[nr] = val;
                    list.find("#val" + nr).text(val);
                    sum = 0;
                    values.forEach(function (item, idx) {
                        sum += item;
                    });
                    outsum.text(sum);
                }
            }
        }
        function Dice(min, max, title, pic, nr, sum) {
            sum.createVal(nr, title);
            var val = 0;
            function randomNumber(min, max, out) {
                var rnd = Math.floor(Math.random() * (max - min + 1)) + min;
                out.text(rnd);
                val = rnd;
                sum.reportVal(nr, val);
            }
            var thehtml = $("#dicetpl").html();
            thehtml = thehtml.replace("{{nr}}", nr)
                .replace("{{img}}", pic)
                .replace("{{title}}", title);
            var thedice = $(thehtml);
            var out = thedice.find(".output");
            thedice.find(".btn").on("click", function () { randomNumber(min, max, out) });
            $("#dicecontainer").append(thedice);
        }
        var thesum = new Sum();
        var dice1 = new Dice(1, 4, 'Würfel 1-4', "picture/picwuerfel4.jpg", 1, thesum);
        var dice2 = new Dice(1, 6, 'Würfel 1-6', "picture/picwuerfel6.jpg", 2, thesum);
        var dice3 = new Dice(1, 8, 'Würfel 1-8', "picture/picwuerfel8.jpg", 3, thesum);
        var dice4 = new Dice(1, 10, 'Würfel 1-10', "picture/picwuerfel10.jpg", 4, thesum);
        var dice5 = new Dice(1, 12, 'Würfel 1-12', "picture/picwuerfel12.jpg", 5, thesum);
        var dice6 = new Dice(1, 20, 'Würfel 1-20', "picture/picwuerfel20.jpg", 6, thesum);
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Der Ansatz mit location.hash ist schon gut. Du kannst jedoch im HTML keine Javascript-Variable verwenden. Versuche dies:

Code

<body>
    
    <img id="dasbild">
<script>
    var neu = location.hash.replace("#","");
    document.getElementById("dasbild").src = neu;
</script>
</body>

Sempervivum

Anders als chrisee82 schlage ich vor, bei jedem Würfeln die komplette Summe neu zu berechnen, dann muss man sich um das Subtrahieren, wenn schon einmal gewürfelt wurde, nicht kümmern.

Code

Ich habs probiert, bekomm es aber nicht hin.

Dann poste doch noch Mal den Stand, den Du jetzt hast.

Sempervivum

Dieses address.street verursacht einen Syntaxfehler. Versuch ins Blaue, dies in Hochkommas einzuschließen, funktioniert:

Code

        headings: {
         name: 'Name',
         username: 'Username',
         'address.street': 'Street',
         'address.suite': 'Suite'
       },

Sempervivum

Selfhtml ist immer eine gute Adresse für solche Fragen:

https://wiki.selfhtml.org/wiki/HTML/Text…le_Verweisziele

Sempervivum

Dann ist es kein Wunder, siehe z. B. hier:

https://www.chip.de/downloads/Safari_27264736.html

Sempervivum

Safari auf Mac oder Safari auf Windows?

Sempervivum

Mit dem einfachen Einbetten durch iFrame wirst Du da nicht weiter kommen, sondern Du wirst die Javascript-API von Youtube verwenden müssen:

https://developers.google.com/youtube/iframe_api_reference?hl=de

Beiträge von Sempervivum

Full Page js - Video Background - Mac & Chrome Fehler! - gelöst

Div Inhalt mittels der Funktion preg_match herausfinden

Timer (mitlaufende Uhr) zweistellig anzeigen

HTML LInk in neuem Fenster ohne target

mehrere kleine Bilder um ein großes Bilde rotieren lassen.... CSS ?

mehrere kleine Bilder um ein großes Bilde rotieren lassen.... CSS ?

mehrere kleine Bilder um ein großes Bilde rotieren lassen.... CSS ?

mehrere kleine Bilder um ein großes Bilde rotieren lassen.... CSS ?

mehrere kleine Bilder um ein großes Bilde rotieren lassen.... CSS ?

mehrere kleine Bilder um ein großes Bilde rotieren lassen.... CSS ?

Div Inhalt mittels der Funktion preg_match herausfinden

Download

Javascript Würfel, Summe addieren und Werte in Liste ausgeben

Variable src Bildquelle per URL

Javascript Würfel, Summe addieren und Werte in Liste ausgeben

Vuetable headings anpassen

Download

Safari align items center funktoniert nicht

Safari align items center funktoniert nicht

Youtube embedded Link wenn video fertig gespielt hat automatisch weiter