Beiträge von Sempervivum

Zitat

Dann habe ich im Internet ein paar standart Scripts in den Editor kopiert, was auch nicht klappte.

Man findet allerdings einige Skripts, die so etwas realisieren. Suche noch einmal eines aus, von dem Du glaubst, dass es passt und poste den Code wenn es nicht funktioniert.

Wenn Du nur einen Kreis bewegen willst, reicht es aus, wenn Du eine Lösung mit HTML, CSS und Javascript nimmst. Soll das Spiel später etwas ausgefeilter werden, solltest Du überlegen, ob Du gleich mit Canvas oder SVG anfängst, jeweils mit einer Bibliothek wie z. B. jCanvas oder d3.js für SVG.

Was das 10x10-div betrifft, zwei Empfehlungen:

1. Vergiss document.write, nicht nur, weil es in Userscript nicht geht, sondern weil das Ergebnis auch sonst schwer zu durchschauen ist.

2. Verwende absolute Positionierung nur, wenn es unbedingt nötig ist, z. B. weil Du Elemente übereinander anordnen willst, wie bei der Animation. Häufig schafft sie mehr Probleme als sie löst.

Versuche dies:

<script>
        var ff = document.createElement("div");
        ff.id = 'ff';
        document.getElementsByTagName('body')[0].appendChild(ff);
        var nrcols = 10, nrrows = 10;
        for (var i = 0; i < nrrows; i++) {
            var row = document.createElement("div");
            ff.appendChild(row);
            for (var j = 0; j < nrcols; j++) {
                var box = document.createElement("div");
                box.className = "gridbox";
                row.appendChild(box);
            }
        }
    </script>
    <style>
        .gridbox {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: top;
        }
        #ff div:nth-child(odd) .gridbox:nth-child(odd) {
            background-color: blue;
        }
        #ff div:nth-child(odd) .gridbox:nth-child(even) {
            background-color: lightgray;
        }
        #ff div:nth-child(even) .gridbox:nth-child(even) {
            background-color: blue;
        }
        #ff div:nth-child(even) .gridbox:nth-child(odd) {
            background-color: lightgray;
        }
    </style>

Das Wechselmuster habe ich mal mit CSS gemacht. In diesem Fall könnte man es auch erzeugen, indem man mit dem Skript verschiedene Klassen für odd und even anlegt.

Zitat

einmal bild wo mal ein bild rein soll und bildunten wo animierter kram rein kommt

Verstehe, Du brauchst ein zusätzliches Bild, dann ist es natürlich OK. Hat dann aber nichts mit der Animation zu tun. Die spielt sich mit #bildunten und#bildinner ab.

Sorry, ich habe das Erzeugen von #bildinner vergessen. So muss es aussehen:

          var bild = document.createElement("div");
          bild.id ="bild"
          document.getElementsByTagName('body')[0].appendChild(bild);
          var bildunten = document.createElement("div");
          bildunten.id ="bildunten";
          document.getElementsByTagName('body')[0].appendChild(bildunten));
          var bildinner = document.createElement("div"); // dies hatte ich vergessen
          bildinner.id ="bildinner";
          bildunten.appendChild(bildinner);

d. h. #bildinner muss innerhalb von #bildunten geschachtelt sein.

Nicht ganz, Du musst dieses:

Zitat

Code

          var bild = document.createElement("div");
          bild.id ="bild"
          document.getElementsByTagName('body')[0].appendChild(bild);
          var bildunten = document.createElement("div");
          bildunten.id ="bildunten"
          document.getElementsByTagName('body')[0].appendChild(bildunten)

durch dieses ersetzen:

          var bild = document.createElement("div");
          bild.id ="bild"
          document.getElementsByTagName('body')[0].appendChild(bild);
          var bildunten = document.createElement("div");
          bildunten.id ="bildunten";
          document.getElementsByTagName('body')[0].appendChild(bildunten)
          bildinner.id ="bildinner";
          bildunten.appendChild(bildinner);

und dann das:

addGlobalStyle('#bildinner { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url('+urlbild+') 0 0 no-repeat;animation: rot '+tempo+'.'+tempoplus+'s linear infinite;} ');

