[Jquery]ページ一定移動でスクロールボタン表示

よくあるあれだす。

【1】汎用

    $(window).load(function() {
        $(window).scroll(function () {
            var s = $(this).scrollTop();
            var m = 200;
            if(s > m) {
                $("#pagetop").fadeIn('3000');
            } else if(50 > m) {
            }else {
                $("#pagetop").fadeOut('3000');
		}
        });
        $("#pagetop").click(function () {
            $('html,body').animate({ scrollTop: 0 }, '300');
            return false;
        });
    });

【2】ちょっと専用

    $(window).load(function() {
        var scount = 0;
	$(window).on("scroll touchmove", function(){ 
            var s = $(this).scrollTop();
            var m = 300;
            if(s > m) {
	       if(scount == 0) {
	        $("#pagetop").fadeTo("1000", 0.5);
		$("#pagetop").delay("2000").fadeTo("1000", 1);
		scount = 1;
          	}else {
		$("#pagetop").fadeTo("1000", 1);
		}
            }else {
	    $("#pagetop").stop().fadeOut();
		}
	});


        $("#pagetop").click(function () {
	    $("#pagetop").stop().fadeOut();
            $('html,body').animate({ scrollTop: 0 }, '300');
            return false;
        });
    });

【3】こちらのサイトさまの応用
スクロール完了(停止)の検出と、フローティングメニューの実装

$(function () {
    var $target = $("#pagetop"), 
        $window = $(window),
        $document = $(document),
        timerId,
        defaultPos = $target.offset().top,
        targetHeight = $target.outerHeight(true),
        containerHeight = $target.parent().height(),
        DURATION = 500;
    function floatingMenu(scrollTop) {
	$("#pagetop").fadeTo("3000", 1);
    }
    if (!$target.length) {
        return;
    }
    $window.bind("scrollFinish", function (event, scrollTop) {
        floatingMenu(scrollTop);
    });

    $window.bind("scroll", function () {
        var scrollTop = $document.scrollTop();
        var m = 300;
        if(scrollTop > m) {
	$("#pagetop").css("opacity", 0.5).fadeIn();
	}else {
	$("#pagetop").stop().fadeOut();
	}
        if (timerId) {
            clearTimeout(timerId);
        }
        timerId = setTimeout(function () {
            timerId = null;
            if(scrollTop > m) {
            $window.trigger("scrollFinish", [scrollTop]);
	    }
        }, 1000);
    });
    $window.unload(function () {
        $window.unbind("scroll scrollFinish");
    });
    $("#pagetop").click(function () {
        $('html,body').animate({ scrollTop: 0 }, '300');
        return false;
    });
});

【PHP】ユーザーエージェントでipad判定

<!--{php}-->
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if($isiPad){
    echo "";
}else{
    echo "<meta name=viewport content=width=1000, initial-scale=0, maximum-scale=1, user-scalable=1 />";
}

ipadのときは viewport出さないヨという指定です。
結構 うっかりそのままviewport書いてると、ipadでの表示ずれが起きてしまう確率高いので^^b

一応iphone取得も書いとこう

$isiPhone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
php

[CSS3]レスポンシブで メディアクエリ使う際の注意点 印刷でレイアウトが崩れる対処

クライアントさんから指摘あるまで気にしてなかったのですが、
レスポンシブでメディアクエリで画面幅に沿ってCSS切り替えする際に

@media screen and ~

の記述だと 文字通り 「画面のみ」の表示となってしまうので

<style type="" media="all">

で対応させていても、スルーされます。なんてこったい。

対処方法は

@media print, screen and ~

と書くだけですが、スマホ向けのCSSでも書いてしまうと、
印刷プレビュー時にスマホのレイアウトが出てきてしまうので
基本はPCのみでOKだと思います。

印刷プレビュー マジであせりました…

[jquery]ページ内スクロール

メモメモ。説明書くのがメンドイ。
.btnクリックで自分のn番目の値を代入、n番目に該当する.contents_boxまでページ内スクロール!な感じ

 <div id="nav">
  <span class="btn">あああ</span>
  <span class="btn">いいい</span>
  <span class="btn">ううう</span>
 </div>

 <div  class="contents_box">
あああ のとび先
 </div>
 <div  class="contents_box">
いいい のとび先
 </div>
 <div  class="contents_box">
ううう のとび先
 </div>
$(document).ready(function(){
	$(".btn").click(function () {
		var i = $(".btn").index(this)
		var p = $(".contents_box").eq(i).offset().top;
		$('html,body').animate({ scrollTop: p }, 'fast');
		return false;
	});
  });

[jquery][bxslider]サムネイルや左右ボタンクリックで自動スライドがとまる時の対処

もはや私の使う定番スライダーとなっている bxsliderなのですがネックがpagerやナビをクリックした際に動作がとまってしまうことだったんですよね。

前に探したときは探し方が悪く(?)見つからなかったんですが、
やっぱり対処がありました。オプションに。「オプションに」oh… オプション見てたんですが(悪あがき)

さすがですbxslider様(-人-)ありがたやー。

var foo = $('.bxslider').bxSlider({
onSlideAfter: function () { foo.startAuto(); }
});

というわけでこの部分で対処可能。
引数にbxsliderの設定を代入してコントロール系クリックでスライドさせた後、また自動でスライドさせますよーって感じでしょうか。多分。

実際使うときはこっち

<script>
  $(function(){
var foo = $('.bxslider').bxSlider({
          auto: true,
          pause: 1000,
          speed: 1000,
          onSlideAfter: function () { foo.startAuto(); }
		});
  });
</script>

【jquery】楽天GOLD用 パソコンのゴールドページにスマホでアクセスしたらGOLDスマホページにリダイレクト

11/17に書いた↓があるんですが、
楽天GOLDなどでスマホに飛ばすとき[jquery]

諸事情でPCゴールドを見せるのが微妙だったので、
とりあえず別verで対処しておこうかなーと。
まあ、楽天限定じゃないので、実質的にはjqueryでのスマホ振り分けになりますね。

●前提条件として
pcとスマホで同じページがあること
たとえば http://www.rakuten.ne.jp/gold/●●●/aaa.html がPCとした場合、
スマホでは http://www.rakuten.ne.jp/gold/●●●/sp/aaa.html のページがあるのが条件です。
  

<script type="text/javascript">
<!--
 var currentUrl = window.location.href;
 var resultUrl =  currentUrl.replace("http://www.rakuten.ne.jp/gold/●●●/", "http://www.rakuten.ne.jp/gold/●●●/sp/"); 

 if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)
  || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	window.location.href = resultUrl;
 }
-->
</script>

これはどこのページをスマホで見ても対応したスマホページを表示させかったので、URLを置換して表示させています。
無い場合は普通にトップにリダイレクトさせればよいので

<script type="text/javascript">
<!--

 if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)
  || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	window.location.href = "http://www.rakuten.ne.jp/gold/●●●/sp/";
 }
-->
</script>

こうなりますのです。
楽天の場合は大体がドリウィで構築してることが多いのでPCのテンプレヘッダに入れて構築すれば一瞬で完了^^b
ユーザビリティ的には1番目が良いかな~と思ったり。