カテゴリー
Pinboard

Two.js

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

カテゴリー
Pinboard

JavaScriptのループはどれが一番高速なのか – Qiita

|0 で型を認識させることは重要

カテゴリー
Pinboard

window.matchMedia – Web API インターフェイス | MDN

指定された メディアクエリ文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返します。

カテゴリー
Pinboard

Javascriptのスタイルガイドまとめ(おすすめ4選) – Qiita

カテゴリー
log

[JavaScript] localStorage/sessionStorage

localStorage

  • localStorageオブジェクトに設定したデータをページの遷移やリロードに関わらず保存、プロトコル、ホスト名、ポートが同一の場合に読み出せる
  • 同一ホスト名で動いている別のJavaScriptから情報を読み出せるため、独自ドメインなどで運用しない場合は注意

sessionStorage

iOS、

別のウインドウや別のアプリに切り替えた後、アプリのウインドウに戻った際に行われるページのリロード

が発生しちゃうらしい。
sessionStorageでは、ウインドーやタブごとに情報が保持される ので、スマホサイトで入力フォームがある場合はフォームの内容保存に利用したほうがいいみたい。

カテゴリー
hatena

history.pushStateをつかってみる。

pushState、実際にサンプルつくってみた。

http://dl.dropbox.com/u/131731/sample/pushstate/index.html

リンク遷移時にページ内で必要な部分のみ表示が代わり、かつ、
ページのtitle、ページのURLも読み込んだ内容に適応したものにかわるよう。

HTMLは事前にこんな感じになっている事想定。

HTML

//トリガーとなるaタグ、classがpjaxのものを対象としてる
//<a href="リンク先" class="pjax" title="遷移先のページのタイトル"></a>
<a href="index.html" class="pjax current" title="index">index</a></li>

<div id="main">
//この内容がページごとに置き換わる
</div>

JavaScript

jquery使うこと前提にしてる。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

	//init
	var _target = "#main"; //おきかえるコンテンツのID
	var _href; //同一ページのpushState二重投稿防止

	//初期ページのタイトルとHTMLを定義
	var _default = { 
		title : document.title,
		content : $(_target).html()
	};
	
	//debug
	$('nav').after($("<ol/>").addClass("debug"));

	$('a.pjax').click(function() {
		var title = $(this).attr('title'), href = $(this).attr('href');
		//console.log('location : ' + location.pathname);
		if ( _href !== href ) { //同一URLの時はpushしない(環境に応じて要調整)
			$('a.pjax').removeClass('current');
			$(this).addClass('current');
			if ( window.history.pushState ) { //pushStateが使えるブラウザなら
				window.history.pushState(title, null, href); 
					//pushState(event.state, 'title', 'url'), 先では、第1引数にタイトル渡して、第2のtitleはnullにしてるけど、
					//1には数字わたして、2には素直にページタイトルわたしたほうが、戻る/進む時の現在の位置管理ができてよさそう。
					//replaceStateは "現在のエントリを入れ替える、つまり新規のエントリは追加したくない場合に使用するAPI" だそう。
				changeContent(title,href);
				_href = href;
				
				$('.debug').append('<li>' + title + '<span>' + href + '</span></li>');
			} else { //pushState対応してないなら、普通に開く
				window.location = href;
			}
		}
		return false;
	});
	
	window.onpopstate = function(event){ //戻る/進むでイベント発動
		//console.log(event);
		$('a.pjax').removeClass('current');
		$('a[title ="' + event.state + '"]').addClass('current');
		if (event.state) {
			changeContent(event.state, location.pathname);
		} else {
			changeContent(_default.title, location.pathname);
		}
	}
	
	function changeContent(t,u) { 
		$(_target).slideUp(500,function() {
			$(_target).after('<em>loading...</em>').load(u + ' ' + _target, function() {
				$(this).slideDown(500, function() {
					document.title = t;
				}).next().remove();
			});
		});

	}
});
</script>
カテゴリー
hatena

Google Mapsで住所から緯度経度 / マーカーから緯度経度&住所を求める

タイトル通りの内容。

地図を登録させるフォームつくる機会があったんだけど、
住所検索だけだと同一番地内などで微妙に位置ずれする。

なので、マーカーで緯度/経度を修正して、
投稿時には
・入力した住所
・マーカーの緯度/経度
をもらってGoogle Mapsを表示させればいいんじゃないかなという話。

こんな感じ。

http://dl.dropbox.com/u/131731/sample/googlemaps-address_marker.html

2011/11/24:ちょっと改良して、ドラッグ時にパーマリンク表示するようにした。

カテゴリー
hatena

jQueryのフェード系メソッド + IEで、文字が潰れる問題

タイトルの通りなのだけどIE環境で特定要素に、

$('div').fadeIn('fast');

など、フェード系のメソッド(sideToggleとかいろいろ)かけると、
文字が潰れてジャギジャギなる。
より具体的にいうと、ClearTypeWindowsの文字のアンチエイリアシング方式)が無効になるんだそう。
悔しいこれ。

