Beiträge von Sempervivum

  • Json mit javascipt bearbeiten

    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.

  • Json mit javascipt bearbeiten

    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:

    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.

  • Json mit javascipt bearbeiten

    Häufiger Fehler:

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

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

  • Json mit javascipt bearbeiten

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

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

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

    Mit der 1. Möglichkeit funktioniert dies nicht.

  • Kleines Spiel Script "Javascript"

    Nächster Schritt: Nur eine Funktion verwenden:

    HTML:

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

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

  • Kleines Spiel Script "Javascript"

    Zitat

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

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

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

  • Adventskalender

    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?

  • Design verschiebt sich bei mehr Text

    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.

  • Responsive Webseite

    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.

  • Responsive Webseite

    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:

    Code
    @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.

  • Design verschiebt sich bei mehr Text

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

    2. CSS so ergänzen:

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

  • Design verschiebt sich bei mehr Text

    Zitat
    Code
    Wenn man auf die Startseite kommt, hat man im Mainbereich eine Grafik auf der rechten Seite. Wie kann ich das einstellen / coden das auf jeder anderen Seite die geöffnet wird ( zb kontakt, news ect ) eine andere Grafik in der selben Größße erscheint ?

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

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

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

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

    usw.

  • Javascript Array überprüfen mit Array.isArray

    Zitat

    Die Rekursivefunktion ist erstmal Zweitrangig.

    Das scheint mir eher nicht so, denn das ganze Iterieren und die Rekursionen funktionieren in deinem Code nicht richtig. So geht es:

  • Responsive Webseite

    PS: Ernüchterung:

    Ein anderer Thread bei Stackoverflow:

    https://stackoverflow.com/questions/1904…he-page-on-ios7

    sagt:

    Zitat

    Mobile browsers try to save battery wherever they can. That's why mobile browsers delay the execution of JavaScript while you are scrolling. iOS in particular does this very aggressively and completely stops JavaScript.

    aber auch:

    Zitat

    I would recommend looking into scrollr (https://github.com/Prinzhorn/skrollr). It's a parallax library allowing you to achieve the same effect. They have carefully considered issues with mobile devices too

    D. h. wenn die erste Lösung, die ich eben gepostet habe, auf dem iPhone nicht funktioniert, könnte man dieses testen.

  • Responsive Webseite

    Ich habe dieses gefunden:

    https://stackoverflow.com/questions/2044…image-with-ios7

    und die Lösung der DEMO aus der ersten Antwort übernommen, zunächst nur für "about" und "services". Funktioniert einwandfrei:

    CSS:

    Dies muss man bei allen Alternativen der Mediaqueries machen.

    JS:

    Kleiner Nachteil noch: Das Seitenverhältnis der Hintergrundbilder wird verzerrt. Kann ich aber noch mit wenigen zusätzlichen Berechnungen beheben.

  • Adventskalender

    *smile* oh ja, jetzt kommt wieder die Zeit der Adventskalender ...

    Mit dem Date-Objekt warst Du schon auf dem richtigen Weg. Was für den Vergleich noch fehlt, ist die Nummer des Tages für das Bild. Die habe ich mal durch Javascript hinzu gefügt, damit man es nicht von Hand editieren muss. Dies sollte funktionieren:

    Zitat

    Und wenn man am nächsten Tag die Seite aufruft, dann sollen die bereits angeklickten Bilder sichtbar bleiben..

    Das kannst Du erreichen, indem Du im Local-Storage speicherst, wenn ein Türchen geöffnet wurde.