JavaScript

DrupalでjQueryを利用する際に気をつけること。

2012.03.01 / Notes

DrupalではデフォルトでjQueryが含まれていますが、利用の際には少し気をつける必要があります。
通常jQueryでは、ステートメントの最初に「$」マークのエイリアスから書き始めますが、Drupalでは、他のJavaScriptライブラリとのコンフリクトをさけるために、「$」から書き始めることができません。

それを回避する方法としては「$」エイリアスを使わずに、

jQuery("div").show();

1	jQuery("div").show();

というように「jQuery」から始めることで利用できます。
この場合、既存のスクリプトを再利用する際に「$」を「jQuery」に書き換えないといけないので、都合の悪いこともあります。
そのままの「$」を使いたい場合には、下記の様にステートメントごと「(function($){}(jQuery));」でくくって、「$」を「jQuery」に置き換える方法もあります。

(function($) {
  $("div").show();
}(jQuery));

(function($) {

$("div").show();

}(jQuery));

jQueryを使ったシンプルなイメージスライダー。

2012.02.11 / Labs

jQueryを使ったシンプルなイメージスライダーのサンプルです。
ボックス内に複数の画像を横に並べて、左右にスライド表示をする仕組みです。
サンプルはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Image Slider</title>
<link href="common/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="common/js/init.js"></script>
</head>
<body>



<div id="gallery">
<div class="inner">
<img src="images/01.jpg" alt="" />
<img src="images/02.jpg" alt="" />
<img src="images/03.jpg" alt="" />
<img src="images/04.jpg" alt="" />
<img src="images/05.jpg" alt="" />
</div><!-- inner -->
</div><!-- gallery -->
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>



</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Image Slider</title>

</head>

<body>

</div>

</div>

</body>

</html>

HTML内では#galleryボックス内に画像を並べているだけです。画像の枚数には指定はありませんので、何枚でもOKです。

div#gallery {
	width: 560px;
	height: 400px;
	overflow: hidden;
}
div#gallery div.inner {
	height: 400px;
}
div#gallery img {
	display: block;
	float: left;
}

div#gallery {

width: 560px;

height: 400px;

overflow: hidden;

}

div#gallery div.inner {

height: 400px;

}

div#gallery img {

display: block;

float: left;

}

CSSでは基本的にボックスのサイズ指定と、オーバーフロー時に隠す設定のみです。

$(function() {
	var positions = new Array();
	var total = 0;
	var current = 0;
	$(window).bind("load", function() {

		//ウィンドウの読み込み完了時に、全画像の横幅からスライダー全体の横幅と各画像の左端座標を取得
		$("div#gallery img").each(function() {
			total += $(this).width();
			positions.push(total);
		});
		
		//座標配列の一番最後を削除し、配列の先頭に0を挿入
		positions.pop();
		positions.unshift(0);
		
		//全画像の横幅から内側ボックスの横幅を設定
		$("div#gallery div.inner").width(total);
		
		//prevをクリックした際に、現在、一番左端以外だったら前の画像へスライド
		$("a.prev").click(function() {
			if (current > 0) {
				current--;
				shiftImage();
			}
			return false;
		});
		
		//nextをクリックした際に、現在、一番右端以外だったら次の画像へスライド
		$("a.next").click(function() {
			if (current < positions.length-1) {
				current++;
				shiftImage();
			}
			return false;
		});
	});
	
	//内側ボックスの位置をネガティブマージンにてスライド
	function shiftImage() {
		$("div#gallery div.inner").stop().animate({marginLeft:"-"+positions[current]+"px"}, {duration:750});
	}
});

$(function() {

var positions = new Array();

var total = 0;

var current = 0;

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

//ウィンドウの読み込み完了時に、全画像の横幅からスライダー全体の横幅と各画像の左端座標を取得

$("div#gallery img").each(function() {

total += $(this).width();

positions.push(total);

});

//座標配列の一番最後を削除し、配列の先頭に0を挿入

positions.pop();

positions.unshift(0);

//全画像の横幅から内側ボックスの横幅を設定

$("div#gallery div.inner").width(total);

//prevをクリックした際に、現在、一番左端以外だったら前の画像へスライド

$("a.prev").click(function() {

if (current > 0) {

current--;

shiftImage();

}

return false;

});

//nextをクリックした際に、現在、一番右端以外だったら次の画像へスライド

$("a.next").click(function() {

if (current < positions.length-1) {

current++;

shiftImage();

}

return false;

});

//内側ボックスの位置をネガティブマージンにてスライド

function shiftImage() {

$("div#gallery div.inner").stop().animate({marginLeft:"-"+positions[current]+"px"}, {duration:750});

}

});

画像のスライドは「prev」「next」のリンクをクリックした際に、左右にスライドします。スライドする位置は、あらかじめ各画像サイズをもとに座標位置を配列に格納しておきます。

Google Mapsで住所、緯度・経度を取得。

2012.01.27 / Labs

