読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

要素の高さをレスポンシブでそろえたい時【jquery-fixHeightSimple.min.js】


$(function(){

// ページ読み込みでsameheight関数
sameHeight();

// ブラウザリサイズ リサイズ完了時に実行
var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {

      sameHeight();


    }, 200);
});


function sameHeight (){

	$(".index_col3 article").fixHeightSimple();
	$(".index_col3 h3").fixHeightSimple();
        $(".infoin_find td").fixHeightSimple();
}

});

【参考URL】
https://kadoppe.com/archives/2012/02/jquery-window-resize-event.html
http://sterfield.co.jp/designer/%E9%AB%98%E3%81%95%E3%82%92%E6%8F%83%E3%81%88%E3%82%8Bjquery%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cjquery-fixheightsimple%E3%80%8D%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96/

touchmove.noscrollを使ったスマホナビ

これだと、スマホで背景は固定されるがPCではされない。まあいいや

var current_scrollY;	    
  $(document).on('click', '.menu-trigger', function() {
    
    if ($(".menu-trigger").hasClass("active")) {
        // メニューを閉じるとき
        $(window).off('.noScroll');
        
	$(this).removeClass('active');
	$('body').removeClass('oa');
	
	/* $( '#wrapper' ).attr( { style: '' } );
        $( 'html, body' ).prop( { scrollTop: current_scrollY } ); */


	return false;
    } else {
    
        // メニューを開くとき
        
        $(window).on('touchmove.noScroll', function(e) {
            e.preventDefault();
        });
        
        $(this).addClass('active');

        /* current_scrollY = $( window ).scrollTop(); 

        $('#wrapper').css( {
          position: 'fixed',
          width: '100%',
          top: -1 * current_scrollY
        }); */

        // モーダルのアニメ
        $('body').addClass('oa');

        return false;
    }
  });

【jquery必要なしスライダー】swiper


/bodyの上にswiperのjsファイルを配置すること。それ以外だとバグります。
その下に

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
  effect: "fade",
  autoplay: 3000,
  noSwiping: true,
  noSwipingClass: 'no_swipe',
  loop: true
})
</script>


「noSwiping」はtrueにするとスワイプしないようにできるがその下の「noswipingclass」で決めたクラスをスライドにつけること。

【参考URL】
https://www.willstyle.co.jp/blog/724/

falsandtru版pjax やりかた

下記のコードを入れたところpjaxでトップページに戻ったときスライダーの切り替えがぐちゃぐちゃになる。たぶんsetintervalがいかれてる。
このページの「ページ読み込み時の処理」ってとこでいけるかなあ。あとで試す。とりあえずメモ。

http://chibinowa.net/note/js/pjax-fragment.html

あとこの下のURLも関係ありそう。。。ページ遷移時にイベント削除しないといけない。
https://teratail.com/questions/36589

$(function(){

  oSlider();
  oInit();
  /* addPjaxClass(); */

  // pjax遷移用class付与
  /*  function addPjaxClass() {
        selectorArr = [
            'a:not([target])'
        //  ,'.a:not(.n_p)'
        // ,'.hogehoge'
        ];
        for(i=0; i<selectorArr.length; i++) {
            $(selectorArr[i]).each(function() {
            
                $('a:not([target]').addClass('pjax');
                $('.n_p').removeClass('pjax');
            });
        }
    } */

// スライダー --------------------- /////////////////////////////////////

function oSlider(){
var page = 0;
  var lastPage = parseInt($("#slider_o div").length-1);
	//$("#slider_o div").css("display", "none");
  $("#slider_o div").eq(page).css("display", "block");
  
  function changePage(){
    $("#slider_o div").fadeOut(1000);
    $("#slider_o div").eq(page).fadeIn(1000);
  };

  var Timer;
  function startTimer(){
    Timer = setInterval(function(){
      if(page === lastPage){
        page = 0;
        changePage();
      } else {
        page ++;
        changePage();
      };
    }, 5000);
  }

function stopTimer(){
    clearInterval(Timer);
}
startTimer();
} // oSlider関数終わり



function oInit(){

  // ここに他のスクリプトを

} // oInit関数終わり


$.pjax({
		area : '#content', // ここがpjaxでページ入れ替わる
		link : 'a:not([target])', // target="_blank"属性のないものがセレクタ
		ajax: { timeout: 2500},
		wait: 500
});
$(document).on('pjax:fetch', function(){
	        // fetch内が遷移前のエフェクト
		$('body').css('overflow', 'hidden');
		$('#content').attr({'class': 'fadeOut'});
});
$(document).on('pjax:render', function(){
              // render内が遷移後のエフェクト
                oSlider();
	      // addPjaxClass(); // もしpjaxのリンクをクラスで設定するならこの関数で付与。
	        oInit();
		$('#content').attr({'class': 'fadeIn'}); 
		$('body').css('overflow', '');
});

}); 


SNSとアナリティクス対応
http://qiita.com/resistance_gowy/items/533628e129ff3d2a90df


〇「すべてのページで共通の外部スクリプトを参照させこの外部スクリプトでpjaxを設定してください。JavaScriptSNSボタンのような外部サービスの利用を除き原則としてすべて外部スクリプトに記述すべきものです。
先にブートストラップやボイラープレートのソースを読むなどして一般的なページ構造を学んだほうがよいでしょう。」
https://github.com/falsandtru/pjax-api/issues/8


wordpressでのpjax
http://kakurezatou.com/20130620/wordpress-pjax/

スマホのfont-sizeフォントサイズ指定を安定

body {
  -webkit-text-size-adjust: 100%;
}

【jQuery】infinite scrollの使い方

ページングをクリックしなくても、スクロールすれば自動で次のページのコンテンツが出てくる、いわゆる「無限スクロール」をWordPressサイトで実装することができるプラグイン「Infinite Scroll」。

とりあえず今回はワードプレスプラグインのものを使用。


wordpressのarchiveで使った。

①まず、1記事ずつスクロールしたら表示させたかったので、

querypostを設定していつも通り記事ループ。

<div class="container">
<?php query_posts('posts_per_page=1&' . $query_string); ?>	
<?php if(have_posts()): while(have_posts()): the_post(); ?>


<article class="article_works">
  <h2><?php the_title(); ?></h2>
</article><!--article_works-->
  
<?php endwhile; // end of the loop. ?>
<?php else: ?>
<p>投稿されたものがありません。</p>
<?php endif; ?>
<?php get_template_part('pagenation'); ?>
</div><!-- container -->

②管理画面でinfinite scroll セレクタ設定

f:id:miukro:20170303234318p:plain


③ローディングのcssは以下のセレクタ

#infscr-loading{
    text-align: center;  
    margin: auto;
}

④infinite scrollで表示した中のスクリプトは無効されているので必ずコールバックで呼び出すこと。

lightboxとか。。。



【参考URL】
http://www.webdesignleaves.com/wp/wordpress/452/