jQuery Snippets #3

  • Posted on
  • Category : Tips
jQuery Snippets #3

基礎的なものからちょっとした動きの実装方法など、jQueryに関する個人的なメモ・スニペットリストです。書いている内容に対して「もっとスマートにできる」とか「そもそも間違ってる」みたいなのがあれば、参考にさせてもらいたいのでコメントなど通じて是非教えてください。

動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか、CodePenJSFiddleなどを利用して確認してください。

jQuery Snippets #3 目次

  1. 要素の幅・高さを取得する
  2. 現在のウィンドウサイズやスクロール量などを取得・表示する
  3. ウィンドウサイズによって処理を変える
  4. 背景画像などをウィンドウサイズいっぱいにする
  5. カーソルの動きによって背景が動く簡易的なパララックスエフェクト
  6. 簡易的なフェードスライド
  7. 画像が読み込まれない時に代替画像を表示
  8. 画像が読み込まれない時にimg要素を削除
  9. スマートフォンの場合に電話番号リンクを有効にする
  10. スマートフォン以外の場合に電話番号リンクを無効にする

1. 要素の幅・高さを取得する

jQueryを使って要素の大きさを取得する方法で、下記のように幅だけを取得するもの以外にもpaddingborderも含めての大きさを取得することもできます。

jQuery

// width
$('element').width()

// width + padding
$('element').innerWidth()

// width + padding + border
$('element').outerWidth()

// width + padding + border + margin
$('element').outerWidth(true)

上記は幅を取得したい場合になり、高さの場合はwidthの部分をheightに変更すれば取得できます。

目次へ

2. 現在のウィンドウサイズやスクロール量などを取得・表示する

レスポンシブサイト制作時に現在のウィンドウサイズはいくつなのか確認したい時やパララックスサイト制作時などで現在どのくらいスクロールされているのかを知りたい時などに使えるスニペットで、jQueryで下記のように記述することで現在のウィンドウサイズ(width/height)とスクロール量がそれぞれ画面左下に固定表示されるようになります。
各数値を表示する箇所やスタイルに関しても全てjQueryで記述しているので、必要なくなったらこれを丸々消すだけで取り除くことができます。
また、少し変更すれば特定の要素のサイズを表示させたりといったこともできると思います。

jQuery

$(window).on('load resize scroll', function() {
	var wW = window.innerWidth;
	var wH = window.innerHeight;
	var wS = $(window).scrollTop();

	$('body').append('<div id="size-info"></div>')
	$('#size-info').html(
		'Window Width:'  + wW + 'px<br />' +
		'Window Height:' + wH + 'px<br />' +
		'Scroll Value:'  + wS + 'px'
	).css({
		'position': 'fixed',
		'left': '20px',
		'bottom': '20px',
		'z-index': '9999',
		'display': 'inline-block',
		'padding': '1em',
		'background-color': 'rgba(0,0,0,.5)',
		'color': '#fff'
	});
});

目次へ

3. ウィンドウサイズによって処理を変える

レスポンシブでウィンドウサイズ毎に違う処理を実行したいとか、このウィンドウサイズの時だけはこの処理をしてほしくないといったことをしたい時に使える方法です。
やり方はいろいろあるみたいですが、下記は個人的にもよく利用する2パターンの方法です。

3-1. window.matchMediaを使う

CSSのMedia Queriesのようにmin-widthmax-widthなどでサイズを指定し、それにマッチしたら…という形で記述する方法です。
ただし、この方法はIE9以下など一部ブラウザで使用することができません。

※念のため記載しておくとwindow.matchMediaはjQueryではなくJavaScriptのメソッドです。

if ( window.matchMedia('screen and (min-width:768px)').matches ) {
	// ここに768px以上で実行したい処理
} else {
	// ここに767px以下で実行したい処理
}

ちなみに、この方法はIE9以下など一部ブラウザで使用不可と書きましたが、何かしらの理由でどうしてもこのwindow.matchMediaを非対応ブラウザでも使いたいという場合は、matchMedia.jsを利用すればIE9以下をはじめとする非対応ブラウザでも使用することができます。
matchMedia.jsの使い方などを知りたい場合は、window.matchMediaの使い方も含め以下のエントリーで詳しく説明されていて参考になると思います。

3-2. 要素の有無やスタイルで判断

IE9にも対応しなければいけないという場合は、特定の要素が表示されているかやスタイルが適用されているかという条件を用いて判別をするという方法があります。
例えば<div class="foo">...</div>のようなHTMLがあり、それに対して下記ようなCSSが指定されているとします。

CSS

@media screen and (min-width: 768px) {
	.foo {
		display: none;
	}
}

上記は見ての通り「ウィンドウサイズが768px以上の時に.fooの要素を非表示にする」というCSSになりますが、この.fooが表示されているかどうかを下記のように条件に用いることで、特定のウィンドウサイズで処理を実装ということが可能になります。

jQuery

