Beiträge von Sempervivum

Ich habe vor einiger Zeit mal etwas ähnliches mit jCanvas gemacht. Einen Circle-Countdown, aber das kann man leicht umstellen, um Daten anzuzeigen.

https://jsfiddle.net/Sempervivum/o4qbLzow/

Das data-Attribut legt fest, zu welchen Tag das Bild gehört, also bei data-day="14" würde das Bild zum 14. Dezember gehören. Wenn ich diese Zahl jetzt dem ersten Bild zuordne, passt es doch nicht, denn das Bild "/Adventskalender/img/fst_px/px01_1.gif" gehört doch zum 1. Dezember oder nicht? Oder ist das egal? Ich weiß ja nicht, wie die Bilder aussehen.

Danke, so etwas liest man gern!

Zitat

Also sagt man dann damit, dass das Erwartete eine Zahl die 5 Nummern lang sein muss ist. ^ und $ vor und hinter den vorgaben sagen dann aus, dass nach den 5 Nummern schluss ist.

Genau. Oder anders gesagt, die Regex passt, wenn zwischen Anfang und Ende genau fünf Ziffern stehen.

Zitat

Der Lösungsweg mit dem .match("muster") ist doch nicht so gut.

Das möchte ich entschieden bezweifeln. Das Problem ist, dass die Regex passt, wenn irgendwo fünf Ziffern hintereinander stehen. Das ist dann auch der Fall, wenn die Eingabe sechs, sieben oder hundert Ziffern enthält.

Die Regex kann man sehr leicht anpassen, so dass nicht weniger und nicht mehr als fünf Zeichen vorhanden sein dürfen:

if (plzval.match(/^[0-9]{5}$/))

Funktioniert bei mir, probiere es aus.

Zitat

match(/[0-9]{5}/) -> die / sagen aus das es beginnt und es beendet. In den [] stehen dann die zugelassenen Zahlen und in der {} Klammer steht dann die Länge der zugelassenen Zahl. Stimmt das so ?

Korrekt. Zu Regex findet man sehr viel im Netz, auch Online-Tester als Hilfe beim Entwickeln.

Zwei Probleme:

1. In Zeile 24 bist Du schon im else-Zweig der Abfrage if(plz.length === 5), d. h. die Länge ist in jedem Fall ungleich 5 und Du kommst nie in den else-Zweig in Zeile 32 hinein.

2. Die Variable "plz" ist doppelt belegt, einmal mit dem DOM-Element und dann mit dessen Value. Besser dem Value einen anderen Namen geben, z. b. "plzval".

So funktioniert es:

        window.onload = function () {
            var plz = document.getElementById("postleitzahl");
            plz.addEventListener("keyup", getJson);
            function getJson() {
                var plzval = document.getElementById("postleitzahl").value;
                if (plzval.match(/[0-9]{5}/)) {
                    plz.classList.remove("fielderror");
                    var client = new XMLHttpRequest();
                    client.open("GET", "http://api.zippopotam.us/de/" + plzval, true);

                    client.onreadystatechange = function () {
                        if (client.readyState == 4) {
                            var jsonData = client.responseText;
                            //JSON:  {"post code": "69115", "country": "Germany", "country abbreviation": "DE", "places": [{"place name": "Heidelberg", "longitude": "8.6868", "state": "Baden-W\u00fcrttemberg", "state abbreviation": "BW", "latitude": "49.4062"}]}

                            var data = JSON.parse(jsonData); // object object
                            var data = data['places'][0]['place name'];

                            document.getElementById("wohnort").value = data;
                        }
                    }
                    client.send();
                } else {
                    plz.classList.add("fielderror");
                }
            }
        }

Ich habe, statt nur die Länge abzufragen, mit einer Regex zusätzlich geprüft, ob die Eingabe auch nummerisch ist.

Zitat

Change greift dann erst, wenn was verändert wurde ?

Change triggert dann, wenn die Eingabe mit Enter bestätigt wurde. Keyup oder Input haben jedoch den Vorteil, dass man den Wert während der Eingabe überprüfen kann, so wie es jetzt der Fall ist.

Häufiger Fehler:

plz.addEventListener("keyup", getJson());

Was passiert: Da der Funktionsname getJson von einem Klammernpaar gefolgt wird, wird die Funktion sofort ausgeführt und ihr Rückgabewert zugewiesen. Das Klammernpaar muss man weg lassen, dann wird eine Referenz der Funktion zugewiesen:

plz.addEventListener("keyup", getJson);

Außerdem ist es ungünstig, hier das keyup-Event zu verwenden, da dieses ja bei jedem Tastendruck feuert, so dass die Auswertung fehl schlägt, wenn noch keine fünf Zeichen eingegeben wurden. Besser "change" verwenden oder prüfen, ob schon fünf Ziffern eingegeben wurden.

Ups, da haben sich unsere Postings überschnitten.

data.places[0].[place name];

Da sind zwei Syntaxfehler:

1. Der Punkt ist zuviel.
2. Da place name keine Variable ist, sondern ein String und weil es ein Leerzeichen enthält, muss es in Hochkommas eingeschlossen werden.

So funktioniert es:

