1. jQueryのダイアログを中央に表示する

    全体幅を決めている場合など、中央に表示されなくて困った時のために。

    まず以下のコードで画面のスクロール量を取得します。

    var sclLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
    var sclTop = document.body.scrollTop || document.documentElement.scrollTop;


    続きを読む...

  2. placeholderをアニメーションさせる

    こんなのもあったのですが、placeholderのテキストをvalue値に設定してしまうため少し扱いづらいです。というわけで作ってみました。各種ブラウザ最新版であれば問題なさそうです。

    座標やopacityのアニメーションも試してみたのですが、ブラウザごとに挙動が全然違うのでそのへんは注意が必要ですね。まあ、placeholderをアニメーションさせるケースはあまりなさそうですが。

     

    $("input,textarea").focus(
    function() {
    var target = $(this);
    var placeholderText = target.attr("placeholder");
    var temp = placeholderText;

    var cnt = 0;
    var addText = function() {
    if (!temp) {
    return;
    }
    if (temp.length == 0) {
    return;
    }
    var text = temp.substring(0, ++cnt);
    target.attr("placeholder", text);
    if (text == temp) {
    return;
    } else {
    setTimeout(addText, 15);
    }
    }

    target.blur(function() {
    setTimeout(addText, 50);
    });

    var deleteText = function() {
    if (!placeholderText) {
    return;
    }
    if (placeholderText.length == 0) {
    return;
    }
    placeholderText = placeholderText.substring(0,
    placeholderText.length - 1);
    target.attr("placeholder", placeholderText);
    setTimeout(deleteText, 15);
    }

    setTimeout(deleteText, 50);

    });

  3. jQuery UI Touch Punch のResizableが効かない場合

    新規に追加したエレメントには効かない(?)ようです。

    どうやらリサイズハンドルの領域を計算するのがmouseoverのタイミングなので、mouseoverイベントがないタッチデバイスだと動かないみたいです。新しいエレメントを追加した段階で、強制的にmouseoverイベントを呼んであげると無事動きました。

    こんなかんじです。

    $(".ui-resizable-handle.ui-resizable-s").trigger( "mouseover" );

     

  4. jQuery UI のDatepickerで特定の日付を選択不可にする

    http://jqueryui.com/datepicker/

    特定の日付を選択不可にする場合、オプションのbeforeShowDayを使います。

     $('#picker').datepicker({ 
    beforeShowDay: function (a){ //aはjsのDateオブジェクト
    var mm = (a.getMonth() + 1);
    if(mm < 10){mm = "0" + mm};
    var dd = a.getDate();
    if(dd < 10){dd = "0" + dd};
    var date_str = a.getFullYear() + "-" + mm + "-" + dd;
    if(date_str == "2012-11-12"){
    return [false,""];//配列の1番目が可・不可の選択、2番目がCSSの設定。
    }
    return [true,""];
    }
    });