jQuery

jQueryでスワイプ操作のイベントを取得。

2015.01.06 / Labs

jQueryを使ってスマートフォン、タブレットでのスワイプ操作をTouchイベントから取得する方法です。
サンプルはこちら

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Touch</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function() {
	$("div#touch").bind("touchstart", onTouchStart);
	$("div#touch").bind("touchmove", onTouchMove);
	$("div#touch").bind("touchend", onTouchEnd);
	var direction, position;
	
	//スワイプ開始時の横方向の座標を格納
	function onTouchStart(event) {
	    position = getPosition(event);
	}
	
	//スワイプの方向（left／right）を取得
	function onTouchMove(event) {
		direction = (position > getPosition(event)) ? "left" : "right";
	}
	
	//スワイプ終了時に方向（left／right）をクラス名に指定
	function onTouchEnd(event) {
		$("div#touch").removeAttr("class").addClass(direction);
	}
	
	//横方向の座標を取得
	function getPosition(event) {
		return event.originalEvent.touches[0].pageX;
	}
});
</script>
<style type="text/css">
div#touch {
	width: 200px;
	height: 200px;
	margin: 0px auto;
	background-color: #e6e6e6;
}
div#touch.left {
	background-color: #ff0000;/* 背景を赤色に */
}
div#touch.right {
	background-color: #0000ff;/* 背景を青色に */
}
</style>
</head>
<body>

<div id="touch"></div><!-- スワイプの対象 -->

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Touch</title>

$(function() {

$("div#touch").bind("touchstart", onTouchStart);

$("div#touch").bind("touchmove", onTouchMove);

$("div#touch").bind("touchend", onTouchEnd);

var direction, position;

//スワイプ開始時の横方向の座標を格納

function onTouchStart(event) {

position = getPosition(event);

}

//スワイプの方向（left／right）を取得

function onTouchMove(event) {

direction = (position > getPosition(event)) ? "left" : "right";

}

//スワイプ終了時に方向（left／right）をクラス名に指定

function onTouchEnd(event) {

$("div#touch").removeAttr("class").addClass(direction);

}

//横方向の座標を取得

function getPosition(event) {

return event.originalEvent.touches[0].pageX;

}

});

</script>

div#touch {

width: 200px;

height: 200px;

margin: 0px auto;

background-color: #e6e6e6;

}

div#touch.left {

background-color: #ff0000;/* 背景を赤色に */

}

div#touch.right {

background-color: #0000ff;/* 背景を青色に */

}

</style>

</head>

<body>

</body>

</html>

上記はスワイプの開始（スクリーンにタッチ）からスワイプの終了（スクリーンから離れる）までの座標の距離を測定して、左右の方向を取得するだけの非常にシンプルなものです。
確認のために、方向によってスワイプ対象DIVの背景色を変えるようにしています。

jQueryでウィンドウリサイズ時にタイマー処理。

2013.11.11 / Notes

ウィンドウのリサイズ時に、少し遅れて画像を移動させたりするためのタイマー処理のメモです。
「resize」の部分を「scroll」にすれば、スクロール時のタイマー処理になります。

var timer;
var delay = 100;//遅延時間（ミリ秒）
$(window).resize(function() {
	if (timer) {
		clearTimeout(timer);
	}
	timer = setTimeout(onTimer, delay);
});

function onTimer() {
    //処理
}

var timer;

var delay = 100;//遅延時間（ミリ秒）

$(window).resize(function() {

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(onTimer, delay);

});

function onTimer() {

//処理

}

jQueryのプラグイン「jScrollPane」でカスタムスクロールバーを簡単に設置。

2013.10.26 / Notes

デザインをカスタマイズできる、jQueryのプラグイン「jScrollPane」でスクロールバーを簡単に設置する際のメモです。
サンプルはこちら

設置にはjQuery本体と、jScrollPaneプラグインにマウスホイール用のプラグインをあらかじめ読み込みます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Panel</title>
<link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="common/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="common/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function() {
$("div.scroll-pane").jScrollPane({animateScroll:true, verticalGutter:0}).data("jsp");
});
</script>
</head>
<body>
<div id="content" class="scroll-pane">
<p>ここにテキストなどのコンテンツを記述します。</p>
</div><!-- content -->
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Scroll Panel</title>

$(function() {

$("div.scroll-pane").jScrollPane({animateScroll:true, verticalGutter:0}).data("jsp");

});

</script>

</head>

<body>

<p>ここにテキストなどのコンテンツを記述します。</p>

</div>

</body>

</html>

スタイルシートは最小限のみを記述しています。

div.jspContainer {
	position: relative;
	overflow: hidden;
}
div.jspPane {
	position: absolute;
}
div.jspVerticalBar {
	position: absolute;
	width: 10px;
	height: 100%;
	top: 0px;
	right: 0px;
	background-color: #e6e6e6;
}
div.jspVerticalBar * {
	margin: 0px;
	padding: 0px;
}
div.jspCap {
	display: none;
}
div.jspTrack {
	position: relative;
}
div.jspDrag {
	position: relative;
	left: 0px;
	top: 0px;
	cursor: pointer;
	background-color: #808080;
}
div.scroll-pane {
	width: 500px;
	height: 250px;
	overflow: auto;
}

