jQuery Easing の追加

jQuery で Easing を追加する。 以下、JavaScript のみ。

// easing の定義
jQuery.extend(jQuery.easing, {
    newEasing: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) return b;
        if ((t /= d / 2) == 2) return b + c;
        if (!p) p = d * (.3 * 1.5);
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else var s = p / (2 * Math.PI) * Math.asin(c / a);
        if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
    }
});

// 追加した easing をアニメーションで指定
$(document).ready(function () {
    $("#target").click(function () {
        $("#target").animate({
            left: "300px",
            top: "200px"
        }, 1500, "newEasing");
    });
});

Read More

WordPress で個別ページの記事部分を ajax で取得する

WordPress で個別ページの記事部分を ajax で取得して任意の場所に挿入するコードを書いたのでメモ。（※ jQuery の内容としては WordPress に特化したものではない）流れとしてはこんな感じ。

• クリックイベントをバインド
• ajax のリクエスト先 URL を初期化
• ajax リクエストを行いページ内容を格納
• ページ全体から目的の部分だけを取得して格納
• 目的の部分をいったん非表示にしてから挿入
• アニメーションで表示

コードはこんな感じ。

$(document).ready(function () {

 // クリックイベントをバインド
 $(".hoge").click(function(){
  var url, html, target;
  
  // ajax のリクエスト先 URL を初期化
  url = $(this).find("a.hoge").attr("href");
  
  // ajax リクエストを行いページ内容を格納
  html = $.ajax({
   url: url,
   async: false
  }).responseText;
  
  // ページ全体から目的の部分だけを取得して格納
  target = $(html).find(".fuga");
  
  // 目的の部分をいったん非表示にしてから挿入
  target.css({display: "none", opacity: "toggle"});
  $(this).after(target);
  
  // アニメーションで表示
  target.animate({height: "show", opacity: "toggle"});
 });
 
});

2013-02-27 追記： responseText からそのまま jQuery オブジェクトを生成するような書き方は IE だとダメみたい。（IE9 は動いてる）IE で同じことをやろうと思ったら上のサンプルだと全然だめ。手抜きしすぎ。 なんもないところから jQuery オブジェクトを生成したいときは、

var hoge = $("
");

じゃなくて、

var hoge = $(document.createElement("div"));

こう書く。

Read More

jQuery で親要素を取得

jQuery オブジェクトから親要素の jQuery オブジェクトを取得したい。これすぐ忘れる。 以下の例は、クラス "hoge" とマッチする要素の直近の親要素（a）に対して css をセットしている。

$(".hoge").closest("a").css("border", "none");

自身からもっとも近い親要素（a）の jQuery オブジェクトを格納する。

var target = $(this).closest("a");

親要素を選択したいだけなら parent で良い。closest は "もっとも近い親要素" であることがポイント。 parent([expr]) - jQuery 日本語リファレンス closest([expr]) - jQuery 日本語リファレンス

Read More

クリックされた行の末尾に要素を挿入する

jQuery の toggle と既に表示されている要素（インデックス）の管理。

Read More

クリックされた要素を含む行の末尾の要素を特定する

jQuery でインデックスをとってくる方法。

Read More

body が window よりも（高さが）小さかった場合フッタを下部に固定する

jQuery でフッタ要素を強引に最下部に固定してみる。定石がわからん。

$(document).ready(function () {

     // 基準の高さを格納
     var bodyBaseH = $('body').height();
     var windowH = 0;
    
     // リサイズ時の css 切り替え
     function ReSize() {

          winH = $(window).height();

          // ウィンドウの方が高い場合フッタを最下部に固定
          if (winH > bodyBaseH)
          {
               $('#footer').css("position", "fixed");
               $('#footer').css("bottom", "0");
          }
          else
          {
               $('#footer').css("position", "relative");
          }
     }
    
     // リサイズイベントにハンドラをバインド
     $(window).resize(function(){
          ReSize();
     });
    
     // 切り替え
     ReSize();
});

Read More