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

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

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

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

スマホ対応 スマホ jQuery

これだと、スマホで背景は固定されるが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

Javascript


/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 jQuery

下記のコードを入れたところ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の使い方

jQuery

ページングをクリックしなくても、スクロールすれば自動で次のページのコンテンツが出てくる、いわゆる「無限スクロール」を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/

fontplus フォントプラスの使い方

WEBフォント

①まず以下にアクセスしてログイン。
https://webfont.fontplus.jp/users/login

②グローバルナビの「スマート」の「サイト登録・PV数レポート」をクリックしてURLを登録

③グローバルナビ「フォント一覧」をクリックして使いたいフォントを探す。そしてコードをコピーボタンを押してコピーしてcssに張り付けばOK