$(document).on(‘click’,’.selector’, function(){}); と $(‘.selector’).on({ ‘click’: function() {} });の違い

var $jqObj = <div class="btn"></div>
$('.box').append($jqObj);

のようにして、
新たに追加した要素に対して。

$(document).on('click','.btn', function(){});

であれば操作できた要素が

$('.box').on({ 'click': function() {} });

であると操作できなかった。
この二点の本質的な違いはなんなんだろ~か。
jQuery読みこめばわかるんだろうなあ。
わかんないけど、そういう事象があるということをメモ。

フッターで停止する追尾メニュー

フッターで停止する追尾メニュー。
jQuery使用(1.7.2と1.9.1では動いた)
但しメニューが縦に長過ぎると見にくいので、ご利用は計画的に!!
(関数名が「オートスクロール」以外になんかいいのないかな。。。)

$(function(){
//追尾メニュー
	var nav = $('#nav');
	var footer = $("#footer");
	var navTop;
	var navBottom;
	var winTop;

	function autoscroll(){
		//後からのコンテンツの追加に対応できるよう常に計算する
		navBottom = footer.offset().top - nav.height();
		winTop = $(this).scrollTop();
		if (winTop >= navTop && winTop <= navBottom) {
			nav.css({
				position: 'fixed',
				top: '0px'
			});
		}else if(winTop <= navTop){
			nav.css({
				position: 'relative',
				top: '0px'
			});
		}else if(winTop >= navBottom){
			nav.css({
				position: 'absolute',
				top: navBottom + 'px'
			});
		}
	}

	window.onload = function() {
		navTop = nav.offset().top;
		autoscroll();
	}

	//スクロールをするたびに実行
	$(window).scroll(function () {
		autoscroll();
	});
});

3月6日追記
スクロールする度にfooter.offset().topを計算し直すように変更しました。
重くなるじゃん!と思ったけど、コンテンツが後から追加された場合に対応せねばならないので。

youtubeで映像を再生して5秒後にシェアボタン表示

youtubeにこんな便利なAPIがあったとは。
iframe 組み込みの YouTube Player API リファレンス
https://developers.google.com/youtube/iframe_api_reference?hl=ja#Playback_status

下記のような機能(関数)を使いました。

動画の再生を開始してからの経過時間を秒数で返します。
player.getCurrentTime():Number

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
	// 2. This code loads the IFrame Player API code asynchronously.
	var tag = document.createElement('script');

	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	// 3. This function creates an <iframe> (and YouTube player)
	//    after the API code downloads.
	var player;
	function onYouTubeIframeAPIReady() {
		player = new YT.Player('player', {
		height: '390',
		width: '640',
		videoId: '-PdPCGkaOyM',
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
			}
		});
	}

	// 4. The API will call this function when the video player is ready.
		function onPlayerReady(event) {
		event.target.pauseVideo();
	}

	// 5. The API calls this function when the player's state changes.
	//    The function indicates that when playing a video (state=1),
	//    the player should play for six seconds and then stop.
	var done = false;
	function onPlayerStateChange(event) {
		setTimeout(showTime, 5000);
		function showTime() {
			if (!done) {
				if(5 < player.getCurrentTime()){
					showGood();
					done = true;
				}else{
					setTimeout(showTime, 1000);
				}
			}
		}
	}
	function showGood() {
		$('#shareBox').fadeIn(500);
	}
</script>

<div id="shareBox">
	<!--シェアボタンを入れておきましょう-->
</div>

ルートのindexページのみを/sp/にリダイレクト

htaccessによるPC・スマートフォンの振り分け転送はこちらのページが明るい。
http://html-five.jp/195/

しかしながら、
ルートのindexページや、特定のページだけを/sp/にリダイレクトする方法は掲載されてなかったので、メモ。

RewriteEngine on

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^$ /sp/ [R]

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^example/$ /sp/example/ [R]
RewriteBase /

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /

クリッカブルマップの覚書いろいろ

