JavaScript / jQuery | IT女子のお気に入りフォルダIT女子のお気に入りフォルダ

ヘッダー固定時のページ内外リンクのずれ解消(もちろん、スムーススクロール)

position:fixedで固定している時にアンカーリンク（ページ内もページ外も）で移動後の位置がヘッダーの高さ分だけずれてしまう対応のメモです。ページ内リンクの場合はスムーススクロールも対応します！ cssだけで対応...

ラジオボタンでどの項目が選択されているかをわかりやすくしたいときに有効だと思います。注意点は、ラジオボタン選択時に動作するので、デフォルトで選択されている項目の親要素ラベルには事前にクラスを付加しておく必要があります。...

javaScriptのデバッグにはコンソールへのログ出力が割と何でも出力できて便利。他にもいろいろ便利な出力があるようです。こちらのサイトが詳しくて参考になります。 JavaScript開発のデバッグを加速するlog...

JavaScriptでいろいろ操作したHTMLをリロードせずにロード時の表示状態に戻す方法です。戻したい箇所のロード時のHTMLを覚えておいて、セットするだけです。例）body内をボタン押下で元に戻す。〈JavaS...

JavaScriptでもcss同様にウィンドウサイズでポイントを切り替える方法です。事前にjQuery本体の読み込みが必要です。（1.12.4で試しました） 8〜12行目で500pxを切り替えポイントとして、500px...

電話番号の表記において、スマホサイトではtelリンクを貼ればタップで発信することができるので便利です。でも、HTMLソースで電話番号にtelリンクを記述してしまうと、PCサイトの場合は「プロコトルが不明」「開けません」...

ドロワーメニューの実現方法はいろいろありますが、これは、少しのcssとJavaScriptで実装できるのでおすすめです。よく使うと思うので備忘録を兼ねてメモ。 ※cssはわかりやすいように、ドロワーメニューの実装に必要な...

メインウィンドウ（親ウィンドウ）からサブウィンドウ（子ウィンドウ）を開き、子ウィンドウから親ウィンドウに値を渡して、子ウィンドウを閉じる動き。言葉で動きを説明してもわかりにくいのでデモサイトを用意してみました。デモは...

Result jQuery css .slideContentはdisplay: none;としておきます。あとは見た目の調整です。 .openでcursor: pointer;しておくと親切だと思います。 HTML

フォームでユーザーにヘルプを表示するjQueryプラグインです。ヘルプを表示する方法はいろいろありますが、今回はテキストフィールドへのフォーカスでヘルプが表示される方法です。 jQuery FormHelp 動作サンプ...

タブメニューを実現する方法は検索すればいろいろ出てきますが、これが一番シンプルなんじゃないかなーと思います。 Result jQuery css HTML サンプルではタブを3つとしましたが、この方法であれば何個でも増や...

話題のTwitter Bootstrap。このブログもTwitter Bootstrapを使用しています（2013年9月現在）。やっぱり何かと便利です。今日は、そのTwitter Bootstrapでタブを使ったときに少...