jQuery Snippets #3

基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第3弾です。

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

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

jQueryを使って要素の大きさを取得する方法で、下記のように幅だけを取得するもの以外にもpaddingやborderも含めての大きさを取得することもできます。
また、ここでは高さを取得したい場合はwidthの部分をheightに変更すれば取得できます。

jQuery

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

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

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

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

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

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

jQuery

$(window).on('load resize scroll', function() {
  var wW = window.innerWidth,
      wH = window.innerHeight,
      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'
  });
});

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

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

window.matchMediaを使う

CSSのMedia Queriesのようにmin-widthやmax-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の使い方も含め下記エントリーで詳しく説明されていて参考になると思います。

[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法｜ memocarilog

要素の有無やスタイルで判断

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

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

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

jQuery

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

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

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

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

jQuery

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

サンプルコードで$('element')としているところに該当要素を記述し、あとはCSSでbackground-imageやbackground-sizeを使って背景画像を指定すればウィンドウサイズいっぱいに背景画像が表示できます。ただ、古いIEなどブラウザによってはbackground-sizeが使用できなかったりするので、その場合はプラグインを使用するなど他の方法で実装する必要があります。

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

jQuery

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

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

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

jQuery

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

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

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

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

#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と記述している箇所をそれぞれ変更すれば任意のスピードに変更できます。

Simple Auto-Playing Slideshow | CSS-Tricks

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

jQuery

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

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

jQuery

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

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

ユーザーエージェントを用いて、PCやタブレットなどスマートフォン以外で閲覧した際は下記のような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>'));
  });
}

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

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

<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に関しては下記ページから確認できます。

jQuery Snippets