div.jspContainer {

position: relative;

overflow: hidden;

}

div.jspPane {

position: absolute;

}

div.jspVerticalBar {

position: absolute;

width: 10px;

height: 100%;

top: 0px;

right: 0px;

background-color: #e6e6e6;

}

div.jspVerticalBar * {

margin: 0px;

padding: 0px;

}

div.jspCap {

display: none;

}

div.jspTrack {

position: relative;

}

div.jspDrag {

position: relative;

left: 0px;

top: 0px;

cursor: pointer;

background-color: #808080;

}

div.scroll-pane {

width: 500px;

height: 250px;

overflow: auto;

}

jScrollPane

FirefoxでjQueryが実行されない場合の対処法。

2012.09.06 / Notes

Firefox上でjQueryで記述した処理が、実行されない場合の対処法です。
jQueryの「.ready()」ステートメントで書き始める処理が、Firefoxの場合に限り動作しないケースがたまにあります。
原因ははっきりとは分かりませんが、特にDrupal上で記述すると、よくこの症状に遭遇します。
なので暫定的な対処法として、次のように書くようにしています。

$(document).ready(function() {
	$(window).bind("load", function() {
		//ここに処理を書きます
	});
});

$(document).ready(function() {

$(window).bind("load", function() {

//ここに処理を書きます

});

「.bind()」を入れ子にして、ウィンドウの要素を全て読み込んだ段階で処理を実行するようにします。
Firefoxの場合だけ起こるというのが、やや不可解ではありますけど。

ウィンドウサイズに合わせて画像を全面に表示。

2012.08.10 / Labs

jQueryを使って、ウィンドウサイズに合わせて画像を拡大縮小し、全面に表示する方法です。
画像の縦横比率は保ったままに、ウィンドウの全面を覆うように拡大縮小を行っています。ウィンドウのリサイズの際には、画像もアニメーションでリサイズします。
サンプルはこちら

HTMLファイル内では、画像全面表示のための関数の実行と、ウィンドウリサイズ時の処理を記述しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Adjust Image</title>
<link rel="stylesheet" type="text/css" href="common/css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="common/js/jquery.easing-1.3.min.js"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	var time = 1000;
	var time_resize = null;
	var image = $("div#image");
	$(window).bind("load", function() {
	adjustImage(image, 0);
		$(window).resize(function() {
			if (time_resize) {
				clearTimeout(time_resize);
			}
			time_resize = setTimeout(function() {adjustImage(image, time)}, 100);
		});
	});
});
</script>
</head>
<body>



<div id="image">
<div class="inner">
<img src="images/image.jpg" alt="" />
</div><!-- inner -->
</div><!-- image -->



</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Adjust Image</title>

$(function() {

var time = 1000;

var time_resize = null;

var image = $("div#image");

$(window).bind("load", function() {

adjustImage(image, 0);

$(window).resize(function() {

if (time_resize) {

clearTimeout(time_resize);

}

time_resize = setTimeout(function() {adjustImage(image, time)}, 100);

});

</script>

</head>

<body>

</div>

</div>

</body>

</html>

外部JavaScriptファイル「functions.js」に、画像全面表示のための関数を記述しています。
ウィンドウを覆い尽くすように画像サイズを拡大縮小して、センター表示にしています。

function adjustImage(image, time) {
	var image_width = image.find("img").width();
	var image_height = image.find("img").height();
	var width = 0;
	var height = 0;
	var margin_left = 0;
	var margin_top = 0;
	var ratio_outer = $(window).width()/$(window).height();
	var ratio_inner = image_width/image_height;
	if (ratio_outer > ratio_inner) {
		width = $(window).width();
		height = width/ratio_inner;
	} else {
		height = $(window).height();
		width = height*ratio_inner;
	}
	margin_left = Math.floor(($(window).width()-width)/2);
	margin_top = Math.floor(($(window).height()-height)/2);
	image.find("img").animate({width:width, height:height}, {duration:time, easing:"easeOutQuart"});
	image.animate({top:margin_top, left:margin_left}, {duration:time, easing:"easeOutQuart"});
}

function adjustImage(image, time) {

var image_width = image.find("img").width();

var image_height = image.find("img").height();

var width = 0;

var height = 0;

var margin_left = 0;

var margin_top = 0;

var ratio_outer = $(window).width()/$(window).height();

var ratio_inner = image_width/image_height;

if (ratio_outer > ratio_inner) {

width = $(window).width();

height = width/ratio_inner;

} else {

height = $(window).height();

width = height*ratio_inner;

}

margin_left = Math.floor(($(window).width()-width)/2);

margin_top = Math.floor(($(window).height()-height)/2);

image.find("img").animate({width:width, height:height}, {duration:time, easing:"easeOutQuart"});

image.animate({top:margin_top, left:margin_left}, {duration:time, easing:"easeOutQuart"});

}

画像表示のためのCSSの箇所は次のようになっています。

div#image {
	position: fixed;
	overflow: hidden;
}
div#image div.inner {
	position: relative;
}

div#image {

position: fixed;

overflow: hidden;

}

div#image div.inner {

position: relative;

}