jQuery UI Datepickerは、フォームでの日付入力時にカレンダーから選択できるようにする、jQuery UIの中にある機能の1つです。jQuery UIには、ユーザーインターフェースに関する機能がまとめられ…
フォームでカレンダーから日付入力できるようになる「jQuery UI Datepicker」の導入手順
jQueryで$(this)の親要素・子要素・隣接要素を指定する方法
jQueryには、イベントが発生した要素を指定するための$(this)というものがあります。 例えば、以下のようなスクリプトがあったとします。 この場合、$(this)はp要素になりますので、p要素をクリックした時にp要…
クリックでサブメニューを切り替えるナビゲーションを実装する方法
メインメニューとそれぞれのメニューに対応したサブメニューがあって、メインメニューをクリックすると対応するサブメニューが表示されるナビゲーションを実装する方法をご紹介いたします。 実際の挙動については、以下デモページをご参…
親要素内でスクロールに追随する要素を実装できるjQueryプラグイン「Fixed Sticky」
Fixed Stickyは、親要素にピタッと張り付いてスクロールに追随する要素を実装できるjQueryプラグインです。 挙動については、以下デモページをご参照ください。 デモページを見る 当記事では、Fixed Stic…
jQueryを使って入力フォームのコピペを禁止する方法
jQueryを使って入力フォームのコピペを禁止する方法をご紹介いたします。 例えば、確認用メールアドレスの入力など、コピペできてしまうとその項目の意味がなくなってしまう場合に活用できます。 jQueryを使って入力フォー…
URLによって条件分岐させるjQueryの記述方法
jQueryを使って、URLに特定の文字列が含まれているかどうか、もしくはURLそのもので条件分岐させる方法をご紹介いたします。 URLによって条件分岐させるjQueryの記述方法 例えば、URLに「hogehoge」と…
jQueryを使ってページ内リンクをスムーススクロールさせる方法
jQueryを使って、ページ内リンクをスルスルっとスムーススクロールさせる方法をご紹介いたします。紹介するコードをコピペするだけで、ページ内リンクをクリックした時の移動が滑らかになります。 jQueryを使ってページ内リ…
クリックやタップで開いたり閉じたりするFAQを実装する方法
jQueryを使ってクリックやタップで開いたり閉じたりするFAQを設置する方法をご紹介いたします。 動きについては、以下デモページをご参照いただければと思います。 デモページを見る 「質問の答えを見る」をクリックすると、…
スクロールの途中から追尾して指定した位置で消える要素を設置する方法
スクロールの途中からついてきて、特定の位置まできたらフェードアウトする要素を設置する方法をご紹介いたします。 挙動については、文字で説明するのは難しいので、以下のデモページをご参照いただければと思います。 デモページを見…
スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法
サイトを表示した時に、スクロール量に応じて要素をフェードイン表示させる方法を紹介したいと思います。スクロールして要素が可視範囲に入ったら、フェードインしてふわっと表示させます。 挙動については、デモページを用意しましたの…