昔懐かし手法、クリッカブルマップを使う機会があったので覚書です

usemapの挙動について

		<img src="img/mainimg_main01.jpg" usemap="#mainimg" alt="てすとだよ" />
		<map name="mainimg">
			<area shape="poly" coords="1,146,359,146,359,377,1,377" href="http://example.com" alt="">
			<area shape="poly" coords="359,147,1003,147,1003,378,359,378" href="http://example.com" alt="">
			<area shape="poly" coords="-1,377,641,377,641,611,-1,611" href="http://example.com" alt="">
		</map>

usemap=”#mainimg” の部分。
usemap=”mainimg”と#をいれなくても、chromeだと、ハッシュ# が無くても動いてしまうのです。
でもIE/FFで動かなくなるので、忘れずに入れましょう。

座標を取るのが楽になるPhotoshop拡張

座標を取る際は
吉本 集さん制作のPhotoshop拡張がとても便利です。
ドリームウィーバーでもできないことは無いのですが、px単位で位置を合わせるのが、Photoshopの方が容易です。
変な形とかにもできますし。
http://tsudoi.org/weblog/?p=1279

クリッカブルマップのロールオーバー

クリッカブルマップを利用して、ロールオーバーもできます。
たとえば、地図の色を変更する、なんてことができます。
こちらはjQuery必須です。
プリローダーを実装してあげると快適だと思います。
画像置換ではなく、cssスプライトで実装してもいいかもしれませんね~。

		<div id="aseanMap">
			<h3><img src="img/h3_01.gif" alt="ASEAN" width="609" height="33" /></h3>
			<div id="mapBox">
				<img src="img/pic_map_dummy.png" alt="asean" width="960" height="565" usemap="#rollover" id="mapImg" />
				<map name="rollover" id="rollover">
					<area shape="poly" alt="Singapore" id="Singapore" nohref="nohref" coords="194,377,212,377,212,388,277,388,277,458,194,458">
					<area shape="poly" alt="Cambodia" id="Cambodia" nohref="nohref" coords="176,126,231,126,231,144,261,141,239,196,236,213,185,223,159,170,176,151">
					<area shape="poly" alt="Vietnam" id="Vietnam" nohref="nohref" coords="336,114,336,187,302,187,213,256,204,215,255,180,223,96,209,77,189,72,193,45,171,40,148,6,151,1,263,12,264,22,227,50,270,114">
					<area shape="poly" alt="Thailand" id="Thailand" nohref="nohref" coords="84,144,59,144,59,73,68,73,127,45,142,84,143,84,196,84,207,92,207,106,226,124,225,132,166,170,165,194,132,181,130,182,120,241,145,279,171,292,171,301,158,312,111,289,101,277,82,272,104,210">
					<area shape="poly" alt="Malaysia" id="Malaysia01" nohref="nohref" coords="463,257,492,267,491,280,427,306,398,364,366,367,312,372,308,355,312,349,338,346,406,301">
					<area shape="poly" alt="Malaysia" id="Malaysia02" nohref="nohref" coords="166,279,235,279,235,355,201,355,215,368,176,379,117,297,122,290,157,299,166,290">
					<area shape="poly" alt="Philippines" id="Philippines" nohref="nohref" coords="515,90,540,86,540,14,638,14,638,111,580,111,598,134,621,205,529,238,519,203,514,147,495,143,447,227,435,223,435,222,435,216,481,133,472,109,473,25,497,12">
					<area shape="poly" alt="Indonesia" id="Indonesia" nohref="nohref"  coords="654,258,834,271,908,278,941,380,945,410,922,406,801,467,755,479,695,503,671,508,596,544,307,540,218,528,141,479,104,453,58,394,35,367,23,314,53,301,63,311,84,319,141,365,199,396,202,418,220,427,293,382,300,356,332,369,373,356,400,356,407,349,419,313,415,303,420,298,522,299,569,279">
				</map>
			</div>
		</div>
