カテゴリー : jQuery

jQuery Scrollify で <a href="id"> なリンクをページ内遷移させるサンプルコード

jQuery Scrollify で <a href="id"> なリンクをページ内遷移させるサンプルコードをご紹介します。

jQuery Scrollify

続きを読む

jQuery textillate.js でテキストの折り返しサンプルコード

jQuery textillate.js でテキストの折り返しの動作確認サンプルコードをご紹介します。

jQuery textillate.js

続きを読む

jQuery textillate.js で CSS3 テキストアニメーション

jQuery textillate.js で CSS3 テキストアニメーションを動かしてみたサンプルコードをご紹介します。

jQuery textillate.js

続きを読む

jQuery Scrollify の Basic setup サンプルコード

jQuery Scrollify の Basic setup を元に実装したサンプルコードをご紹介します。

jQuery Scrollify

続きを読む

jQuery Scrollify の使い方・困ったこと&解決方法

jQuery Scrollify の使い方、困ったこと&解決方法をご紹介します。

jQuery Scrollify

続きを読む

[jQuery] カルーセルライブラリ slick.js の lazyLoad を理解する

jQuery のカルーセルライブラリ slick.js をそのまま使うと slick.js file の読み込みと .slick() method の実行が完了するまで、カルーセルのレイアウトにならず ul, li タグで囲んでいる画像が全て表示されてしまうという問題に直面しました。

jQuery

続きを読む

[jQuery] .data() で整数が丸められることがあるので .attr() で取得する

jQuery の .data() メソッドで整数の桁数が多いと丸められることがあるので .attr() で取得しましょう。

jQuery

続きを読む

jQuery Countdown で日数だけ表示させるスニペット

jQuery Countdown で日数だけ表示させるスニペットをご紹介します。

var countDownEndDate = new Date('2015-01-01T00:00:00+0900');
 
$('#js-countdown').countdown({
  until: countDownEndDate,
  compact: true,
  compactLabels: ['', '', '', ''],
  format: 'D'
});

これで、カウントダウンする日数の部分だけ表示されます。


参考情報

jQuery Countdown

jQuery Countdown Reference

jQuery Countdownの時刻表示形式を変更する

jQuery Countdown の時刻表示形式を変更するスニペットをメモ。

例えば、10 Days : 20 Hours : 30 Minutes : 40 Seconds という表示形式にしたい場合は、下記のように書きます。

$(selector).countdown({
  separator_days: ': ',
  separator: ': ',
  label_dd: ' Days ',
  label_hh: ' Hours ',
  label_mm: ' Minutes ',
  label_ss: ' Seconds '
});

参考情報

kemar/jquery.countdown

[jQuery] $.ajax GET をキャッシュさせない設定方法

jQuery で Ajax GET をキャッシュさせない設定方法をご紹介します。

IE はデフォルトで ajax GET は cahce : true らしく、2回目以降サーバーへリクエストを送りません。

なので、明示的に cache : false してあげるといいです。

$.ajax({
  type: 'GET',
  dataType: 'json',
  url : "http://example.com/",
  cache : false,
  ...
});

また、常にキャッシュを無効にする方法もあります。

$.ajaxSetup で cache : false を設定するコードをJavaScriptの共通処理に加えておけば、ajax GET はデフォルトで cache : false で処理してくれます。

$(function() {
  $.ajaxSetup({
    cache: false
  });
});

IE11 で ajax GET の結果がキャッシュされてて正常に動かなくて苦しみました・・・

参考情報