2016-02-14

日時指定で要素の表示と非表示を切り替えるjQueryが超絶便利

JavaScript jQuery

今週セールページを用意するときにタイムセールの枠を作ることになったのですが、カウントダウンタイマーを自動で表示して終わったら非表示にできないかとscriptを探していたらこんなものを見つけました。

http://qiita.com/dribble13/items/3eb39726aba33add6c0aqiita.com

これがすごく便利！

このscriptでできること

指定した日時になったら要素を表示する
指定した日時になったら要素を非表示にする
指定した期間だけ要素を表示する

このscriptの利点

jQueryなので記述が簡単に済む
日時指定が要素のタグ内に記述できるので管理が簡単

導入方法

1.jQueryライブラリを読み込む

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>

を <head>~</head>内に記述。

2.下記scriptを記述もしくは読み込む

直接html内に記述する場合は

<script>
$(document).ready(function() {
  $(".view_timer").each(function(index, target) {
    var startDate = $(this).attr("data-start-date");
    var endDate = $(this).attr("data-end-date");
    var nowDate = new Date();

    if (startDate) {
      startDate = new Date(startDate);
    } else {
      startDate = nowDate;
    }
    if (endDate) {
      endDate = new Date(endDate);
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});
</script>

をに記述

jsファイルとして読み込むには

$(document).ready(function() {
  $(".view_timer").each(function(index, target) {
    var startDate = $(this).attr("data-start-date");
    var endDate = $(this).attr("data-end-date");
    var nowDate = new Date();

    if (startDate) {
      startDate = new Date(startDate);
    } else {
      startDate = nowDate;
    }
    if (endDate) {
      endDate = new Date(endDate);
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

を view_timer.jsなどの名前で保存。

html内に<script src="js/view_timer.js"></script>として読み込む。

3.表示/非表示を切り替えたい要素をspanで囲んで日時指定

指定方法は3パターン

記入例

指定した時間まで表示する（2/15 0:00 から非表示にする）

<span class="view_timer" data-end-date="2016/2/15 0:00"></span>

指定した時間までは非表示（2/15 0:00 から表示する）

<span class="view_timer" data-start-date="2016/2/15 0:00"></span>

指定した期間だけ表示する（2/15 0:00 ～ 2/16 0:00 の間だけ表示する）

<span class="view_timer" data-start-date="2016/2/15 0:00" data-end-date="2016/2/16 0:00"></span>

以上で設定は完了。これで時限式に要素の表示と非表示を切り替えることができます。

しかもタグに個別で直接設定できるため複数のタイマーの管理が分かりやすい。

あとがき

今後のセールページ製作には欠かせないscriptになりそうです。

タイムセールに使ったり、休みの日の自動更新につかったり、まぁscriptである以上はRMSのページなんかでは使えないんですけどね。

2015-10-19

ページ内リンクをすべて滑らかにスクロールさせるjQuery

jQuery JavaScript

f:id:maru0014:20151019221044p:plain ページ内でのリンクを貼る場合

<a href="#pagetop">ページトップへ戻る</a>

などと書きますよね。
Q&Aのページなどの場合大変便利。

でもこれ、普通にリンクを貼るだけだと瞬間的に画面が切り替わってスクロールされている感が少ない！

ちょっとこだわったサイトだとすーーっとスクロールして表示されます。

上に行ったのか下に行ったのか分かりやすく、何より今風でいいですよね。

これを簡単に実装できるようにコピペできるソースを公開！

上記を

<head> ～ </head> 内もしくは</body>直前に挿入。

これだけで滑らかにスクロールされます。

※「リンクが＃で始まる場合」という指定なので別ページ間でのスムーズスクロールは不可です。

2015-10-07

【jQuery】ホームページ読み込み時にローディング画面を表示させる

jQuery JavaScript

仕事でWEB制作している時に使ったもののメモ書きです。年々回線速度はアップしているが、画像が多いページの場合は完全にページを表示するまでに時間がかかってしまうもの。

読み込んでいる間に右画像のようなローディング画面を表示する方法のうちなるべくお手軽なものを紹介。

2015-10-07

<base target="_self">が効かない場合はJavaScriptで対応

JavaScript HTML

インラインフレームを使用する場合はフレーム内のリンクにtargetをつけなければ、フレーム内部でページが開かれてしまう。

これを回避するために使われるのが

上記を<head>内に記述すればリンクのtargetが全て親ウィンドウで開かれるようになる。

しかし、この<base>タグを記述しているにも関わらずtarget="_self"やtarget="_top"、target="_blank"などが効かない現象に陥ることがある。

その原因は・・・