Kein Ahnung, wofür Du #bild brauchst.

Glaube nicht, dass es daran liegt, dass es ein Userskript ist. Poste doch mal deinen neuen Code oder aktualisiere ihn dort bei greasyfork.

Beim Fiddle funktionieren die Eventlistener nicht, wenn man sie inline notiert, da die Funktionen nicht global sind, sondern im Scope von body.onload liegen.

So funktioniert es:

https://jsfiddle.net/Sempervivum/6kp9xm5b/5/

Das Problem ist, dass die Animation in dem Pseudo-Element :before läuft und dass man dieses nicht ohne weiteres mit Javascript ansprechen kann:

https://stackoverflow.com/questions/1778…tor-with-jquery

Es dürfte aber kein Problem sein, statt dieses Pseudoelementes ein normales div mit den selben Eigenschaften zu nehmen.

Bist Du sicher, dass Du auf dem richtigen Element arbeitest? Die Animation muss bei #bildunten laufen.

Ja, so geht es auch. Ich dachte eher an die Möglichkeit, dass der String auch "_x400" oder "-x600" lauten könnte.

Die Erweiterung kannst du sehr leicht mit der Funktion replace() entfernen:

$("#grossansicht").attr("src", $(this).attr("src").replace("_x500", ""));

Das setzt voraus, dass der String immer exakt gleich ist. Wenn nicht, muss man ihn mit einer Regex angeben.

Hängt das mit deinem früheren Wunsch zusammen, die Bilder, die angeklickt wurden, bei einem späteren Aufruf der Seite gleich zu öffnen?

Ich empfehle, die URL des zweiten Bildes ebenfalls in einem data-Attribut zu speichern und in swichImage darauf zuzugreifen:

<img src="/Adventskalender/img/fst_px/px01_01.gif" data-day="7"
 data-img="/Adventskalender/img/scd_px/px02_01.gif" name="image" onclick="switchImage(this)">

         function switchImage(img) {
            now = new Date();
            day = now.getDate();
            month = now.getMonth() + 1;
            if (month == 11 && day >= img.getAttribute("data-day")) {
                var imgSrc = img.getAttribute("data-img");
                if (imgSrc != "none") {
                    img.src = imgSrc;
                }
                
            } else {
                msg=window.open("schade.html", "msg", 'scrollbars=no,width=400,height=350,left=100,top=100')
                msg.focus()
            }
        }

Dann kannst Du für einen bestimmten Tag das Bild folgender Maßen öffnen:

