Javascript・jQuery の記事一覧
![[JS]郵便番号から住所を自動入力できるjavascript 「ajaxzip3」](https://www.webantena.net/wp-content/uploads/2013/02/ajaxzip3.png)
お問い合わせフォームや見積フォームで「住所」を都道府県から手打ちで入力するのは面倒ですので、郵便番号を入力するだけでその後の住所を自動入力してくれる javascript「ajaxzip3」が便利です。
続きを読む
![[JS]画像や動画、iframeも Lightbox 風に立ち上げる jQueryプラグイン「Colorbox」](https://www.webantena.net/wp-content/uploads/2013/02/colorbox.png)
画像をオーバーレイで拡大表示できるスクリプトとして、Lightbox はよく使いますが、動画やinline コンテンツ、iframe などもLightbox 風に表示させるにはjQueryプラグイン「Colorbox」が便利です。
カスタマイズしやすく、IE6でもそこそこ動きますので企業ページでも使える便利なプラグインです。
続きを読む
![[JS]jQuery と jQueryUI を利用したお手軽Datepicker の実装方法](https://www.webantena.net/wp-content/uploads/2013/02/jquerydatepicker.png)
日付を入力するフォームを用意する際、手打ちで年月日を入れると面倒なので、jQuery の Datepicker を利用して、カレンダーから日付を選んで自動入力できるようにする方法です。
続きを読む
![[JS]ソースコードをハイライト表示できる「Google Code Prettify」](https://www.webantena.net/wp-content/uploads/2013/02/googlecodeprettify.png)
WordPressの場合は SyntaxHighlighter Evolved プラグインを利用することで簡単にソースコードをハイライト表示させることが可能ですが、WordPressではないブログやサイトの場合には、Google Code Prettify を使うと簡単にハイライト表示させることができます。
続きを読む
![[JS]Pinterestっぽいサイトを作れるjQueryプラグイン「jQuery Masonry」](https://www.webantena.net/wp-content/uploads/2013/02/masonry.png)
Pinterest風のタイルを敷き詰めたようなレイアウトを実現するために、jQueryプラグインの「The Wookmark jQuery plugin」を使う方法は以前にも紹介させていただきましたが、やはり「jQuery Masonry」の方が有名かな。
と言うことで、基本的な使い方になりますがザックリとご紹介。
続きを読む
![[JS]「jQuery Text Resizer」と「jQuery Cookie」を利用して文字サイズを大中小と変更する](https://www.webantena.net/wp-content/uploads/2013/01/textresizer.png)
企業サイトであれば「文字の大中小」ボタンをクリックしてページ内のフォントサイズを変更することがよくあると思いますが、jQuery プラグイン jQuery Text Resizer を使えば手軽に実装できます。
また、jQuery Cookie と併用することで、現在のフォントサイズ（の状態）を Cookie に保持できるので、サイト内の別ページへ遷移したりページを離脱してもう一度戻ってきた場合でもサイズを維持することができます。
続きを読む
![[JS]Javascript で a 要素のリンクを無効にする方法のまとめ](https://www.webantena.net/wp-content/uploads/2013/01/javascript.png)
以前に紹介させていただいた CSSの pointer-events で <a> タグのリンクを無効化する方法にも関連しますが、今回は Javascript による<a> タグリンクの無効化を行う方法のまとめです。
続きを読む
![[JS]レスポンシブWEBデザイン対応のコンテンツスライダー「Flex Slider」](https://www.webantena.net/wp-content/uploads/2013/01/flexslider.png)
スライドショーのjQuery プラグインは山ほどありますが、FlexSlider はレスポンシブWEBデザイン対応なので、スマホサイトでスライドコンテンツを利用する際には重宝しています。
また、カルーセルが使えるなどカスタマイズ性にも優れており、非常に使い勝手がよいプラグインだと思います。
続きを読む
![[JS]WYSIWYGエディタを実装できるシンプルで軽量なjQueryプラグイン「CLEditor」](https://www.webantena.net/wp-content/uploads/2013/01/cleditor.png)
シンプルなWYSIWYGエディタを簡単に設置できるjQueryプラグイン CLEditor です。
各種ボタンのカスタマイズができる他、フルブラウザ対応（リサイズ）や幅固定バージョンも用意されていますのでサイトに合わせて利用できます。
続きを読む
![[JS]Pinterestのようにタイル状にコンテンツを配置できるjavascript「The Wookmark jQuery plugin」](https://www.webantena.net/wp-content/uploads/2012/12/wookmark.png)
Pinterestのようなサイトをよく見るようになりました。
この手のサイトは jQuery Masonry を利用することが多いのですが、今回は The Wookmark jQuery plugin を使ったPinterest 風のタイル状サイトを構築しましたので、その備忘録です。
続きを読む
![[IE]IE6でも min-width、min-height、max-width、max-height を使う方法](https://www.webantena.net/wp-content/uploads/2012/12/minmaxjs.png)
またまたIE6ですが、
IE6 ではCSSの「min-width」「min-height」「max-width」「max-height」が効かないため、javascript などを利用して別途対応してあげる必要があります。
今回紹介させていただく minmax.js は、設置するだけでIE6でも「min-width」や「min-height」が使えるようになりますので、企業サイト構築時にIE6対応までやる場合は外せません。
続きを読む
![[JS]IE 下位バージョンで smoothRollOver.js が正常に動かない時の対処法](https://www.webantena.net/wp-content/uploads/2012/11/smoothrollover.png)
[JS]IE6でも滑らかなロールオーバを実現させるには「smoothRollOver.js」が便利の記事で紹介させていただいた便利なjavascript smoothRollOver.js ですが、 smoothRollOver.js を使うと画像のレイアウトがおかしくなる!! という時の対処法です。
続きを読む
![[JS]ランダムで、しかも指定件数分だけ要素を表示させるjavascript「randomDisplay.js」](https://www.webantena.net/wp-content/uploads/2012/12/randomdisplay.png)
例えば「5件の記事の中から2件をランダム表示させる」のような処理を、jQueryを利用して実現させる方法です。
jQuery を使うので、小難しいプログラムを書いてランダムで記事を取ってくる…なんて処理は不要ですし、（javascriptが使えれば）無料のブログサービスや企業サイトなどでも利用できるので、汎用性が高く便利なjavascript です。
続きを読む
![[JS]指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」](https://www.webantena.net/wp-content/uploads/2013/04/javascriptjquery.png)
jQuery を利用して画像を動かす方法には色々ありますが、指定した要素（画像など）を「ふわふわ」浮いているように見せるためのプラグインが jquery.yurayura.js です。
縦方向に「ふわふわ」動くイメージですが、移動距離とスピードの設定次第では面白い動きも実現できるかもしれません。
続きを読む
