Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item

こんにちは、はっちゃんです。 今回はinfobox.jsの使い方をご説明します。 Google Mapをサイトに埋め込む際、Google Mapから取得できるURLで iframe として表示させるのではなく、スタイルやピンの画像を自由にカスタマイズできる「Google Maps JavaScript API v3」を使用することが多いですよね。 デフォルトのメソッド、InfoWindowの使い方 生成したDOMは、InfoWindowのオプションから、contentをvalueに設定するだけで簡単に表示できます。 See the Pen infowindow by k_hatsushi (@hatsushi_kazuya) on CodePen. ですが、たとえば「枠の色を変えたいなー」と思っても、従来のInfoWindowメソッドを使用して作ったDOMだと、枠の内側にもうひとつ枠が生成

今回やりたいこと（前回の続き） 不正な入力値のとき、エラー内容をリアルタイムに表示させる 各項目の入力内容を見て、送信ボタンの非活性/活性を都度切り替える 前回は、HTML5から追加された、フォームのバリデーションに関する機能をおさらいしました。今回は、JavaScriptからフォームの要素にアクセスして、バリデーションの制御を行います。 不正な入力値のとき、エラー内容をリアルタイムに表示させる まずは、やりたいことの1つ目からみていきます。 「不正な入力値のとき、エラー内容をリアルタイムに表示させる」ためには、フォームの変更を都度検知できるようにする必要がありますね。 JavaScriptでフォームの変更を検知する JavaScriptでフォームの変更を検知するサンプルを用意してみました。 サンプルでは、form要素にchangeイベントとinputイベントの2つのイベントをつけています