カテゴリー: jQuery

IE8で半透明な背景を実装する方法。
.show など、透明度をjsなどで変更する場合、
ただcssで指定しておくだけでは、
半透明が無効になってしまう。
要素の操作後にscriptの側から改めて指定してあげなくてはいけないみたい……。
（4行目末尾のように）

	$(window).on('load resize', function(){
		var winWidth = $(window).width();
		var winHeight = $(window).height();
		$('#allWrap').css('width',winWidth).css('height',winHeight).css('opacity', .6);
	});

にょるんにょるん。

        <div id="whatsnew">
            <h2>更新履歴</h2>
            <a href="#" id="viewAll">全て見る</a>
            <dl>
                <dt> 2013.08.13 </dt>
                <dd> 更新内容更新内容</dd>
            </dl>
            <div id="whatsnewAll">
                <dl>
                    <dt> 2013.08.12 </dt>
                    <dd> 更新内容更新内容</dd>
                </dl>
            </div>
        </div>

	$(function($){
		$("#whatsnewAll").hide();
		$("#viewAll").click(function () {
			$(this).toggleClass('selected')
			$("#whatsnewAll").slideToggle("slow");
			if($(this).hasClass('selected')){
				$(this).text('閉じる');
				return false
			}else{
				$(this).text('全て見る');
				return false
			}
		});
	});

var off = $('div#hoge').offset();
$('html,body').animate({scrollTop: off.top, scrollLeft: off.left}, 1000);

指定位置までするするするっとスクロール！

参考
http://piyopiyocs.blog115.fc2.com/blog-entry-63.html

普通はjquery.syg_imageradioとか使えばいいのですが、
画像をクリックしたいっていう特殊な事例の場合。

$(function () {
//IE Label img
        if ($.browser.msie) {
                $('label').click(function () {
                        $('#' + $(this).attr('for')).focus().click();
                });
        }
});

label img {
        cursor:pointer;
}

参考サイト
http://depthcode.com/2010/08/ie-label-img.html

Twitter投稿用文字数カウント。

//初期状態
var textCount = $('#voteTextarea').val().length;
var endsCount = 140 - textCount;
$('#endsCount').text(endsCount);
$('#voteAllWrap').fadeIn('slow');

//こっちの記述でもいいけど
$('#voteTextarea').on('keyup',function(){
	var textCount = $('#voteTextarea').val().length;
	var endsCount = 140 - textCount;
	$('#endsCount').text(endsCount);
});

遅延動作をさせたいなら以下のプラグインを入れて、スクリプトを書き換える。
200のとこは、遅延させたいミリ秒を入れる。
http://benalman.com/projects/jquery-throttle-debounce-plugin/

//こっちだとなおいい
$('#voteTextarea').on('keyup', $.debounce(200, function(){
	var textCount = $('#voteTextarea').val().length;
	var endsCount = 140 - textCount;
	$('#endsCount').text(endsCount);
 }));

参考記事はこちら
http://ktkne.st/elab/post/2012/strcount-throttle-debounce.html

追記。
URLの文字数は短縮されるので、
予め投稿する文字数がわかってる場合は
var endsCount = 140 – textCount;
あたりの文字数を変更するといい。
例えば30文字のURLを投稿したい場合は22文字に短縮されるから、
var endsCount = 148 – textCount;
の扱いにすればいい。

ページを読み込んでからアンカーリンクを動作させるためのjQuery

$(window).load(function() {
	var ahash = location.hash;
	var gotoNum = $(ahash).offset().top;
	$('html,body').animate({ scrollTop: gotoNum }, 'slow');
	return false;
});

アニメーションを最小限にする場合’slow’を0に変える（’fast’でもいいかも）

$(window).load(function() {
	var ahash = location.hash;
	var gotoNum = $(ahash).offset().top;
	$('html,body').animate({ scrollTop: gotoNum }, 0 );
	return false;
});

参考
$(document).ready()？ $(window).load()　の違い
http://www.softel.co.jp/blogs/tech/archives/2425

jQueryで画面をスクロールさせる時の注意点
http://less.carbonfairy.org/post/941824993

jQuery の animate の速度（動作時間）を指定する方法
http://alphasis.info/2011/05/jquery-animate-duration/