Javascriptスニペット
Javascriptスニペット [JS]iPadでPCサイトを表示するためのスクリプト
iPadでPCサイトを表示するためのスクリプト
jQuery [jQuery]スクロールしたらページ下部からボタンをスライドイン表示
スクロールしたらページ下部から要素（.footer_button）をスライドイン表示 スクロールしたらページ下部からpagetopボタン（.pagetop）をスライドイン表示
jQuery [jQuery]ページ内リンクをスムーススクロールさせる方法
jQuery
jQuery [jQuery]checkboxによる一括チェックと一括解除サンプル
jQuery HTML デモ $(function(){$('input').on('change', function() {$('input.check').prop('checked', this.checked);});}); 一括...
Javascriptスニペット [JS]特定の要素の<a>タグを除外してスムーススクロールをする方法
jQueryのスムーススクロールを使うことはよくあるのではないかと思いますが、今回は指定したクラスの<a>タグをスムーススクロールから除外する方法を紹介させていただきます。 特定の要素の<a>タグを除外してスムーススクロール まずはスムース...
Javascriptスニペット [JS]一定量スクロールしてから「ページの先頭へ」ボタンを表示する方法
jQueryでページをスクロールしたら「ページの先頭へ」のリンクを表示/非表示する方法のご紹介です。 「ページへ先頭へ」リンクは、ページを開いた時には表示されませんが、少しスクロールする（今回の例ではページ上部から100px）とフェードイン...
Javascriptスニペット [JS]jQueryでフォームへテキストのペーストを禁止する方法
<input type="text">などのフォームへテキストをペーストさせないようにjQueryで制御する方法のご紹介です。 フォームのサンプル HTML側のフォーム部分は以下のようにします。 formタグのクラスにnotpastを指定し...
Javascriptスニペット [JS]背景画像にスライドやフェードの動きを付与できるプラグインjQuery.BgSwitcher
複数の背景画像をスライドで横に動かしたり、フェードイン、フェードアウトで切り替えたりすることができるjQueryプラグインjQuery.BgSwitcherのご紹介です。 jQuery.BgSwitcher ファイルのダウンロード 以下のペ...
Javascriptスニペット [JS]jQueryでローディング画面を実装する方法
ページを読み込む際に、jQueryでローディング画面を実装する方法のご紹介です。 jQueryとCSSでローディング 今回は以下のようなCSSとHTMLを用意しました。 CSS .loaderの要素のtopとleftの値（ローディング画像の...
Javascriptスニペット [JS]jQueryのアラートで「OK」ボタンクリック時に指定のページへ遷移させる方法
以前にJavaScriptによる確認アラートの表示方法 で紹介させていただいた記事の関連になりますが、 今度はjQueryでフォームなどで「入力内容を確認する」ボタンをクリックした際に、アラートを立ち上げて「OK」ボタンか「キャンセル」ボタ...
Javascriptスニペット [JS]jQueryで複数の要素に同じ処理をする方法
セレクタで複数の要素を指定するには、HTML要素やID、クラス属性などをカンマ（,）でつなぎます。 jQueryで複数の要素に同じ処理を当てる例 複数のID、クラス属性に同じ処理を当てる例
Javascriptスニペット [JS]jQueryによる全角・半角文字列の変換について
以前にjQueryでreplace()を使って特定の文字列を置換する方法で紹介させていただいた記事の関連になりますが、フォーム周りでもよく利用される「jQueryによる全角と半角の置換」についてのメモです。 div要素の半角文字列を全角に変...
Javascriptスニペット [JS]videoタグの埋め込み動画をColorboxを使って再生する方法
前回のvideo タグでmp4 動画をサイトに埋め込むの方法で、videoタグでmp4動画を埋め込む方法を紹介させていただきましたが、今回は埋め込んだ動画をColorboxのインラインで表示（再生）させるカスタマイズのご紹介です。 Colo...
Javascriptスニペット [JS]JavaScriptによる確認アラートの表示方法
メールフォームなどのページで、「入力内容を確認する」ボタンをクリックしたらアラートを立ち上げて、「OK」か「キャンセル」ボタンをクリックさせる方法のご紹介です。 ※今回はjavascript によるアラートウィンドウの表示方法ですが、jQu...
Javascriptスニペット [JS]replace()を使って複数組の文字列を置換する方法
以前にjQueryでreplace()を使って特定の文字列を置換する方法 で紹介させていただいた記事の追記です。 今回は、同じ要素内で複数のテキストを変換したい場合の処理に加え、指定のテキストにタグやクラスを付与して、CSSで（強引に）デザ...
Javascriptスニペット [JS]ウィンドウの高さを取得して要素の高さを100%にする方法
jQueryでウィンドウの高さを取得して、特定の要素の高さを常に100%にする方法のご紹介です。 ウィンドウの高さを取得して高さを調整 今回は例として#container という要素の高さを100%にしてみます。 <head>タグ内で、jq...
Javascriptスニペット [jQuery]フォームの入力選択情報をリセットするボタンの作り方
テキストフィールドに入力した文字や、プルダウンメニュー（select）で選択した項目などを、ボタン1クリックでリセットして初期状態に戻す方法のご紹介です。 jQueryを使って実装できますので、企業サイトのお問い合わせメールフォームでも使え...
Javascriptスニペット [JS]placeholderのテキストにアニメーション効果を追加できるスクリプトPlaceholdem
<input type=text>や<extarea>でplaceholderのテキストにアニメーション効果を追加できるPlaceholdemのご紹介です。 jQuery不要で簡単に使うことができますので、企業向けのお問い合わせフォームなど...
Javascriptスニペット [jQuery]attrを使って指定した要素にクラスなどの属性を追加する方法
jQueryのattrメソッドを利用して、imgタグやul、liタグにクラスやIDなどの属性を付与する方法のまとめです。 要素に属性を付与する まず最初に、imgタグに「class=thumb」を付与する方法です。 要素に複数の属性を付与す...
jQuery [jQuery]<table>の<tr>にリンク先を指定できるようにする方法
<table> の行をクリックして、指定したリンク先に飛ばせるようにする方法です。 非常に便利なカスタマイズでしたのでシェアさせていただきました。 jQuery ファイルと一緒にjavascript のコードを設置 かちびと.net 様で公...