Google Maps APIを使って、マーカーの位置から住所、緯度・経度を取得と、住所からマーカーの移動および、緯度・経度の取得するためのコードのメモです。
サンプルはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google Map Search</title>
<script type="text/javascript" src="common/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	setMapSearch({
		container: "map",
		lat: 35.68075,
		lng: 139.76720,
		zoom: 15
	});
});
</script>
</head>
<body>



<div id="map" style="width:500px; height:500px;"></div>



<form>
緯度：<input type="text" id="lat"/><br />
経度：<input type="text" id="lng"/><br />
住所：<input type="text" id="address"/>
<input type="submit" id="search" value="検索"/>
</form>



</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Google Map Search</title>

$(function() {

setMapSearch({

container: "map",

lat: 35.68075,

lng: 139.76720,

zoom: 15

});

</script>

</head>

<body>

<form>

緯度：<input type="text" id="lat"/><br />

経度：<input type="text" id="lng"/><br />

住所：<input type="text" id="address"/>

</form>

</body>

</html>

マーカーのドラッグで緯度・経度を書き換えて、ドロップの際に住所を書き換えています。
また住所から検索で、マーカーを移動して、緯度・経度を書き換えています。
JavaScript自体のコードはこちら。

function setMapSearch(params) {
	var geocoder = new google.maps.Geocoder();
	var position = new google.maps.LatLng(params.lat, params.lng);
	var map_options = {
		zoom: params.zoom,
		center: position,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById(params.container), map_options);
	var marker = new google.maps.Marker({
		position: position,
		map: map, 
		draggable: true
	});
	
	//マーカーのドラッグ時
	google.maps.event.addListener(marker, "drag", function() { 
		updateLatLng();
	});
	
	
	//マーカーのドロップ時
	google.maps.event.addListener(marker, "dragend", function() {
		var latlng = marker.getPosition();
		geocoder.geocode({latLng:latlng, language:"ja"}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[0].geometry) {
					updateAddress(results[0].formatted_address);
				}
			}
		});
	});
	updateLatLng();
	setSearch();
	
	//緯度・経度を書き換え
	function updateLatLng() {
		var latlng = marker.getPosition();
		$("input#lat").val(latlng.lat());
		$("input#lng").val(latlng.lng());
	}
	
	//住所を書き換え
	function updateAddress(address) {
		$("input#address").val(address);
	}
	
	//住所から検索して、マップを移動
	function setSearch() {
		$("input#search").click(function() {
			var address = $("input#address").val();
			geocoder.geocode({"address": address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					map.setCenter(results[0].geometry.location);
					marker.setPosition(results[0].geometry.location);
					updateLatLng();
				}
			});
			return false;
		});
	}
}

function setMapSearch(params) {

var geocoder = new google.maps.Geocoder();

var position = new google.maps.LatLng(params.lat, params.lng);

var map_options = {

zoom: params.zoom,

center: position,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById(params.container), map_options);

var marker = new google.maps.Marker({

position: position,

map: map,

draggable: true

});

//マーカーのドラッグ時

google.maps.event.addListener(marker, "drag", function() {

updateLatLng();

});

//マーカーのドロップ時

google.maps.event.addListener(marker, "dragend", function() {

var latlng = marker.getPosition();

geocoder.geocode({latLng:latlng, language:"ja"}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

if (results[0].geometry) {

updateAddress(results[0].formatted_address);

}

});

updateLatLng();

setSearch();

//緯度・経度を書き換え

function updateLatLng() {

var latlng = marker.getPosition();

$("input#lat").val(latlng.lat());

$("input#lng").val(latlng.lng());

}

//住所を書き換え

function updateAddress(address) {

$("input#address").val(address);

}

//住所から検索して、マップを移動

function setSearch() {

$("input#search").click(function() {

var address = $("input#address").val();

geocoder.geocode({"address": address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location);

marker.setPosition(results[0].geometry.location);

updateLatLng();

}

});

return false;

});

}

jQueryでアンカーポイントまでスクロール。

2011.04.01 / Labs

jQueryでページ内のアンカーポイントまでスムーズにスクロールするスクリプトです。
スクロールのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

function scrollToAnchor() {
	$("a[href*=#]").click(function() {
		var target = this.hash;
		var offset = $(target).offset().top;
		if (offset > $(document).height()-$(window).height()) {
			offset = $(document).height()-$(window).height();
		}
		$("html, body").animate({scrollTop:offset}, {duration:1000, easing:"easeOutQuart"});
		return false;
	});
}

function scrollToAnchor() {

$("a[href*=#]").click(function() {

var target = this.hash;

var offset = $(target).offset().top;

if (offset > $(document).height()-$(window).height()) {

offset = $(document).height()-$(window).height();

}

$("html, body").animate({scrollTop:offset}, {duration:1000, easing:"easeOutQuart"});

return false;

});

}

<a>タグのリンクからハッシュ（#の部分）のみを抽出して、ページ先頭からの高さを調べています。

jQueryで要素の存在を確認する方法。

2011.03.13 / Notes

jQueryを使って、要素の存在を確認する際のメモです。

$(function() {
	if ($("#target").length > 0) {
		//#targetが存在した場合の処理
	}
});

$(function() {

if ($("#target").length > 0) {

//#targetが存在した場合の処理

}

});