カテゴリー別アーカイブ: jQueryプラグイン

jQuery masonryはIE7非対応なので・・・

いや~まさか今!この時代に!masonryを使ったグリッドレイアウトでまさかのIE7対応することになるとは!
やっとIEの呪縛から抜け出せてきた今日この頃でしたのに!

しかしクライアント様のサイトのエンドユーザー様様にIE7を使ってらっしゃる方がいるというのならばなんとか対応してあげたいところ。

結論から言うと、別のプラグインを使うべき。

私が乗り換えたのは↓こちら

jquery.vgrid.js
http://blog.xlune.com/2009/09/jqueryvgrid.html

5年も前のプラグインですね。にょろにょろ動くグリッドレイアウトが流行ったのももうそんな昔・・・
しかしここにきてとてもお世話になったので、作者様には感謝です。

 使い方はサイト&demoのソースを見ればOK。
masonryとほぼ同じ。

日本の方が作ったプラグインなので、説明が日本語なのも嬉しポイント。

 

bxSliderでmode:fadeが効かない

カスタマイズがしやすくて、設置も簡単で言うことなしの万能スライダーbxSlider。
大好きすぎてスライダー実装する制作では8割がたこのスライダーを使用しています。
メインビジュアルだけでなく、スライド系のところはもう全部これ。

http://bxslider.com/

そんな大好きなbxSliderでフェードモードが効かないという状況に陥り、ググってもダメで、いろいろやってみて解決したのでメモ。

fade:’mode’が効かない

「mode:’fade’」とオプション指定すると、横スライドではなくフェード切り替えになるはずなのですが、
なぜか画像が出ない。一枚も。

「mode:’horizontal’」とか「mode:’vertical’」は問題ないのに。なぜ・・・

解決:overflowが問題でした。

ulにoverflow:hiddenしていたことが原因でした。。
フロートするリストが多くて、フロートクリア用に全部まとめてul{overflow:hidden}ってな感じで指定しちゃってたのがまずかった。

設定を解除するか、bxSliderを使うulだけ「overflow:visible;」に設定すればOK。

郵便番号から住所自動入力Ajax(contactform7)

問い合わせフォームで郵便番号を入力すると自動で住所が途中まで出てくるようにします。

実装方法はとってもとっても簡単。数行のコードで実装できます。
実装方法は以下のサイトを参照。
https://code.google.com/p/ajaxzip3/

contactform7で住所自動入力を実装したい

WordPressの問い合わせフォームといえばcontactform7。
contactform7で郵便番号を入れたら住所が自動で出てくるカタチにしたいときも
上記ajaxzip3が役立ちます。

contactform7の設定でinputに「onKeyup」とか「onClick」を付けられればいいのだけど、
めんどくさそうだったのでjQueryで対応。

①郵便番号を入力するinputにclassかIDを付けておきます。

▼contactform7側で作成したタグ。

[text zip id:zipcode]

②住所を出力するinputのnameを確認。

▼contactform7で作成したタグ。nameは「address01」になります。

[text address01]

③Ajaxzip3を読み込み&jQueryでキーアップイベントを書く

▼headでもbodyでも好きなところ(jQuery本体より後)でAjaxzip3を読み込む。
その後jQueryでkeyup(キーボードのキーが押され、上がった時)に住所を出力するコードを記述。

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<script>
$(function(){

	$('input#zipcode').on('keyup',function(){
	AjaxZip3.zip2addr(this,'','address01','address01');
	});

});
</script>

住所を都道府県とそれ以降に分けたい場合は出力用テキストボックスを2つ用意して、

	AjaxZip3.zip2addr(this,'','address01','address02');

↑こんな風に。

とっても簡単。