Beiträge von Sempervivum

Sempervivum

Da haben wir ja einen gemeinsamen Hintergrund. Ich habe auch mit Assembler angefangen und mich mit Leiterplatten beschäftigt. Ist aber lange her ...

Sempervivum

Hallo Basti, gut gemacht! Bei der Ermittlung der Koordinaten getAbsoluteX und getAbsoluteY hättest Du vorteilhaft nur eine Funktion verwenden und x und y in einem Objekt zurück geben können, wie wir es in anderem Zusammenhang mal besprochen hatten.

Hallo Yamah, dann poste noch Mal den neuen Code und das CSS, das dort eingebunden wird.

Sempervivum

Ich habe die Developertools von meinem Browser Opera verwendet, da ist ein Debugger eingeschlossen. Gibt es bei jedem gängigen Browser.

Sempervivum

Bei diesem:

HTML

<html>
<link href="MyGame.css" type="text/css" rel="stylesheet">
<head>
<title>
MyAnimation
</title>
<body>
<center>
<font face="arial" color="White" size="7">
Black'n
<font face="arial" color="Black" size="7">
White
</font>
</center>
<style>
</style>
<script>
</script>
</body>
</head>
</link>
</html>

Alles anzeigen

ist die Struktur völlig daneben:

Kein Doctype, </link> überflüssig, <link> gehört in den Head, schließendes </head> fehlt, <center> veraltet.

So wäre die Struktur richtig:

HTML

<doctype html>
<html>
<head>
<title>
MyAnimation
</title>
<link href="MyGame.css" type="text/css" rel="stylesheet">
</head>
<body>
<font face="arial" color="White" size="7">
Black'n
<font face="arial" color="Black" size="7">
White
</font>
<style>
</style>
<script>
</script>
</body>
</html>

Alles anzeigen

Sempervivum

Der Debugger bringt es an den Tag: Die Reihenfolge stimmt nicht: Der Code für die Validierung wird ausgeführt bevor die Combobox erzeugt wird. Lösung, indem Du beide Codes in je einer Funktion unter bringst und diese in der richtigen Reihenfolgen aufrufst.

html-seminar.de/woltlab/attachment/1238/

Sempervivum

Zitat

Alleine funktioniert das Script, bei mir jedoch nicht.

Wie meinst Du das? Ja, es funktioniert einwandfrei. Funktioniert es bei dir nicht, wenn Du es in eine andere Seite einbettest? Dann poste die URL dieser Seite, damit man den Fehler finden kann.

Sempervivum

Hallo und willkommen im Forum,

bei deiner Testseite steige ich leider nicht durch.

Zitat

den validator konnte ich leider so nicht mit einbinden, daher gibt es als Datei einzeln dazu.

Eine solche Datei kann ich nicht finden. Hast Du statt dessen das JS des Validators inline in die HTML-Datei kopiert?

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.

Sempervivum

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:

Code

<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>

Alles anzeigen

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.

Sempervivum

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.

Sempervivum

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

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));
          var bildinner = document.createElement("div"); // dies hatte ich vergessen
          bildinner.id ="bildinner";
          bildunten.appendChild(bildinner);

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

Sempervivum

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:

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)
          bildinner.id ="bildinner";
          bildunten.appendChild(bildinner);

und dann das:

Code

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.

Sempervivum

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

Sempervivum

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

Sempervivum

So funktioniert es:

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

Sempervivum

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.

Sempervivum

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

Sempervivum

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

Sempervivum

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

Code

$("#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.

Sempervivum

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:

Code

<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)">

Code

         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()
            }
        }

Alles anzeigen

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

Code

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

Beiträge von Sempervivum

Combobox mit jquery und Formvalidator

Objektsteuerung

Combobox mit jquery und Formvalidator

Objektsteuerung

Combobox mit jquery und Formvalidator

Objektsteuerung

Combobox mit jquery und Formvalidator

Objektsteuerung

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

JQuery tauscht Bild-SRC aus

JQuery tauscht Bild-SRC aus

Adventskalender