if ( $('.foo').css('display') == 'none' ) {
	// ここに768px以上で実行したい処理
} else {
	// ここに767px以下で実行したい処理
}

今回は条件としてCSSのdisplaynoneを利用していますが他のプロパティを条件にすることももちろん可能で、例えばウィンドウサイズが小さくなると回りこみを解除させることが多いfloatを利用したり、そもそもCSSではなく他の条件を使って実装もできます。

目次へ

4. 背景画像などをウィンドウサイズいっぱいにする

見かけることが多くなったウィンドウサイズいっぱいに背景画像を表示したりする方法です。
height: 100%とかheight: 100vh使えばCSSだけでもできますが、jQueryで実装をしたい時は下記のように記述します。

jQuery

var wW = $(window).width();
var wH = $(window).height();
$('element').css({'width': wW, 'height': wH});

サンプルソースで$('element')としているところに該当要素を記述し、あとはCSSでbackground-imagebackground-sizeを使って背景画像を指定すればウィンドウサイズいっぱいに背景画像が表示できます。

※古いIEなどブラウザによってはbackground-sizeが使用できなかったりするので、プラグインを使用するなど他の方法で実装する必要があります。

ちなみに、上記サンプルソースだとロード時のみの動きとなりますが、ウィンドウサイズを変更した時(リサイズした時)にも同じようにウィンドウサイズいっぱいに表示させたいという時は、下記のようにリサイズ時も処理が行われるようにすれば実装できます。

jQuery

$(window).on('load resize', function() {
	var wW = $(window).width();
	var wH = $(window).height();
	$('element').css({'width': wW, 'height': wH});
});

目次へ

5. カーソルの動きによって背景が動く簡易的なパララックスエフェクト

背景画像が指定されている要素上でカーソルを動かすと背景画像の表示位置が変更されるという、かなり簡易的なパララックスエフェクトの実装方法です。

jQuery

$('element').mousemove(function(e) {
	var x = (e.pageX * -1 / 2), y = (e.pageY * -1 / 2);
	$(this).css('background-position', x + 'px ' + y + 'px');
});

目次へ

6. 簡易的なフェードスライド

スライドを実装する際は最近だとレスポンシブ対応したいとかスワイプ切り替えできるようにしたいなどの要望がきて、手っ取り早く実装したい時にそれらをカバーしている多機能なプラグインを使ったりすることが多いと思いますが、画像サイズも固定することができて単純に一定の時間でフェード切り替えするだけのスライドであれば、それぞれ下記のように記述することで実装できます。

HTML

<div id="slide">
	<div><img src="img01.jpg" /></div>
	<div><img src="img02.jpg" /></div>
	<div><img src="img03.jpg" /></div>
</div>

CSS

#slide {
	position: relative;
	width: 800px;
	height: 500px;
}
#slide > div {
	position: absolute;
	top: 0;
	left: 0;
}

jQuery

$('#slide > div:gt(0)').hide();

setInterval(function() {
	var fadeSpeed = 1000;
	$('#slide > div:first').fadeOut(fadeSpeed).next().fadeIn(fadeSpeed).end().appendTo('#slide');
}, 5000);

切り替えの時間やタイミングについては、サンプルソースで1000や5000と記述している箇所をそれぞれ変更すれば任意のスピードに変更できます。

目次へ

7. 画像が読み込まれない時に代替画像を表示

jQuery

$('img').error(function() {
	$(this).attr('src', 'img_error.jpg');
});

目次へ

8. 画像が読み込まれない時にimg要素を削除

jQuery

$('img').error(function() {
	$(this).remove();
});

目次へ

9. スマートフォンの場合に電話番号リンクを有効にする

ユーザーエージェントを用いて、PCやタブレットなどスマートフォン以外で閲覧した際は下記のようなHTMLがある時にただの文字列として表示し、スマートフォンの時には電話番号リンクを設定する方法です。

HTML

<p><span class="tel">090-0000-0000</span></p>

jQuery

var ua = navigator.userAgent;
if( ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 ) {
	$('.tel').each(function() {
		var txt = $(this).text();
		$(this).parent().html($('<a>').attr('href', 'tel:' + txt.replace(/-/g, '')).append(txt + '</a>'));
	});
}

目次へ

10. スマートフォン以外の場合に電話番号リンクを無効にする

先ほどとは逆にデフォルトで下記のように電話番号リンク設定をしておき、スマートフォン以外だった場合にそれを無効し、タグもspan要素に置き換える方法です。

HTML

<p><a href="tel:090-0000-0000">090-0000-0000</a></p>

jQuery

var ua = navigator.userAgent;
if( !(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) ) {
	$('a[href^="tel:"]').each(function() {
		var txt = $(this).text();
		$(this).parent().html('<span>' + txt + '</span>');
	});
}

目次へ

上記以外のjQuery Snippetsに関しては下記ページにまとめているので、興味ある方はこちらもご覧ください。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。