kdcsライブラリー

スクロールしてもグローバルナビを上部で固定する（jQuery使用）
pcで表示の場合のみ固定し、モバイル表示の時はslicknavを表示する

ページhtml
※ナビ固定分の縦幅の起点のため空のdivタグ#navFixedを入れる
モバイル表示の際は、このdivタグは非表示処理(display: none;)する

<div id="nav">
ナビ記述・・・
</div><!--/#nav-->

<div id="navFixed"></div>
<div id="main">
メインコンテンツ・・・
</div><!--/#main-->

css

#nav { text-align: center; background: #2f62c5; }
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

/* スマホ対応
---------------------------------------------*/
@media only screen and (max-width: 780px) {
#nav {
  display: none;
  }
div#navFixed { display: none; }
}

javascript

//ナビ スクロール固定 --------------------------------------
$(function() {
  var $win = $(window),
      $main = $('#navFixed'),
      $nav = $('#nav'),
      navHeight = $nav.outerHeight(),
      navPos = $nav.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
      $main.css('margin-top', navHeight);
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});

ページスクロール時に要素をふわっと出すjQueryのプラグイン「jquery.inview.js」

ダウンロードはこちらから
jquery.inview.jsまたはjquery.inview.min.jsを入手

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/js_file/jquery.inview.min.js"></script>

上移動とフェードインの場合 HTML

<div id="other1">
<p>other</p>
<div class="divBox3 divMove"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/680x220.jpg"></a></div>
<div class="divBox3 divMove"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/680x220.jpg"></a></div>
<div class="divBox3 divMove"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/680x220.jpg"></a></div>
</div><!--/other-->

css

.divBox3 {
    float: left;
    width: 33.3%;
    padding-bottom: 18px;
    text-align: center;
    transition: .8s;
}
.divMove{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.move{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

設定js

//inview オプション -------------------------------------
$(function() {
	$('.divMove').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('move');
		}
		else{
			$(this).stop().removeClass('move');
		}
	});
});

elseの部分を外すと初めの１回だけ動作する

bxsliderをカルーセル化し、画面いっぱいに表示させるカスタマイズ

キャプションに長めの文章を表示させる場合、画像上にマウスを合わせると
ツールチップが表示されてしまうのを回避したい。

jquery.bxslider.jsでcaptionの記述部分の「title」を「name」に変更し
html記述部分、imgタグ内にnameを使う

<img src="<?php bloginfo('template_url'); ?>/images/xxx.jpg" alt="" title="" name="">

jQueryスライドショー「Camera slideshow」現在は無料配布されてないっぽい

(続きを読む…)

入力フォームに日付入力がある場合、Datepickerでカレンダーを表示させ
クリックで入力できるようにする方法

入力フォーム内のhtmlはこちら
idは任意（オプションの設定と合わせる）readonly=”readonly”を指定することで
スマホのキーボード表示させないようにする。typeはtext

<label>日付<input id="calendar" type="text" readonly="readonly"></label>

jQueryとjQuery-UIを使用するのでgoogleからリンク（今回は1.11.1と1.11.4を使用）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

カレンダーを日本語化するために以下をリンク

<script src="<?php bloginfo('template_url'); ?>/js/datepicker-ja.js"></script>

オプションの設定

<script>
$(function() {
$('#calendar').datepicker({
        minDate: '1d', //明日から
        maxDate: '+1m', //1ヶ月後までが選択可能範囲
        dateFormat: 'yy年mm月dd日(D)', //年-月-日(曜日)
beforeShowDay: function(day) {
 var result;
 switch (day.getDay()) {
 
case 3: // 水曜日を選択できないようにする
 result = [false];
 break;
 case 4: // 木曜日を選択できないようにする
 result = [false];
 break;
 default:
 result = [true]; // それ以外は選択できる
 break;
 
}
 return result;
 }
    });
});
</script>

カレンダーのスタイルシート
今回は公式テーマの「redmond」を使用

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" >