IEでjQueryの画象のloadが動かない件

IE8以下でjQueryのimg要素のloadが動かない件でプチハマりしたのでメモ

$("<img>").attr("src","....").on("load",function(){
  //do something
});

だとすでに画象がキャッシュされている際に動かない。

$("<img>").on("load",function(){
  //do something
}).attr("src","....");

にするとちゃんとロードされる。でもwidthやheightはうまくとれないので、

$("<img>").on("load",function(){
  setTimeout(function(){
    //do something
  },1);
}).attr("src","....");

とするとちゃんとwidthやheightも取得できる

IE9でjQueryのanimateメソッドでtransformを変更する

IE9はCSS3のtransformに対応しているけどtransitionやanimateには対応していない。jQueryのアニメーションでしなくちゃ行けないけどanimateメソッドはtransformに対応していないということで色々と試行錯誤。

IE9の場合のみ以下の関数を使ってアニメーションを行ないました。

var rotate = function(target,value,duration,callback){
	target.animate(
		{borderSpacing:value},
		{
			complete:callback,
			duration: duration,
			step: function(now,fx) {
				target.css('-ms-transform','rotate('+now+'deg)');
			}
		}
	)
}

次のように作成したrotateを入れ子にして頑張ってアニメーションします。

var time =300
var target = $("hoge");
rotate(target,5,time*0.2,function(){
	rotate(target,0,time*0.2,function(){
		rotate(target,-5,time*0.3,function(){
			rotate(target,0,time*0.3,function(){})
		})
	})
})

IEとかなくなったらいいのに。

jQueryでJSONP

jQueryのajax()でJSONPを扱おうとしたらうまく行かなかったのでメモ。

JSONPのデータはこんな感じ

callback({
	data:[
		"hoge",
		"fuga",
		"bar"
	]
})

試そうとしたのは次のような感じ

var def = $.ajax("hoge.json",{
	"dataType":"jsonp"
});

これだと動かない。

jQueryでコールバック関数をcallbackと固定するには次のようにjsonpCallbackオプションを指定しないとダメ。

var def = $.ajax("hoge.json",{
	dataType:"jsonp",
	jsonpCallback:"callback"
});

jQueryつかってプログレスバーを表示する

次のURLが参考になった。

$.ajaxファイルアップロードでプログレスバーを表示する。 - ブックマクロ開発に

progressイベントで通信の状態を監視できるらしい。

ただ、jQueryの場合はdeferred.progress()を使ったほうがスマートじゃないかという噂も。

iPhoneでjQueryのliveイベントが発火しない件

iPhoneでjQueryのliveイベントが発火しない。

$("div").live("click",function(){
   alert("ok")
});

delegateもdocumentやbodyにbindした際に発火しない。

$(document).delegate("h1","click",function(){
	alert("ok")
})

$("body").delegate("h1","click",function(){
	alert("ok")
})

解決策としては「cursor: pointer;」を要素に指定するというもの。

h1{
	cursor: pointer;
}

はい、すごいですね。たまにあるclickイベントが発火しないときにも有効です。

jQuery を利用して1行の高さ(line-heigt)を取得する

jQueryでline-heigtで1行の高さを取得しようとした所、ブラウザにより返り値がちがったので対応しました。

if($.browser.msie && $.browser.version===9.0){
	var lineHeight = $(this).css("line-height")*parseInt($(this).css("font-size"))
}else if($.browser.msie ){
	var getStyle = $(this)[0].currentStyle || document.defaultView.getComputedStyle($(this)[0], '');
	var lineHeight = getStyle.lineHeight*parseInt($(this).css("font-size"))
}else{
	var lineHeight = parseInt($(this).css("line-height"));
}
alert(lineHeight)

こんな感じでした。

jQueryでブラウザがCSS3に対応しているか確認する方法

10 awesome jQuery snippets | CatsWhoCode.comよりブラウザがCSS3に対応しているか確認する方法

var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            // browser supports box-shadow. Do what you need.
            // Or use a bang (!) to test if the browser doesn't.
            return true;
         }
      }
      return false;
   };
})();
if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

なるほど

jQueryでURLのパラメータを取得する

10 awesome jQuery snippets | CatsWhoCode.comよりURLのパラメータを取得する方法。

$.urlParam = function(name){
	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
	if (!results) { return 0; }
	return results[1] || 0;
}

なるほど

jQuery UIでsortable要素にinputやtextareaがある場合に選択できない

sortableを指定しドラッグアンドドロップを可能にした要素内にinput要素やtextarea要素があると選択されなくなってしまう。

#4429 (Can't select text in inputs within sortables) – jQuery UIによると以下のようにすると解決できそう。

$("#hoge").sortable().disableSelection().delegate('input,textarea','click',function(ev){
    	ev.target.focus();
});

若干ソースは変更してます(delegate使わない意味がわからない)。

jQuery UIでドラッグアンドドロップを実装

jQuery UIを利用してドラッグアンドドロップを実装する方法

$(function(){
	$("#hoge").sortable({cancel:"tr.field-Title"}).disableSelection();
});

