720pxを超えた場合は720pxにして表示します。
FirefoxとかChromeとか: CSSでmax-widthを指定してあげれば大丈夫
img{max-width:720px;}
IE様
img{
behavior: expression( (function( el ) {
el.style.width = el.clientWidth > 720 ? '720px' : 'auto';
el.runtimeStyle.behavior = 'none';
})( this ));
}
参考
http://blog.livedoor.jp/eeu/archives/55319734.html
http://dogmap.jp/2009/06/17/javascript-image-natural-size-2/
以下で動作を確認できます。
今更感漂いますが。
<input type="checkbox" id="allcheck"/> 全選択 <input type="checkbox" class="check"/> 項目1 <input type="checkbox" class="check"/> 項目2 <input type="checkbox" class="check"/> 項目3
$('#allcheck').bind("click",function(){
$('.check').attr("checked",$(this).attr("checked"));
});
onClickでHTMLタグにも埋め込んでもそんなに邪魔にならない量。
var copy_sortable_option = {
connectWith: '.list'
,start: function(event,ui){
old_index = ui.helper.index();
}
,update: function(event, ui){
if(ui.sender){
pos = old_index - 1;
if(old_index){
$(ui.sender).find("li:eq(" + (pos) + ")").after($(ui.item).clone());
}else{
$(ui.sender).prepend($(ui.item).clone());
}
}
}
}
$('.list').sortable(copy_sortable_option);
$(document).ready(function(){
$.widget('own.progressbar2', $.ui.progressbar, {
_base: $.ui.progressbar.prototype,
_refreshValue: function() {
var value = this.value();
var percentage = this._percentage();
if ( this.oldValue !== value ) {
this.oldValue = value;
this._trigger( "change" );
}
this.valueDiv
.toggleClass( "ui-corner-right", value === this.options.max )
.animate({
"width" : percentage.toFixed(0) + "%"
});
this.element.attr( "aria-valuenow", value );
}
});
$( "#a" ).progressbar({value: 37});
$( "#b" ).progressbar2({value: 37});
$('#add10').bind("click",function(){
var value = $( "#a" ).progressbar( "option", "value" ) + 10;
if(value > 100 ) value = 100;
$('#a').progressbar({"value": value});
$('#b').progressbar2({"value": value});
});
$('#min10').bind("click",function(){
var value = $( "#a" ).progressbar( "option", "value" ) - 10;
if(value < 0 ) value = 0;
$('#a').progressbar({"value": value});
$('#b').progressbar2({"value": value});
});
});
HTMLはこんな感じでテスト。
<body> <div id="a"></div> <div id="b"></div> <input type="button" id="add10" value="+10" /> <input type="button" id="min10" value="-10" /> </body>
なんかお手軽じゃないような気がしたけどまあいいか。
会社でちょっと使ったネタ。
大量のAjaxを発行し、すべてが完了した後に１回だけ実行したい処理がある場合、こんな感じで書きます。
$(document).ready(function(){
//なんかたくさんのAjax発行
$.ajax();
$.ajax();
$.ajax();
$.ajax();
$.ajax();
//
//
var Timer = setInterval(
function(){
if(jQuery.active == 0){
//全部終わってるので処理を完了すると同時にタイマー解除
clearInterval(Timer);
alert("finish");
}
},500);
//こんな風でも。
(function(){
if(jQuery.active == 0){
//全部終わってる
alert("finish");
}else{
//終わってない。
setTimeout("arguments.callee()",500);
}
}();
});
jQuery.activeは現在実行中のajaxがいくつあるか返してくれます。
これを監視し続ければ終わったタイミングが図れます。
ただ、他の場所でAjaxが発行され続けたりすると何時まで経っても実行されないので注意。
もっと頑張ろうとするなら、こちらのサイトが役に立ちます。
裏jQuery – 特殊なTriggerを作ってみよう
[お手軽実装]は気軽に再現できる便利なエフェクトとかプラグインの利用法とかをゆるーい短ーいコードでお伝えしていきます。なるべくサンプルは既存のサイトに組み込むとか、ブログ内で再現とか。書くほうもお手軽に済ませたいのでコードだけになる可能性も。
大体の場合そのままのコードじゃ都合悪かったり動かなかったりするだろうけどそのへんはほら、お手軽に修正してください。
週に３～４本のペースで出せたらいいなと思ってます。
このサイトの最初のリストがずらーってならぶようなエフェクト。
*↑IEは別ページ表示しちゃうのでFirefoxとかChromeでみるといいよ。一応IEのほうでも動くようにしましたが。
$(document).ready(function(){
var height = $(document).height();
var margin = $('.button:eq(0)').css("marginTop");
$('.button').css("marginTop",height)
.animate({
"marginTop" : margin
}
,1000
,"swing"
);
});
このままだと最初に見えちゃうので対処は必要。
.buttonをCSSでdisplay:noneしとくとか。 コメント欄@otchyさんより。
$(document).ready(function(){
var Timer;
$('.input').bind("keyup",function(){
//タイマー削除
clearTimeout(Timer);
Timer = setTimeout(
function(){
$.ajax({
type: "POST",
url: "URL",
data: {}
});
}
,500);
});
});
