[Jquery]スクロールで連動する背景のアレ

サンプルとhtmlコードは気が向いたら追記しようかな
漁るのが面倒なのでjsコードだけ
別で使う過去のコード探してたら一緒に使ってたのでパララックスとか書いててなんかオシャンティなことしてるなと思ったらそうでも無かった。


$(window).on('scroll', function(e) {
  parallax();
});
 
function parallax(){
  var scrolled = $(window).scrollTop();
  $('#bgfrm').css('backgroundPositionY',-(scrolled*0.2)+'px');
}

[自分用][Jquery]ボツったけどID取得のスライドトグル

<code>
$(function(){
	$(".sbloc figure").on('click', function(){
		var idname = $(this).parent().attr("id");
		$(".cbloc").slideDown();
		$(".more").not("."+idname).slideUp();
		$("."+idname).slideDown();
		if($(this).hasClass("open")) {
			$("figure").removeClass("open");
			$("."+idname).slideToggle();
			classCount = -1;
			if(classCount < 0) {$(".cbloc").slideUp();}
		}else {
			$(this).addClass("open");
		}
	});
});
</code>

[jquery]クリックでページ遷移

DOM操作後なんかでリンクが動かなかったりはこっち


	$(document).on("click",".class a",function(){
		var href = $(this).attr("href");
		location.href = href;
	});

特定のリンク拾いたいときはこっち


	$(document).on("click","a",function(){
		var href = $(".class").attr("href");
		location.href = href;
	});

【Jquery】シンプルな画像切り替えJSサンプル

すごい簡単な画像切り替えのJS
ECサイトによくあるあれっすあれ。
前回に引き続き、ID割り振りとかめんどくさいのでエセ汎用ぽく作ってます。
ビバ!thisとかprevとかnextとかchildrenとか!

HTML

    <div class="change">
     <div class="main"><a href="img/sample.jpg" target="_blank"><img src="img/sample.jpg"></a></div>
     <div class="thums">
      <a href="img/sample.jpg" target="_blank"><img src="img/sample.jpg"></a>
      <a href="img/sample2.jpg" target="_blank"><img src="img/sample2.jpg"></a>
      <a href="img/sample3.jpg" target="_blank"><img src="img/sample3.jpg"></a>
     </div>
    </div>

SASS


		.change {
			width:720px;
			overflow:hidden;
			.main {
				float:left;
				width:610px;
			}
			.thums {
				width:95px;
				float:right;
				text-align:left;
				img {
					margin-bottom:10px;
				}
				span {
					display:block;
					margin-bottom:5px;
				}
			}
		}

CSS


		.change {
			width:720px;
			overflow:hidden;
		}
			.change .main {
				float:left;
				width:610px;
			}
			.change .thums {
				width:95px;
				float:right;
				text-align:left;
			}
				.change .thums img {
					margin-bottom:10px;
				}
				.change .thums span {
					display:block;
					margin-bottom:5px;
				}

JS

<script type="text/javascript" charset="utf-8">
$(function(){
	$(".change a").hover(
		function () {
			var ImgSrc = $(this).attr("href");
			$(this).parent().prev().children("a").attr({href:ImgSrc}).children("img").attr({src:ImgSrc});
			return false;
		},
		function () {
		}
	);
});
</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番目が良いかな~と思ったり。

スマホ メニューのスクロール慣性に対応したドロワーメニュー【spslidemenu】

正式名称をようやく知りました。ドロワーメニューっていうですねアレ。

sidrを入れていたのですが、iphoneのchromeとandroid標準ブラウザ(仕様的)で不具合頻発だったので
探しに探しまくりいろいろ検証した(約3時間ほど)結果、

be-hase.comさんの【Spslidemenu】が操作性・安定性ともに一番使いやすいかと思います。
http://be-hase.com/javascript/428/

※ただやはり「android標準ブラウザ」は強敵で、demoにあります「No Header」はメニューが開かず延々更新されるという罠。
(はじめてandoroidがにくいと思った瞬間)
まさしく↓ですね。4時間ほど格闘しました。

Android端末におけるオーバーレイ表示時の困った現象の報告と、その対処法について
http://blog.bluearrowslab.com/smartphone/topicks/237/

とりあえずなんちゃって対処方法はまた今度。。。覚えてたら書こう。。。