sortable()で子要素をドラッグアンドドロップ可能になる。オプションには様々な項目が設定できcancelにはドラッグアンドドロップの対象にしない要素がセレクタで指定できる。

sortableはテキストが選択されてしまうのを防ぐメソッド。

jsonとjQueryの悩ましい関係

次のようなコードを書いたらエラーが出てしまって良くよく調べるとjsonの形式が間違っていたわけです。

var jXHR = $.ajax({
	url:"ajax.json",
	dataType : "josn" 
});
jXHR.done(function(json){
	console.log("ajax success");
}).fail(function(data,type){
	console.log("ajax error");
});

jsonデータは次のような感じ。

{ Data {....} }

jQuery1.3までは動いたのですがjQuery1.4からはこのコードじゃ動かない。

{ "Data" {....} }

みたいにパラメーターをダブルクオーテーションで包まなくちゃいけない。

APIをいじれない場合は次のように書いて対応することも可能

var jXHR = $.ajax({
	url:"ajax.json",
	dataType : "text" 
});
jXHR.done(function(json){
	console.log("ajax success");
	eval("var json="+json);
}).fail(function(data,type){
	console.log("ajax error");
});

evalとか使いたくないしやっぱりAPIを正しいものに直すのがいいと思う

jQuery Deferredを利用したイケテルアニメーション制御

jQuery Deferredを利用したイケテルアニメーション制御、もっといい方法があるかもしれないので暫定版。

var que01 = $("#box1").animate({left:"100px"});
var que02 = $.when(que01).pipe(function(){
    return $("#box2").animate({top:"100px"});
});
var que03 = $.when(que02).pipe(function(){
    return $("#box1").animate({top:"100px"});
});
var que04 = $.when(que03).pipe(function(){
    return $("#box2").animate({left:"100px"});
});
var que05_1 = $.when(que04).pipe(function(){
    return $("#box1").animate({left:0,top:0});
});
var que05_2 = $.when(que04).pipe(function(){
    return $("#box2").animate({left:"200px",top:"200px"});
})

サンプル

jQuery Deferredの遅延を利用して擬似的にキューを作成していくイメージ、入れ子祭りを防ぐだけでなく複数のアニメーションを同時に実行したり、複数のアニメーションが終った際に実行したい処理を制御できたりと結構便利。

resolveとresolveWith(rejectとrejectWith)

jQuery Deferredでは遅延された処理の発火にresolveとresolveWith(失敗時はrejectとrejectWith)を利用します。これらの違いはresolveWithではコンテキストの設定が可能な点です。コールバック関数はコンテキストのメソッドとして実行されるのでthisでコンテキストで指定したオブジェクトにアクセスが可能です。

var obj = $.Deferred();
obj.then(function(arg1,arg2){
    $("body").append("<hr>");
    $("body").append(this.key);
    $("body").append("<hr>");
    $("body").append(arg1);
    $("body").append("<hr>");
    $("body").append(arg2);
});
hoge = {
    key:"val"
}
$("#resolveWith").click(function(){
    obj.resolveWith(hoge,["hoge1","hoge2"]);
});

サンプル

引数の扱いには注意が必要でresolveやrejectではオブジェクトがそのままコールバック関数の引数として渡されるのに対して、resolveWithやrejectWithは配列で渡した引数を展開して取得する必要があります。

jQuery Deferred2

jQuery Deferredの続き

deferred.isRejected()とdeferred.isResolved()

すでにrejectedかresolvedが行なわれているかチェックできるメソッド。

var obj = $.Deferred();
obj.then(function(){
    if(obj.isResolved())alert('ok');//ok
});
 
setTimeout( function() {
    if(obj.isResolved())alert('ng');
    obj.resolve();
}, 2000 );

このコードではngはアラートされないがokはアラートが表示される。

サンプル

deferred.pipe()

pipe()はDeferredオブジェクトがresolveやrejectに設定された内容を実行する前に制御したい命令を入れることができる。

var defer = $.Deferred(),
    filtered = defer.pipe(function( value ) {
      return value * 2;
    });
defer.resolve( 5 );
filtered.done(function( value ) {
  alert( "Value is ( 2*5 = ) 10: " + value );
});

deferred.promise();

promise()はDeferredオブジェクトを返す。

var obj = $.Deferred();
var func = function(){
  $("body").append("<p>run....</p>");
    setTimeout(function(){
    obj.resolve();      
  },2000);
  return obj.promise();
}
 
$.when(func()).done(function(){
    $("body").append("<p>finish!</p>");    
});

このようにDeferredオブジェクトを返すことでwhenメソッドで遅延の制御が可能になる。

サンプル

jQuery Deferred

jQuery DeferredはjQuery1.5から追加された機能。名前の通りDeferred（繰延）についての制御が可能。

Deferredメソッド

単純にDeferredオブジェクトを生成するにはDeferredメソッドを実行する。

var obj = $.Deferred();

それ以外でもアニメーション系のメソッドやAjax系のメソッドがDeferredオブジェクトを返すようになっている。

