mania-ku

何か作りたいプログラマ未満。

【jQueryプラグイン】高さを揃え&レスポンシブ対応のjquery-match-heightがすごい便利

高さをそろえる系プラグインは色々試してきましたが、最近見つけたliabru/jquery-match-height · GitHubが大変便利です。
幅が変わって横に並ぶ数が変わっても、高さを合わせてくれるのです!レスポンシブサイトを作るときは大変便利です:)

メリット

  • ・レスポンシブで列の数が変わっても、その列で自動に高さを揃えてくれる
  • ・padding,margin,border,box-sizingに対応
  • ・非表示の要素は無視してくれる
  • ・IE8+に対応
  • ・削除できる
  • ・正しいスクロール位置を維持する
  • ・必要なときに高さを更新することもできる

デメリット

デモ:jquery-match-heightデモ – js do it

【Custom Scrollbar plugin】カスタムスクロールバー中のareaがスムーズスクロールしちゃう

Custom Scrollbar pluginのバージョン2.8.3を使ったカスタムスクロールバー中にareaがあると、クリックしたときにページ最下部へのスムーズスクロールになってしまいます。

bugfix

jquery.mCustomScrollbar.js内のareaの記述を削除します。
でもtextareaのほうは消さないように気をつけてください。そうすると直ります。

【slidesjs】iPhoneでスワイプ時の不具合の直し方

iPhoneでslidesjsをスワイプしていると、スワイプできなくなったりなにもスライドされてこないことがあります。
英語でぐぐると出てきますが、日本語では見つからなかったのでメモ。

やんわりほんやく

jsの88行目の
webkitBackfaceVisibility: “hidden”
を削除するか、
webkitBackfaceVisibility: “visible”
を設定しよう。

英語は2に近い3という成績だったのですが、仕事を始めてからやんわりわかる部分が増えてきたような気がします。
今年は英語習いに行こうかなぁ・・・

【Advent calendar】jQueryプラグイン作成で気をつけたいところ

1日空いてしまいました・・・
これはadvent calendar5日目の記事です。
4日目のおとといはjQueryプラグイン作成で躓いたことでした。

new Array()と[]どちらを使うか?

いつも[]を使ってるけど、new Array()使ってる人やプラグインも見るので違いを調べてみました。
サイズを指定することがなければ[]でいいみたいです。(new Array(数字)で配列の数を指定できます)
速度的にも[]の方がよいとか。びっくりです!
参考:JavaScript – new Array()と[]の違い – Qiita [キータ]

$(window).scrollの注意点

forなどループをまわすときは、パフォーマンスによってスクロール終了時のイベントに変更したほうがいいみたいです。
スクロール終了時のイベントの書き方参考:make a record of…: [JavaScript] スクロールの終了時にイベントを起動する

CSSを複数書くときは、書き方をそろえるとキレイ

$(this).css({
    top: '50%';
    marginTop: '-100px'
});
//もしくは
$(this).css({
    'top': '50%';
    'margin-top': '-100px'
});

キャメルケースや_などの命名規則は統一した方がキレイ

プログラマさん(java、phpとか)はキャメル、それ以外(デザイナー、コーダーとか)_を使ってることが多いイメージです。
私はまぜまぜしちゃうので、ちゃんと気をつけて命名したいですね。

6日目の明日は横浜の動物園野毛山動物園/金沢動物園はオススメ!です。
ズーラシアは大学のときにイベントのときに何度も行ったのもあって、最近は行ってないなぁ・・・
また行きたいですね!

【Advent calendar】jQueryプラグイン作成で躓いたこと

これはadvent calendar4日目の記事です。
3日目の昨日は電子絵本サービス『PIBO(ピーボ)』にお問い合わせをした話でした。

先日ドットインストールのjQueryプラグイン入門で勉強したあと、初めて自作プラグインを作った中で躓いたことがありました。

オプションをcssのプロパティに使いたい!でも動かないorエラーが出る

要素がfixedだったりして左右の位置をオプションで決めたいときなんかに、オプションをプロパティに使いたいですがこれではエラーが出てしまいます…
変数に入れてもダメでした

//プロパティにオプションをつっこむと、エラーでる
elements.css({
~省略~
    opts.pos: 0,
~省略~
});

//変数にオプションつっこむと、動かない
var opts_pas = opts.pos;
elements.css({
~省略~
    opts_pas: 0,
~省略~
});

//.css({})じゃなくて、.css()だと動いた!
elements.css(opts.pos, 0)
もしくは
var opts_pas = opts.pos;
elements.css(opts_pos, 0)

Uncaught TypeError: Illegal invocationというエラーが出た!

.css()の書き方を間違えたため起こりました。シングルクォートで囲んだらエラーが消えました。
普段.css({})しか使わないので…

.css(top, ***)
↓
.css('top', ***)

Object 数値 has no method ‘match’というエラーが出た!

他のmatchを使った場所では起きてないため調べたところ、matchした文字列のところに数値が入っていました。数値を文字列化したらエラーが消えました。
文字列化参考サイト:JavaScriptにおける数値と文字列の相互変換

String(数値)

5日目の明日はjQueryプラグイン作成で気をつけたいところです。
ほんじゃーね;)

【jQuery】要素が削除されても、横並びしてる要素の高さをそろえる

ECサイトなんかで、横並びしている要素の高さをそろえることがあると思います。
商品リストなんかだと一つ削除されても、残されたものでサイド高さをそろえる必要があったので,いろいろいじっていたらこうなりました。

【js】jquery.jscrollpane.js+丸角のおまじない

IE7以上でiPhoneっぽい見た目のスクロールを実装したいとき、便利なのがjquery.jscrollpane.jsjquery.corner.jsです。
丸角は他も色々試しましたがjquery.corner.jsが一番使いやすいです。

jquery.jscrollpane.jsはwebkitで高さの取得がおかしい場合(下に隙間ができる)があります。
そのときは下記のようにIE9以上とモダンブラウザにバグ対策をします。IE8以下にも効かせると丸角も効かなくなるので、注意してください。
なお、下記の振り分けはjQuery1.8系まで使用できるものです。

if($.browser.msie && $.browser.version < 9){ //IE8以下
	$(スクロールを付けたい要素).jScrollPane();
	$(".jspDrag, .jspTrack").corner(); //丸角にする処理
} else {
	$(スクロールを付けたい要素).jScrollPane({
		autoReinitialise: true //バグ対策
	});
}

【jQueryプラグイン】colorbox使ってみた

colorboxを使ってみた感想など。

グループ化

一個ずつrelを書かなくても、jQueryで指定できて便利だし、ラクチン

$(***).colorbox({
	rel: "gallery"
});

画像もiframeもばっちこい!

ただし、iframeの高さを自動にはできないので、その辺だけ注意
jsとかで取得しようとしても割と大変なので、固定がオススメです。

ライトボックスで複数の指定がしたいとき楽

個別にクラスが付けられるので、これで分岐できます。
closeの位置や次へ前へなんかの微調整したりすることも。

$(***).colorbox({
	className: "gallery"
});

背景の半透明の部分の透明度は簡単に変えられる

IEのバージョンとか関係なく、オプションで指定できる

$(***).colorbox({
	opacity: 0.8
});

コンテンツの背景色はCSSで変えろ

当たり前か。

コンテンツの背景色変えたら、ローディングの画像の色も変えよう

気づかないとかっこわるくなる・・・

確認したブラウザ

IE7+、operaを除くその他モダンブラウザ

これは次からも使おうと思いました。