カテゴリー : JavaScript

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

[JavaScript] moment.js で日付型 Date のタイムゾーンを JST に変更する

JavaScript で日付扱うライブラリ moment.js で日付型 Date のタイムゾーンを JST に変更するスニペットをメモ。

var current_date = new Date();
var timezone = "Asia/Tokyo";
var current_date_jst = moment(current_date).tz(timezone).format('YYYY/MM/DD HH:mm:ss');

参考情報

Timezone Offset – Moment.js | Documentation

[JavaScript] 配列の中から最大値 or 最小値を取得する

JavaScript で、配列の中から最大値、または最小値を取得するスニペットをメモ。

var arr = [3, 1, 4, 1, 5, 9, 2, 6];
 
// 最大値
Math.max.apply(null, arr);  // → 9
 
// 最小値
Math.min.apply(null, arr);  // → 1

参考情報

【Javascript】配列の値の中から、最大値、最小値を求める(配列を引数に展開する) at softelメモ

[JavaScript] document.write() が動かない

JavaScript で、document.write() が動かないことがあって、色々と調べたメモ。

メモ: javascriptのdocument.write()がうまく動かない

読み込みのタイミングによっては外部 script のdocument.writeは無視される – はこべブログ ♨

外部 script の読み込みのタイミングによってはdocument.writeが無視される場合がある

Fenrir's BLog: Ajaxでdocument.writeするJavaScriptへの対策

document.write()の実行タイミングをずらす方法

JavaScript TUEEEEEEEってなるdocument.writeのテクニック – あさdev

[JavaScript] XMLHttpRequest で ajax GET

JavaScript にて、XMLHttpRequest で ajax GET する方法をメモ。

jQuery.ajax() が使えればカンタンに実装できるのですが、JavaScript縛りのときは下記のように書く必要があります。

var makeXMLHttpRequest = function(url) {
  var httpRequest;
 
  if (window.XMLHttpRequest) {
    // Mozilla, Safari, Chrome, ...
    httpRequest = new XMLHttpRequest();
    if (httpRequest.overrideMimeType) {
      httpRequest.overrideMimeType('text/xml');
    }
  } else if (window.ActiveXObject) {
    // IE
    try {
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
      }
    }
  }
 
  if (!httpRequest) {
    // console.log('Cannot create XMLHTTP instance');
    return false;
  }
 
  httpRequest.onreadystatechange = function() {
    processResponse(httpRequest);
  };
  httpRequest.open('GET', url, true);
  httpRequest.send('');
};
 
var processResponse = function(httpRequest) {
  if (httpRequest.readyState == 4) {
    if (httpRequest.status == 200) {
      doSomething(httpRequest);
    } else {
      // error
    }
  }
};

以上です。


参考情報

Getting Started – AJAX | MDN

XMLHttpRequest の使い方 – WebOS Goodies

[JavaScript] form内にname=”submit”という要素があるとsubmit()が動かない

JavaScript で、form内にname=”submit”という要素があると .submit() が動かないらしいです。

そんなわけで、jQueryで下記のように書いたら Property ‘submit’ of object # is not a function というエラーが出ました。

<form id="js-form" method="POST" action="/create">
  <input type="text" name="sample" />
  <input id="#js-submit-btn" type="submit" name="submit" value="保存" />
</form>
 
<script type='text/javascript'>
  $('#js-submit-btn').click(function(){
    $(this).attr('disabled', true);
    $('#js-form').submit();
  });
</script>

formタグの中に submit という name の要素を置くと、そちらを参照してしまうようです。

なので、

<input id="#js-submit-btn" type="submit" name="submit" value="保存" />

<input id="#js-submit-btn" type="submit" name="save" value="保存" />

というように修正すればOKです。


参考情報

javascriptでsubmitできない? | dTblog | デザインとプログラムの境界をさまようブログ

[jQuery]form.submit()できない原因 | HappyQuality

javascript – Property 'submit' of object #<HTMLFormElement> is not a function – Stack Overflow

[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 の結果がキャッシュされてて正常に動かなくて苦しみました・・・

参考情報

[jQuery] slideDown() のアニメーションが動かないときの解決方法

jQuery の slideDown() のアニメーションが動かないときの解決方法をご紹介します。

普通に使う分には問題ないのですが、divを入れ子にしたような構造で使う場合に slideDown() を呼び出してもアニメーションが動かず、show() を呼んだときのようなパッと表示されてしまいました。

以下に、アニメーションが動かなかったときのHTMLと、解決したJavaScriptのコードを記載します。

.show().slideDown() のメソッドチェーンで解決する

// 一旦、内部elementを非表示にする
$('#content-inner').hide();
 
// 外側のelementを表示してから slideDown()
$('#content-outer').show().slideDown();
 
// 最後に、内部のelementにも slideDown()
$('#content-inner').slideDown();

slideUp() は普通に使うだけ

$('#content-outer').slideUp();
$('#content-inner').slideUp();

参考情報

javascript – jQuery slideDown() animation not working – Stack Overflow

codeigniter – JQuery slidedown effect not working? – Stack Overflow

slideDown([speed], [callback]) – jQuery 日本語リファレンス

slideUp([speed], [callback]) – jQuery 日本語リファレンス

[jQuery] スクロール中に特定の要素を固定するプラグイン「hcSticky」

スクロール中に特定の要素を固定するjQueryプラグイン「hcSticky」が便利だったのでご紹介します。

hcSticky – jQuery Floating Sticky Plugin | Some Web Log

特定の要素に hcSticky() を呼ぶだけで、スクロール時に要素を固定してくれます。

$('#sidebar').hcSticky();

使い方がシンプルでおすすめです。

[jQuery] Minimalect で onChange イベントを発生させる

フォームのselect要素を綺麗に表示させる jQuery ライブラリ「Minimalect」で onChange イベントを発生させる方法をメモ。

$('#js-target-select').minimalect({
  onchange: function() {
    $('#js-target-select').trigger('change');
  }
});
 
$('#js-target-select').change(function(){
  // do onchange event
});

上記のように Minimalect の onchange で select の onchange を発火させればいいみたい。


参考情報

jQuery Minimalectのonchange – プログラミングメモ