2013年02月04日

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も取得できる
タグ:jquery load img IE
posted by ねこまんま at 22:04 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年12月06日

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とかなくなったらいいのに。
posted by ねこまんま at 23:06 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

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"
});
タグ:AJAX jquery JSONP
posted by ねこまんま at 12:57 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年11月02日

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

次のURLが参考になった。

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

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

ただ、jQueryの場合はdeferred.progress()を使ったほうがスマートじゃないかという噂も。
posted by ねこまんま at 20:03 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年07月14日

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イベントが発火しないときにも有効です。

posted by ねこまんま at 01:55 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年04月18日

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)


こんな感じでした。
posted by ねこまんま at 15:58 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年11月25日

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
posted by ねこまんま at 19:15 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

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
posted by ねこまんま at 19:07 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年10月14日

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使わない意味がわからない)。

posted by ねこまんま at 18:58 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

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

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

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


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

sortableはテキストが選択されてしまうのを防ぐメソッド。
posted by ねこまんま at 00:39 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月28日

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の遅延を利用して擬似的にキューを作成していくイメージ、入れ子祭りを防ぐだけでなく複数のアニメーションを同時に実行したり、複数のアニメーションが終った際に実行したい処理を制御できたりと結構便利。
posted by ねこまんま at 11:10 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

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は配列で渡した引数を展開して取得する必要があります。
posted by ねこまんま at 10:51 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月27日

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メソッドで遅延の制御が可能になる。

サンプル
posted by ねこまんま at 15:19 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月25日

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 );


この場合2秒後に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メソッドで定義されている処理が実行されます。

サンプル
posted by ねこまんま at 09:00 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月24日

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 Detach remove
posted by ねこまんま at 20:34 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

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)
タグ:Prop jquery attr
posted by ねこまんま at 13:46 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

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>");
});


サンプル
タグ:holdReady jquery
posted by ねこまんま at 08:41 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月08日

画像の読み込みが終ったあとにスクリプトを実行する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
posted by ねこまんま at 05:24 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

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の値を初期化しておきます。
posted by ねこまんま at 05:12 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月04日

豪華なエフェクトでソートや絞り込みを行うjQueryプラグイン「Isotope」

Isotopeは非常に美しいエフェクトで要素の絞り込みや並び替えを行えるjQueryプラグイン。プラグイン本体の読み込みとCSSに次の記述を追加しておきます。

.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}


次のように指定すると子要素の高さが揃えられ準備が完了です。

$('#unitItem').isotope({
layoutMode : 'fitRows'
})


次のようなメソッドを実行するとfilterで要素を絞り込みアニメーションして表示されるようになります。

$('#unitItem').isotope({ filter: ".hoge" });
posted by ねこまんま at 13:21 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする