Beiträge von Sempervivum

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

Sempervivum

Zitat

Da ich aber kein Profi bin hab ichs nicht geschafft, das Skript von dort so auseinanderzunehmen und die einzelnen Funktionen korrekt rauszufiltern.

Da hast Du dir unnötige Arbeit gemacht, denn man kann die Funktionen über die Optionen deaktivieren, ohne in das Skript eingreifen zu müssen:

https://datatables.net/examples/basic_init/filter_only.html

Sempervivum

Zitat

so ist das nicht korekt und nicht Valide

Dieses validiert ohne Fehler oder Warnungen:

HTML

<!doctype html>
<html lang="de">
<head>
<title>Test CSS Pos</title>
</head>
<body>
<style>
body {background-color: grey;}
</style>
<div id="testdiv"></div>
<style>
#testdiv {background-color: lightblue;}
</style>
</body>
</html>

Alles anzeigen

Sempervivum

Ich gehe davon aus, dass H_INNEN ein String ist, dann musst Du ihn in Hochkommas einschließen. Und die Syntax beim $.getJSON ist nicht ganz korrekt. So sollte es richtig sein:

Code

    var sensorID = "H_INNEN";
    $.getJSON("data.php?sensorID=" + sensorID, function(data) {

Sempervivum

Weiß nicht genau ob ich das richtig verstehe: Du hast zwei Aufrufe von $.getJSON, wobei der erste im Callback u. a. die Sensor-ID liefert? Diese willst Du dann beim anderen Aufruf des $.getJSON als URL-Parameter verwenden? Dann würde es etwa so funktionieren:

Code

$.getJSON(url1, function(data) {
    var sensorID = //hier die ID zuweisen
    $.getJSON("Sensor_data.php?sensorID=" + sensorID, function(data) {...}

Den zweiten Aufruf habe ich ins Callback geschrieben, weil sichergestellt sein muss, dass die Sensor-ID dort definiert ist.

Sempervivum

Realisieren kann man das bestimmt. Ich würde spontan datatables empfehlen:

https://datatables.net

Normaler Weise sollte es möglich sein, die Initialisierung bei jeder neuen Generierung neu durchzuführen, so dass sich das Ganze an die neue Struktur einschl. Breiten der Header-Element anpasst.

.

Sempervivum

Vermutlich meinst Du nicht die Cookies sondern den Browser-Cache: Wie man den deaktiviert wird ausführlich hier beschrieben:

https://stackoverflow.com/questions/4954…ss-all-browsers

Sempervivum

Ein Blick in die Console liefert die Erklärung:

Zitat

Mixed Content: The page at 'https://tc-hinwil.ch/webcam1' was loaded over HTTPS, but requested an insecure resource 'http://tchinwil.ddns.net/cgi-bin/guestimage.html?width=940'. This request has been blocked; the content must be served over HTTPS.

Sempervivum

Genau genommen ist es kein Array, sondern ein Objekt, wird aber in diesem Fall als ass. Array eingesetzt. Deshalb der Name arr aber die Initialisierung mit {}. Würde man ein "echtes" Array mit [] verwenden, wären die Zugriffe, wie ich sie beschrieben habe, so nicht möglich.

Beiträge von Sempervivum

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

Fixed Table Headers

Span Tag

Variable in $.getJSON

Variable in $.getJSON

Fixed Table Headers

Hello everyone :D . Cookies beim Nutzer unterbinden

iFrame geht nicht

String zu Variablenname