var obj = $("#hoge").animated(....)

var obj = $.ajax(....)

thenメソッドとresolveメソッド

Deferredオブジェクトは遅延を制御します。Deferredオブジェクトにthenメソッドを利用して遅延して行いたい処理を実装します。設定しておいた処理はresolveメソッド実行時に処理されます。

var obj = $.Deferred();
obj.then(function(){
    alert('ok1');
});
    
setTimeout( function() {
    obj.resolve();
}, 2000 );

この場合２秒後にthenで設定していたalertが表示される。

サンプル

アニメーション系のメソッドはアニメーション終了時に、Ajax系のメソッドはAjax終了時にresolveメソッドが実行されます。

rejectメソッドとfailメソッド

失敗時の処理を制御できるのがfailメソッド、失敗時に実行したい命令をfailメソッドで指定しておきrejectメソッドで発火出来る

var obj = $.Deferred();
obj.then(function(){
    alert('ok1');
}).fail(function(){
   alert('ng!') 
});
 
setTimeout( function() {
    obj.reject();
}, 2000 );

サンプル

Ajax系のメソッドはAjax失敗時にrejectメソッドが実行されます。

alwaysメソッド

全てのケース、つまりreject()されようがresolve()されようが実行するのがalways

var obj = $.Deferred();
obj.always(function(){
  alert("finish")    
});

setTimeout( function() {
    obj.reject();// or ojb resolve()
}, 2000 );

サンプル

whenメソッドとdoneメソッド

複数のDeferredオブジェクトの遅延を制御できるのがwhenメソッド。

var obj1 = $.Deferred();
var obj2 = $.Deferred();

$.when(obj1,obj2).done(function(){
    $("body").append("<p>complete</p>")
})
  
setTimeout( function() {
    $("body").append("<p>obj1 end</p>")

    obj1.resolve();
}, 2000 );
 
setTimeout( function() {
    $("body").append("<p>obj2 end</p>")
    obj2.resolve();
}, 4000 );

whenメソッドで指定された複数のDeferredオブジェクトが実行された際にdoneメソッドで定義されている処理が実行されます。

サンプル

jQueryのdetachメソッド

ドキュメントを眺めているとdetachメソッドがjQuery1.4から追加されていました。基本的にはremoveメソッドと同じ動きをします。返り値として削除したjQueryオブジェクトを返すので保存しておいて後から追加する際に便利。

<input type="button" id="show" value="show">
<input type="button" id="hide" value="hide">
<p id="p">aaaa</p>

var p;
$("#show").click(function(){
    $("body").append(p);
});
$("#hide").click(function(){
    p = $("#p").detach();
});

サンプル

jQueryのpropメソッド

jQuery1.6で追加されたpropメソッド。<input id="hoge" checked="checked">なんかがあった場合、属性が存在する場合、trueを返す。

alert($("#hoge").attr("checked"));//checked
alert($("#hoge").prop("checked"));//true

サンプル(1.6.3)

これによりattrメソッドも若干挙動が変わっている。これまではattrがtrueを返していた。

alert($("#hoge").attr("checked"));//true

サンプル(1.5.2)

jQueryのholdReadyメソッド

jQuery1.6からholdReadyメソッドが追加されております。どういったものかというと

簡単に言うとreadyメソッドの実行タイミングを制御できるメソッドです。$.holdReady(true);を設定するとハンドリングされたreadyメソッドは$.holdReady(false);が実行されるまで発火しません

$.holdReady(true);
  
setTimeout( function() {
    $("body").append("<h1>success1!!</h1>");
    $.holdReady(false);
}, 2000 );
  
$(function() {
    $("body").append("<h1>success2!!</h1>");
});

サンプル

画像の読み込みが終ったあとにスクリプトを実行する2

以前紹介した画像の読み込みが終ったあとにスクリプトを実行するに不具合があったので改訂版を紹介

$("#mainContent").html(mainContent);
var imgSize = $("img",mainContent).size();
$("img",mainContent).load(function(){
	loadImages();
}).error(function(){
	loadImages();
});
var loadImages = function(){
	--imgSize;
	if(imgSize==0){
		//実行したい命令
	}
}

画像の読み込みに失敗した際に命令を通過しなかったのでerrorメソッドを利用して、エラーがあってもちゃんと通過するようにしておきます。

jQueryプラグイン「Isotope」でIEの不具合を修正する

jQueryプラグイン「Isotope」でIE6の不具合を修正する方法。

Isotopeではエフェクトを制御する為、要素にfilterが自動的に適応されます。その為、marginやpositionを指定した配置を行った場合、表示がおかしくなることがあります。

$('#unitItem').isotope({
	filter: "" , 
	animationOptions: {
		duration: 250,
		easing: 'linear',
		queue: false , 
		complete : function(){
			if($.browser.ie){
				$(this).attr("style",$(this).attr("style").replace("alpha(opacity=100)",""))
			}
		}
	}
});

animataionOptionsではanimateメソッドのオプションが指定できるのcompleteでアニメーションが終った際にfilterの値を初期化しておきます。