JavaScript

[JavaScript]汎用スムーススクロール

汎用スムーススクロール

$('a[href^="#"]').click(function(e){
	var $this = $(this);
	var id = $this.attr('href').split('#').pop();
	var top = $('#'+id).offset().top;
	$('html,body').stop().animate({scrollTop:top},{duration:400});
	return false;
});

[JavaScript]get OS version

get OS version

function getiOSVersion(){
	if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
		var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
		return parseInt(parseInt(v[1], 10).toString()+parseInt(v[2], 10).toString()+parseInt(v[3] || 0, 10).toString() ,10);
	}
	return 0.0;
}
function getAndroidVersion(){
	if( navigator.userAgent.indexOf("Android") > 0 ) {
		var v = navigator.userAgent.match(/Android [\d\.]+/)[0].split(' ').pop().split('.');
		return parseInt(parseInt(v[0], 10).toString()+parseInt(v[1], 10).toString()+parseInt(v[2] || 0, 10).toString() ,10);
	}
	return 0.0;
}

[javascript]isArray

isArray

var isArray = function(target){
	return getTypeString(target) == 'array';
};
var getTypeString = function(target){
	if(target == null){
		return "null";
	}
	var toString = {}.toString;
	return (typeof target === "object" || typeof target === "function") ? toString.call(target).split(' ').pop().toLowerCase().replace(/\]/g,'') : typeof obj;
};

[javascript]orientationchange

iOSのorientationchange時の処理順
画面サイズ変更 -> resize -> orientationchange

Androidのorientationchange時の処理順
orientationchange -> 画面サイズ変更 -> resize
又は 画面サイズ変更 -> resize -> orientationchange
※端末(Androidのバージョン?)によってはこの順番の時もある

よってjsで端末回転時の処理をする際は下記のようにする。

デモ

var oEventCount = 0;
$(window).off('.ori').on('orientationchange.ori resize.ori',function(e){
	oEventCount++;
	if(oEventCount < 2){
		return;
	}
	oEventCount = 0;

	//do something
});

・resizeイベントだけで済む場合もある。
・iOSの場合、スクロールでステータスバーが出たり引っ込んだりした時にresizeイベントが走る

こっちのほうが良い場合も

var oEventId;
$(window).off('.ori').on('orientationchange.ori resize.ori',function(e){
	clearTimeout(oEventId);
	oEventId = setTimeout(function(){
		//do something
	},300);
});

[JavaScript]フォームの値を動的に取得する

フォームの値を動的に取得する
全角入力で入力確定前でも
IE8対応

サンプル

html

<div>
	<form name="sampleForm" action="" method="post">
		<input type="text" name="ps" value="" style="width:300px;">
	</form>
	<div id="result"></div>
</div>

js

(function(){
	function addEvent(element, type, listener, flg) {
	    if (!element || typeof(element) == "undefined") {
	        return
	    }
	    if (element.addEventListener) {
	        element.addEventListener(type, listener, flg);
	    } else {
	        element.attachEvent('on' + type, function() {
	            listener.call(element, window.event);
	        });
	    }
	}
	function init(){
		addEvent(document.sampleForm.ps, ('oninput' in window) ? 'input':'propertychange', function(e){
			document.getElementById('result').innerHTML = document.sampleForm.ps.value;
		}, true);
		addEvent(document.sampleForm, 'submit', function(e){
			e.preventDefault();
		});
	}

	addEvent(window,'load',function(){
		init();
	},true);
})();

[JavaScript]ページのロードが終わったらgifアニメーションをスタートさせる

ページのロードが終わったらgifアニメーションをスタートさせる

画像は2つ用意しておく

アニメーションgifの最初の状態のpng


アニメーションgif(ループしない)

サンプル

//execute when all things loaded
$(window).load(function(){
	var image = new Image();
	image.src = "gif.gif?"+(new Date()).getTime();
	$(image).load(function(){
		$('#main-kv').hide();
		$('#main-kv').parent().append(image);
	});
});

[JavaScript]プロパティ名を指定してソート

プロパティ名を指定してソート

function g_sortOn(_propertyName){
    return function(a,b){
        if( a[_propertyName] > b[_propertyName] )return 1;
        if( a[_propertyName] < b[_propertyName] )return -1;
        return 0;
    }
}
var tmp = targetArray.sort( g_sortOn('name') );