Javascript・jQuery の記事一覧
![[JS]jQuery を利用して <table> の <tr> にリンク先を指定できるようにする方法](https://www.webantena.net/wp-content/uploads/2013/05/trdatahref.png)
<table> の行をクリックして、指定したリンク先に飛ばせるようにする方法です。
非常に便利なカスタマイズでしたのでシェアさせていただきました。
続きを読む
Bootstrap を使ったシンプルなタブメニューの実装方法です。
今回はタブメニューの基本的な設置方法と合わせて、jQuery Cookie を利用して現在閲覧しているタブの情報を Cookie に保存する方法も合わせて紹介させていただきます。
これにより、ページをリロードしたり離脱して戻ってきた場合でも、タブの情報を保持できるようになります。
続きを読む
![[JS]複数の要素を縦にも横にも「ふわふわ」動かすjQueryプラグイン「jqFloat」](https://www.webantena.net/wp-content/uploads/2013/05/jqfloat.png)
指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」 の記事でも、要素を「ふわふわ」と動かすjQueryプラグイン jquery.yurayura.js について紹介させていただきましたが、今回紹介させていただく「jqFloat」プラグインでも同様の動きを実現できます。
プラグイン提供先でも動きを確認できますが、jqFloat により複数の要素を同時に縦にも横にも動かすことができるので、特に可愛いイラスト中心のサイトとかだとかなり使えるプラグインではないかと思います。
続きを読む
![[JS]フォームのバリデーションと入力ヒントの表示も可能なjQueryプラグイン「JQuery Form Validation And Hints」](https://www.webantena.net/wp-content/uploads/2013/05/formvalidationandhints.png)
フォームのバリデーションと入力ヒント用jQuery プラグイン「JQuery Form Validation And Hints」のご紹介です。
設置とカスタマイズが簡単なので、お問い合わせや見積、資料請求などの各種メールフォームが必要な企業サイトでも使えるんじゃないかなと思います。
続きを読む
![[JS]jQueryでページスクロールしてもナビゲーションを固定させる方法](https://www.webantena.net/wp-content/uploads/2013/04/scrollfixed.png)
ページを下までスクロールしてもサイドメニューに広告が固定されたまま、なんてブログをよく目にしますが、このような動きはjQuery を利用することで実装可能です。
バナー広告以外にもメニューボタンやSNSボタン、ページの先頭へ戻るなどのリンクを設置できるなど、色々と応用しやすいカスタマイズです。
続きを読む
Bootstrap のモーダル機能ベースの「Bootstrap Lightbox」は、画像をクリックしてオーバーレイで拡大表示させるシンプルなLightbox 系プラグインです。
Colorbox や Fancybox のようにあれもこれも出来るという訳ではなさそうですが、今後使う可能性もあるので簡単に設置方法をまとめました。
続きを読む
![[JS]jQuery で はてなブックマーク数 が多い順に記事を一覧で出力する方法](https://www.webantena.net/wp-content/uploads/2013/04/hateb.png)
はてブで人気の記事を自分のブログに一覧として表示する方法が紹介されていました。
記事のタイトルとブックマーク数をリスト形式で出力する方法です。
続きを読む
![[JS]ブラウザを一定量スクロールさせるとボタンを表示させて固定させるカスタマイズ](https://www.webantena.net/wp-content/uploads/2013/04/javascriptjquery.png)
jQuery を利用して、ブラウザを一定量スクロールさせることで非表示だったボタンなどの要素を表示させる方法です。
例えば、普段は「ページの先頭へ」のボタンは非表示にしておき、ページを一定量スクロールさせることで、ぼんやりボタンを出現させる、という処理です。
続きを読む
![[WP]jQueryでツイート数、いいね数などを取得して、WordPressの記事別に設置する方法](https://www.webantena.net/wp-content/uploads/2013/04/getsocialcount.png)
![[JS]IEでも CSS3の Media Queries を対応させるスクリプト「css3-mediaqueries.js」](https://www.webantena.net/wp-content/uploads/2013/03/css3mediaqueries.png)
なんて素敵なスクリプト! さすがGoogle先生!!!
最近はレスポンシブWEBデザインのサイトも増えてきましたので、ブラウザの幅やデバイスによってサイトの見せ方を変える必要もあるんです。
例えば、一見普通のPCサイトと思いきや、ブラウザの幅を縮めてみるとスマフォでもちゃんと収まって見えるように最適化されてある！！！みたいな。
これを実現する方法として CSS3 の Media Queries を利用する訳ですが、ここでもやっぱりIE がすんなり話を通してくれません > <;
ですので、IEでも Media Queries を利用するために、Google Code で公開されている css3-mediaqueries.js を利用します。
続きを読む
![[JS]IEでもプレースホルダ を利用できるjQueryプラグイン「jQuery ah-placeholder」](https://www.webantena.net/wp-content/uploads/2013/03/ahplaceholderjs.png)
HTML5 で強化された form の placeholder 属性は、javascript を使わなくてもプレースホルダを使える優れものですが、これがやっぱりIE には対応していない > <;
placeholder のIE対応となると、何だかんだでjavascript のお世話にならないといけないので矛盾しますが、jQueryプラグイン「ah-placeholder.js」を使えば実現可能です。
続きを読む
img 要素の画像を遅延ロードさせることができるjQuery プラグイン「Lazy Load Plugin for jQuery」。
ブログで大量の画像を掲載しているような場合は、ページのスクロールに合わせて画像を読み込む（遅延ロード）ようにしてくれる Lazy Load Plugin を利用すると良いかもしれません。
続きを読む
![[JS]FacebookやTwitter、はてブなどのソーシャルボタンを非同期で読み込む方法](https://www.webantena.net/wp-content/uploads/2013/03/sns.png)
Facebookの「いいね」やTwitterの「ツイート」、Google +1の「+1」などの各種ソーシャルボタンの読み込みを非同期にすることで、ページの表示速度を向上させる方法です。
Facebook、Twitter、Goolge +1 の他にも Google Analytics、はてブ などを全部まとめて非同期にすることができます。
続きを読む
![[Fla]Swfobject 利用時の wmode 属性を transparent に設定する方法](https://www.webantena.net/wp-content/uploads/2012/11/flash.jpg)
Flash ムービーを設置したサイトで、例えば
「グローバルナビのドロップダウンメニューの要素がフラッシュの『下』に隠れてしまう」
「Lightbox で画像を立ち上げたら、拡大画像がFlash ファイルよりも『下』に表示される」
なんて経験をされた方もいらっしゃるのではないかと思いますが、
今回はSwfobject を使ってFlash ムービーを表示させる上で、このレイヤーの問題をどのように解決するかについて、回避方法をまとめました。
続きを読む