switchImage(document.querySelector("img[data-day='7']");

Zitat

das was du verlinkt hast das hatte ich schon so gut wie alles probiert aber nix macht das was ich meine

Ich dachte, dies sei das, was Du meinst:

https://jsfiddle.net/Sempervivum/6kp9xm5b/2/

Genau nach der verlinkten Anleitung.

Leider lehnt Pixabay das Einbinden ab.

Ich empfehle dir, von dem Programmieren von Animationen "zu Fuß" wegzugehen. Damit machst Du es dir unnötig schwer.

1. Schritt: Mache dich mit den Animationen von jQuery vertraut.

2. Schritt: Mache dich mit CSS3-Animationen vertraut.

Mit beiden funktioniert es, ohne dass Du dich mit Timern befassen musst.

Es ist nicht unbedingt immer von Vorteil, Elemente dynamisch mit Javascript anzulegen. Bei deinem Fiddle wäre es viel übersichtlicher, das div und das Menü darin im HTML-Text zu notiereren.

Mache dich mit den Developertools deines Browsers vertraut. Die sagen sofort, dass bei dem Fiddle die Variable border nicht definiert ist.

Google findet z. B. dieses:

https://www.sitepoint.com/css3-transform-background-image/

Etwas tricky mit :before, aber sollte funktionieren.

So etwas habe ich vor längerer Zeit auch Mal kodiert.

Javascript:

                var canvas = document.getElementById('mycanvas');
                var dataURL = canvas.toDataURL();
                $.ajax({
                    type: "POST",
                    url: "savepic.php",
                    data: { img: dataURL }
                }).done(function (msg) {
                    alert(msg);
                });

savepic.php:

<?php
 
   $img = $_POST['img'];
   
   if (strpos($img, 'data:image/png;base64') === 0) {
       
      $img = str_replace('data:image/png;base64,', '', $img);
      $img = str_replace(' ', '+', $img);
      $data = base64_decode($img);
      $file = 'uploads/img'.date("YmdHis").'.png';
   
      if (file_put_contents($file, $data)) {
         echo "Der Canvas wurde gespeichert als $file.";
      } else {
         echo 'Der Canvas konnte nicht gespeichert werden.';
      }   
     
   }
?>

Wie ich sehe, sieht dein PHP meinem sehr ähnlich, wahrscheinlich aus der selben Quelle gefischt.

bildunten.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/09/08/20/52/milky-way-1655504_960_720.jpg");'

Das ist fast richtig, nur das ";" ist falsch platziert. Es gehört ganz ans Ende. Anders als bei einer CSS-Definition braucht man es beim Zuweisen mit Javascript nicht.

bildunten.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/09/08/20/52/milky-way-1655504_960_720.jpg")';

Und die inneren Hochkommas sind optional weil man ja schon die Klammern als Begrenzer hat, d. h. so funktioniert es auch:

testbg.style.backgroundImage = 'url(https://cdn.pixabay.com/photo/2016/09/08/20/52/milky-way-1655504_960_720.jpg)';

Zitat

da aber das bil das gedreht wird um einiges grösser sein muss,damit es nicht auffallen tut das es ein bild ist habe ich das problem das der div mit wachsen tut am bild.. wie unterbinde ich das das das div die 200 mal 200 pixel nicht übertrift,aber trotzdem grösser ist als das div ..

Ich hoffe, ich verstehe es richtig: Wenn Du die Größe des div fest definierst, sollte es sich nicht an das Bild anpassen.

Zitat

das der div bei grösseren bilder nicht scrollbar ist ist doch overflow:none; oder was muss da stehen

Auch hier hilft es, eine Anleitung zu lesen:

https://wiki.selfhtml.org/wiki/CSS/Eigen…nzeige/overflow

Am besten machst Du mal ein Fiddle von dem, was Du bisher hast.

Zitat

ist es heutzutage überhaupt noch sinnvoll data:image anzulegen??? das internet ist so schnell das das wohl nicht mehr viel ausmacht ,oder ist das doch noch ein grosser zeit gewinn ????

Was meinst Du hier? Solch HTML, wo ein Bild als Data-URL bzw. kryptische Zeichenfolge kodiert ist und inline im HTML-Text steht, ohne dass eine externe Datei geladen werden muss?

Dafür kann es andere Gründe geben, vor allem um die Handhabung von HTML-Dateien zu erleichtern, denn werden alle Bilder auf diese Weise eingebettet, braucht man sich nicht um externe Dateien zu kümmern.

Ich hatte z. B. einmal in einem Forum eine Anfrage, wo jemand eine HTML-Datei an Personen verteilen wollte, die keine Computerkenntnisse haben.

Zitat

wie arbeitet man mit querySelector bzw was macht das genau

Google kaputt?

https://wiki.selfhtml.org/wiki/JavaScrip…t/querySelector

Zitat

document.getElementById(1)

ich dachte man darf keine id mit zahlen beginnen,oder wahr das nur bei variabeln?? ist id="1" also ok ????

Das ist eine interessante Frage. Bei HTML5 ist es tatsächlich zulässig, dass eine ID mit einer Ziffer beginnt. Es gibt aber ein großes "aber", denn für CSS trifft das nicht zu. Auch wenn man querySelector() verwendet, funktioniert es nicht, weil der Parameter ein Selektor ist, der den Regeln von CSS folgt. Daher ist es besser, wenn man generell dabei bleibt, dass IDs nicht mit einer Ziffer beginnen.

Zitat

var width = (ZONEBASE_URL == "")?70:85;

Zitat

wasmacht das fragezeichen da und was kann das hohe fusball ergebniss da zu bedeuten haben ???

Das kannst Du z. B. hier nachlesen:

https://wiki.selfhtml.org/wiki/JavaScrip…er-Oder-Abfrage