$(function(){
	jQuery.preloadImages = function(){
		for(var i = 0; i<arguments.length; i++){
			jQuery("<img>").attr("src", arguments[i]);
		}
	};
	
	$.preloadImages("img/map/Cambodia.png","img/map/Indonesia.png","img/map/Malaysia01.png","img/map/Malaysia02.png","img/map/Philippines.png","img/map/Singapore.png","img/map/Thailand.png","img/map/Vietnam.png");
	
	//areaのマウスオーバーにて画像を置換
	$('area').hover(
		function(){
			$('#mapImg').stop();
			var areaId = $(this).attr('id');
			$('#mapImg').attr('src', 'img/map/' + areaId + '.png');
		},
		function(){
			$('#mapImg').stop();<ol>
</ol>


			$('#mapImg').attr('src', 'img/pic_map_dummy.png');
	});
});

参考サイト様

http://black-flag.net/jquery/20121003-4217.html
http://logic.moo.jp/data/archives/740.html
http://cgi-lab.net/javascript/89-image-map.html

googleMapの共有リンクをIE9以下に対応させたい場合は、IE9以下の環境で共有リンクを生成しよう

タイトルの通り。

IE10以上で現在表示できるgoogleMapは、新しいgoogleMapなので、
対応ブラウザはGoogle Chrome、Firefox、Safari 6以上
対応OSは、Windows Vista以上(Firefox以外はWindows XPにも対応)とMac OS X

出典
http://internet.watch.impress.co.jp/docs/news/20140220_636083.html

なのだけど、共有リンクをIE9以下に対応したい場合もある。
そんな時は、IE9以下の環境でgoogleMapを開いて共有リンクを作ればいい。
IE9以下なら旧googleMapが表示されるので、
表示される共有URLも旧googleMap用のものだ。
ちなみにIE10以上の環境だと、旧共有URLも新googleMapで開くことができる。

けどこの下位互換が保たれるのがいつまでなのかは不明……。

WordPressの自動バックアップ

BackWPupでamazon s3にバックアップするか
UpdraftPlusで googleドライブにバックアップするのが快適だなと思った。

参考サイト様
GoogleDriveにWordPressのバックアップをサイズを気にせず取っちゃおう!!
http://andask.net/create/backup-wordpress-automatically-to-googledrive.html

簡単に間欠処理してイベント負荷を抑制

スクロールに応じてパララックス処理をするなんて時に、
スクロールの度に処理を走らせると、IEでは重くなる。(IE11でも重い)
なので、指定ミリ秒以下の処理は無視するようにした。
間欠処理は、このエントリでもちらっと触れてたな。
jQueryでTwitter用文字数カウント

jQueryを使った場合。

$(function(){
	var timer = null;
	$(window).on('scroll',function() {
		clearTimeout( timer );
		timer = setTimeout(function() {
			//処理内容
		}, 12 );
	});
});

参考サイト様
https://w3g.jp/blog/tools/intermittent_event_load_reduce

styledoccoを6時間で使えるようにしてみた

styledoccoを使えるようにしてみたのだけど、
試行錯誤してて時間がかかったのでメモ。
2014年9月現在のお話なのでご注意ください。
作業環境はwindows8.1。

Node.jsをインストール

バージョン管理の必要性もあるという説もあるのですが、とりあえずインストーラでインストール。
http://nodejs.org/download/

参考サイト様
http://www.tam-tam.co.jp/tipsnote/javascript/post3479.html
http://dev.classmethod.jp/server-side/language/coffeescript-and-typescript-install-designer/

コマンドプロンプトを立ち上げる

Windowsのコマンドプロンプトなる黒い画面を立ち上げる。
普段使わないのでどきどきする。

gruntとstyledoccoをインストール

作業が自動化できるので、gruntとともにインストール。
自動化できると楽なのです。
参考サイト様
http://dev.classmethod.jp/etc/grunt-styledocco/

おまけ。gruntをもっと使いたい

gruntを使いこなすと便利そうなので、メモ。
http://isee-web.net/?p=510