ドロップダウンメニューが便利な場合もありますが、ドロップダウンしてるエリアからカーソルが離れた際の素っ気なさときたら・・・
とりあえずサンプル2つ用意したので比較してみてください。

比較用サンプル

素っ気ないドロップダウンメニュー
優しいドロップダウンメニュー

ちょっとした気遣いで優しいUIに

彼女（彼）とバイバイしたあと見えなくなるまで見守ったりしませんか？名残惜しい的なのでもいいです。振り返ったとき既にいないとか寂しいじゃないですか。そういう気持ちって重要じゃないですか。

UIにもそういう小さな優しさというか思いやりを持たせてあげましょう。普通のことですけどね。カーソルが離れてもすぐ消えずにちょっと待ってくれるドロップダウンメニューを簡単に実装できるコードを用意したので、ちょっとした優しさを持ってコピペで使ってやってください。

Read more

$(‘hoge’).css(‘backgroundPosition’)だとIEで値が取れないんですね、不便か。

XとYを別々に取得したい

値の検証

var bgPosDef = $('#hoge').css('backgroundPosition');

IE8まで（9は未検証）

console: null（空）

Firefox, Chrome, Safari, Operaなど

console: 50px 50px

IEは返されるデータがない！こういうところがみんなが嫌いな所以ですかね。IEはbackgroundPositionではなくて、backgroundPositionXのようにXかYを指定して個別に引き抜きます。

var bgPosX = $('#hoge').css('backgroundPositionX');
var bgPosY = $('#hoge').css('backgroundPositionY');

XとYを取得する

計算を行う場合は、数値にしておく必要があるのでついでに。

var bgPos = bgPosDef.split(' '), // 半スペで分ける
  // bgPos[0] == X, bgPos[1] == Y
  bgPosX = 0,
  bgPosY = 0;
bgPosX = bgPos[0].replace('px', '');
bgPosY = bgPos[1].replace('px', '');
// pxを削除する

IEはpxを削るだけです。

bgPosX = $('#hoge').css('backgroundPositionX').replace('px', '');
bgPosY = $('#hoge').css('backgroundPositionY').replace('px', '');

条件分岐で分ける

var bgPosDef = $('#hoge').css('backgroundPosition'),
  bgPosX = bgPosY = 0;
if ( bgPosDef ) { // backgroundPositionの値が取れた場合
  var bgPos = bgPosDef.split(' '),
  bgPosX = bgPos[0].replace('px', '');
  bgPosY = bgPos[1].replace('px', '');
} else { // 取れなかった場合
  bgPosX = $('#hoge').css('backgroundPositionX').replace('px', '');
  bgPosY = $('#hoge').css('backgroundPositionY').replace('px', '');
}

これくらいはjQueryで対応してくれてもいいような気がしないでもない。。

はじめに、この記事は役に立つリンク集ではないです。

ブログを初めて2年ちょっとが過ぎ、半年くらいやるやる言ってやらなかったexValidationもようやく公開できたのもあって、自分の中で一段落したので、今まで公開したプラグインの振り返り等も兼ねて書きました。

そもそもは誰かの役に立てばいいなと思って始めたブログなので（ほとんど役に立たないものだと思いますけど）もしかするともしかしてどこかで誰かの役に立てるものもあるかもしれません。

ところで最初のプラグインを公開したときは、（JavaScript的な意味で）それはもう何も知りませんでした。そんな感じで今でも恥ずかしいコードなんですけど、最初の頃はもっと恥ずかしいコードなんですね。だから見ないで…

Read more

jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。

ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。

• サンプル1: エラーを右上に表示
• サンプル2: エラーを下に表示

Read more

jQueryオブジェクトからDOM要素にアクセスする方法やメソッドで渡されるjQueryオブジェクトの扱いなど基本といえば基本ですが、再認識メモです。なので、タイトルは自分に覚えとけよってことです。。

Read more