IEでは、透明度を”filter”という独自仕様で指定するのだけど、
コレとフォントのClearTypeが干渉するんだって。

$('div').fadeIn('fast',function() {
	if ( !jQuery.support.leadingWhitespace ) { this.style.removeAttribute('filter'); }
});

などと、フェード系のメソッドのcallbackで、IE判定してremoveAttributeでfilter消してやればいいみたい。

カテゴリー
hatena

fsmenu.jsとmootoolsがコンフリクトする問題

fsmenu.js(FreeStyle Menus)というhoverで下層ナビゲーションを表示するスクリプトがあるのだけど、
(HTML+javascriptでDHTMLと呼ばれてたころからあるっぽい)
mootoolsと同時につかうと、コンフリクトして動作しなくなる(fsmenu.jsが)。

今ならfsmenu.jsのとこjQueryやらmootoolsで代替できるっしょって感じなのだろうけど、
なんらかの理由で代替できない時の解決方法。

TYPOlight forum – TYPOlight Open Source CMS
にそのままのってるのだけど、
fsmenu.js関連の記述で、
・AddEvent
・AddEventListener

・fsmAddEvent
・fsmAddEventListener
とかに変更するとよい。
※fsmでもなんでもいいみたいで、AddEvent、AddEventListenerが固有のものになればヨイ。

fsmenu呼び出し部分

AddEvent(window, 'load', new Function('listMenu.activateMenu("listMenuRoot", arrow)'));

fsmAddEvent(window, 'load', new Function('listMenu.activateMenu("listMenuRoot", arrow)'));

fsmenu.js

「AddEvent」を一括置換で「fsmAddEvent」

で解決した。

カテゴリー
hatena

photosetでいろいろ

先のエントリーで、Flickrの任意のSetを取得してみたが、それでいろいろ試してみる。

Flickr x jQuery Cycle Plugin

画像の〜するって事を考えると、
» JQuery Cycle Plugin
との相性は良さそう。

というわけで

■デモ(画像切り替え)
http://2244.jp/_demo/flickr/02_background/

読み込んだimageの幅を100%として、Cycleプラグインのfadeを使って切り替え。
こんな感じで100%表示すればサイトの背景画像なんかに使うのもいいかもしれない。

■デモ(スライドショー)
http://2244.jp/_demo/flickr/02_slide/

上記にCycleプラグインのナビゲーションを表示させてみる。
本体部分をクリックしても切り替わる。
いくつか背景画像かえたいんすよー、ユーザー手動で、とか言うときに手軽で便利そう。

Flickr x InnerFade with jquery

» InnerFade with jquery
もいいかも。

■デモ(画像切り替え)
http://2244.jp/_demo/flickr/03_background/

type: ‘random’でランダム表示になってくれるのもありがたい。
単純に切り替えだけなら、Cycle Pluginよりこちらのほうが軽くてよいな。

■デモ(画像切り替え+ナンバリング)
http://2244.jp/_demo/flickr/03_background2/

オートスライドで数字だしてみる。InnerFade使う時に最大数ぐらいはあったほうがいいかなと思って。
切り替えはやくするとこれはこれで格好いい感じするな。

カテゴリー
hatena

PrettyPhoto.jsで表示した要素をスムーススクロール

PrettyPhoto.jsを使ってiframeやインラインコンテンツを読み出す際に、

  • Windows IE系ブラウザ
  • ページ全体にスクロールが発生している。
  • prettyPhoto内にスクロールがある。
  • マウスホイールなどでスクロールさせてる。

という環境下で、

マウスホイールでprettyPhoto内のスクロールを行っていて、
スクロールの始め・終りにあたった時に、
マウスホイールスクロールのフォーカスがページスクロールに移り、
ページがスクロールされて、prettyPhotoなんかガクガク。
(もしくは単にprettyPhoto表示時にスクロールしたらprettyPhotoガクガク)

という時がある。
その対策に、prettyPhoto表示時のページスクロールをsmoothにしてみる。

変更前(prettyPhoto.jsの370行目あたり)

$pp_pic_holder.css({
	'top': projectedTop,
	'left': (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2)
});

$ppt.css({
	'top' : projectedTop - $tHeight,
	'left' : (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2) + (settings.padding/2)
});

を、

変更後(prettyPhoto.jsの370行目あたり)

if($pp_pic_holder.tm)clearTimeout($pp_pic_holder.tm);
$pp_pic_holder.tm = setTimeout(function() {
	$pp_pic_holder.animate({
		'top': projectedTop,
		'left': (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2)
		});
	},100)
				
if($ppt.tm)clearTimeout($ppt.tm);
$ppt.tm = setTimeout(function() {
	$ppt.animate({
		'top' : projectedTop - $tHeight,
		'left' : (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2) + (settings.padding/2)
	});
}, 100)

としたらスムースな感じになった。

デモは以下。
http://2244.jp/_demo/jquery-prettyphoto/01/

prettyPhotoというのは以下。
jQuery lightbox for images, videos, YouTube, iframes – by Stephane Caron