var wohnort = data.places[0]["place name"];

1. Möglichkeit, ein Element in einem Objekt anzusprechen:

data.country

2. Möglichkeit:

data["country"]

diese Möglichkeit funktioniert auch, wenn der Schlüssel in einer Variablen steht:

var key = "country";
var country = data[key];

Mit der 1. Möglichkeit funktioniert dies nicht.

Nächster Schritt: Nur eine Funktion verwenden:

HTML:

<br>Leicht:
  <input type="radio" name="rblevel" id="leicht1" data-speedq="1000"> Mittel:
  <input type="radio" name="rblevel" id="leicht2" data-speedq="500"> Schwer:
  <input type="radio" name="rblevel" id="leicht3" data-speedq="250"> Super schwer:
  <input type="radio" name="rblevel" id="leicht4" data-speedq="100">

JS:

function setSpeed() {
    var speedq = this.getAttribute("data-speedq");
    sessionStorage.setItem('speedq', speedq);
}
leicht1.onchange = setSpeed;
leicht2.onchange = setSpeed;
leicht3.onchange = setSpeed;
leicht4.onchange = setSpeed;

Zitat

wie man das ganze Script vieleicht auch mit wenniger code hinbekommen tut

Dieses hier kannst Du einsparen, wenn Du statt Checkbuttons Radiobuttons verwendest:

    document.getElementsByName('leicht1')[0].checked =true;
    document.getElementsByName('leicht2')[0].checked =false;
    document.getElementsByName('leicht3')[0].checked =false;
    document.getElementsByName('leicht4')[0].checked =false;

Hier kannst du eine Demo sehen:

http://ulrichbangert.de/div/webentwick…ectors-box.html

Dort siehst Du auch, dass es kein Problem ist, einen formatfüllenden Verlauf mit einer Hintergrundgrafik zu erzeugen.

Kein Problem, die Tage zufällig verteilt anzulegen. Aber müsste man dann nicht auch die Bilder anders verteilen?

"/Adventskalender/img/fst_px/px01_01.gif" ist doch explizit für den 1. Dezember, usw., nicht wahr?

Nein, Du brauchst nur nur eine einheitliche CSS-Datei für alle Seiten. Das Bild wird ja im HTML eingebunden, wie ich oben geschrieben habe:

Zitat

Das wird wesentlich einfacher, wenn Du keine Hintergrundgrafik verwendest, sondern einfach ein img-Tag:

Code

1. <div id="banner_right"><img src="banner_right_contact.jpg"></div>

so auf contact.html und entspr. auf impressum.hml:

Code

1. <div id="banner_right"><img src="banner_right_impressum.jpg"></div>

usw.

Also mir erschließt sich ja nicht wirklich, was es bringen soll, so etwas einfaches mit :before bzw. : after zu machen. Erschwert unnötig das Verständnis und die Lesbarkeit. Probiere lieber den Weg, den ich beschrieben habe, so ist es wesentlich einfacher.

Mit CSS kann man nur Elemente ansprechen, aber keine einzelnen Zeichen in einem input-Feld. Mit Javascript ist es jedoch ziemlich einfach:

    <input id="input1" />
    <script>
        input1.addEventListener("keyup", function () {
            this.value = this.value.replace(/ /g, '')
                .replace(/[A-Z0-9]{4}/g, function (match) {
                    return match + ' ';
                });
        });
    </script>

Zitat

Besser gesagt kann ich statt fixed etwas anderes eingeben, denn in meiner css habe ich das background-attachement: fixed bereits im „Hauptteil“ geschrieben, sprich wenn ich es bei den mediaqueries weglasse bleibt es dort ja trotzdem bestehen.

Ja, Du kannst scroll angeben, dann ist der Parallax-Effekt weg und Hintergrund und Bild bewegen sich gleich.

Nein, Du brauchst nicht zu befürchten, dass Du nervst.

Ich empfehle, den Container nicht ganz wegzuschalten, sondern nur das background-attachment:fixed erst ab einer bestimmten Breite einzuschalten, etwa so:

@media (min-width: 600px) {
    .bannerabout {
        background-attachment: fixed;
    }
    /* usw. */
}

Allerdings wäre es besser, hier ein feature detect zu verwenden und mit Modernizr zu prüfen, ob dieses feature vom Browser unterstützt wird.

Edit: Erneut Ernüchterung: background-attachment:fixed wird offenbar von Modernizr nicht unterstützt und das Erkennen scheint generell problematisch zu sein:
https://stackoverflow.com/questions/1411…ttachment-fixed

PS: Hat denn mit dem Javascript der Parallax-Effekt auf deinem iPhone funktioniert? Liest man sich das Stackoverflow in #14 durch, so scheint das ja fraglich zu sein.

1. HTML so ändern, wie ich geschrieben habe. Bildadressen durch deine eigenen ersetzen.

2. CSS so ergänzen:

#banner_right {

float:left;

width:219px;

height:700px;

/* background:url(banner_left.png) no-repeat; */

}

#banner_right img {
    width: 100%;
    height: auto;
}

D. h. das Bild wird nicht durch CSS sondern durch HTML eingebunden.