memo.xight.org

JavaScript

2006-08-04 Fri

JavaScriptでブラウザの表示領域のサイズを取得する方法

- Summary

ブラウザ 表示モード 表示領域の幅を取得するプロパティ 表示領域の高さを取得するプロパティ
IE 6 標準 document.documentElement.clientWidth document.documentElement.clientHeight
IE 6 互換 document.body.clientWidth document.body.clientHeight
FireFox 1.5 標準 document.documentElement.clientWidth document.documentElement.clientHeight
FireFox 1.5 互換 document.body.clientWidth document.body.clientHeight
Opera 9 標準 document.body.clientWidth document.body.clientHeight
Opera 9 互換 document.body.clientWidth document.body.clientHeight

FireFox，Operaのwindow.innerWidth，window.innerHeightでは，スクロールバー自体も含んだサイズとなる．
スクロールバーが表示されている場合には，表示領域のサイズより＋10数px大きいサイズになる．

- Reference
Enjoy×Study - ブラウザの表示領域のサイズを取得する方法
http://d.hatena.ne.jp/onozaty/20060802/p1

Enjoy×Study - ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法
http://d.hatena.ne.jp/onozaty/20060803/p1

2006-07-25 Tue

マウスホイールのイベント検知

- Summary

ブラウザ event property 手前に回転
Internet Explorer onmousewheel WheelDelta 負
Firefox DOMMouseScroll detail 正
Opera onmousewheel WheelDelta,detail 正

- Reference
Mouse wheel programming in JavaScript
http://adomas.org/javascript-mouse-wheel/

Mouse wheel programming in JavaScript - Demo
http://adomas.org/javascript-mouse-wheel/test.html

JavaScript++かも日記: マウスホイールで拡大縮小
http://jsgt.org/mt/archives/01/000044.html

インフォシーク ホームページ作成 - マウスホイールで画像を拡大縮小する
http://iswebmag.hp.infoseek.co.jp/sample105.html

せつないぶろぐ : JavaScriptによるマウスホイールのイベント処理
http://f56.aaa.livedoor.jp/~tdnr/ppblog/?id=06060007

暴満館 - OperaのJavaScriptでマウスホイールを検知できるようになった
http://bmky.net/diary/log/1336.html

- via
GIGAZINE - マウスホイールの回転イベントをJavaScriptで検知する
http://gigazine.net/index.php?/news/comments/20060725_javascript_wheel/

2006-07-20 Thu

parapara.js - マウスホイールで画像を切り替える

- Summary
マウスホイールを回転させ，画像を切り替えるライブラリ．
http://tatamilab.jp/~yuugo/parapara/ooi/parapara.js を参照．

- Source

<html>
	<head>
		<script type="text/javascript" src="path/to/parapara.js"></script>
	</head>
	<body>
		<img src="images/FILE_0001.jpg" onload="cacheTo(this,'images/FILE_0010')" />
	</body>
</html>


- Demo
http://tatamilab.jp/~yuugo/parapara/ooi/parapara.html

- Reference
たたみラボ - 2006-01-26 - マウスホイールでパラパラ写真
http://www.tatamilab.jp/rnd/archives/000105.html
たたみラボ - 2006-02-12 - iPodでパラパラ写真
http://www.tatamilab.jp/rnd/archives/000131.html

- via
phpspot開発日誌 - 2006-07-20 - マウスホイールでパラパラ写真
http://phpspot.org/blog/archives/2006/07/post_91.html

2006-07-19 Wed

Link Thumbnail - リンクをマウスオーバーでサムネイルを表示するライブラリ

- Summary
リンクをマウスオーバーでサムネイルを表示するライブラリ．

<html>
	<head>
		<script type="text/javascript" src="http://example.com/path/to/arc90_linkthumb.js"></script>
		<style type="text/css" media="screen">
		.arc90_linkpic {
			display: none;
			position: absolute;
			left: 0;
			top: 1.5em;
		}
		.arc90_linkpicIMG {
			padding: 0 4px 4px 0;
			background: #FFF url(/tools/c/images/linkpic_shadow.gif) no-repeat bottom right;
		}
		</style>
		<script>arc90_linkThumbUseClassName = false;</script>
	</head>
	<body>
		<a href="http://example.com/" class="linkthumb">Popup</a>
		<a href="http://example.com/">No Popup</a>
	</body>
</html>


- Demo
arc90 lab - tools - Link Thumbnail - Demo
http://lab.arc90.com/tools/linkthumb/

- Reference
arc90 lab - tools - Link Thumbnail
http://lab.arc90.com/2006/07/link_thumbnail.php

2006-07-14 Fri

JavaScriptでリストをスクロール

- Summary
livedoor knowledge の質問がスクロールしている部分について．
gimmick.js を読んでみた．

function scrollTips(id, interval) {
	var tips = document.getElementById(id);
	removeWithoutElement(tips);
	var height = getPixcelValue(tips.style["height"]);
	var beforeLast = tips.childNodes.length - 1;
	var orgScrollTop = tips.scrollTop;
	if (orgScrollTop == (height * beforeLast)) {
		while (--beforeLast >= 0) {
			tips.appendChild(tips.removeChild(tips.firstChild));
		}
		orgScrollTop = 0;
		tips.scrollTop = 0;
	}
	var i = 1;
	var scrollDelay = window.setInterval(
		function() {
			tips.scrollTop = orgScrollTop + i;
			if (++i > height) {
				clearInterval(scrollDelay);
				scrollDelay = 0;
			}
		}
	, interval);
}
 
function removeWithoutElement(node) {
	var child = node.firstChild;
	while (child) {
		var nextSibling = child.nextSibling;
		if (child.nodeType != 1) {
			node.removeChild(child);
		}
		child = nextSibling;
	}
}
 
function getPixcelValue(pixcel) {
	var px = pixcel.indexOf("px");
	return (px == -1) ? pixcel: pixcel.substring(0, px);
}


<html>
	<head>
		<style>
			.tips {
				line-height: 125%;
				height: 65px;
				overflow:hidden;
			}
		</style>
	</head>
	<body>
		<div id="tipsList" style="float:right;width:153px;height:65px;overflow:hidden;">
			<div class="tips"><a href="#">1件目のコンテンツです。</a></div>
			<div class="tips"><a href="#">2件目のコンテンツです。</a></div>
			<div class="tips"><a href="#">3件目のコンテンツです。</a></div>
			<div class="tips"><a href="#">4件目のコンテンツです。</a></div>
			<div class="tips"><a href="#">5件目のコンテンツです。</a></div>
		</div>
		<script type="text/javascript">
			window.setInterval("scrollTips('tipsList', 15)", 2000);
		</script>
	</body>
</html>


- Reference
livedoor knowledge
http://knowledge.livedoor.com/

2006-07-03 Mon

Timeline - XMLを読み込んでライムラインを生成するウィジェット

- Summary
上部が詳細ビュー．下部が俯瞰ビュー．
ドラッグすることでグリグリ動かすことが出来る．

Timeline is a DHTML-based AJAXy widget for visualizing time-based events.


- Reference
SIMILE | Timeline
http://simile.mit.edu/timeline/

- via
phpspot開発日誌 - 2006-07-03 - ドラッグしてグリグリ移動できるDHTMLスケジューラウィジェット
http://phpspot.org/blog/archives/2006/07/dhtml_2.html

2006-07-03 Mon

wz_jsgraphics.js - JavaScript のクロスブラウザなベクタグラフィック描画ライブラリ

- Summary
DrawingCanvas.js [2006-01-10-12]のようなライブラリ．

- Reference
DHTML: Draw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Function Grapher Online
http://www.walterzorn.com/grapher/grapher_e.htm

- via
DrawingCanvas.js 0.03 公開: Days on the Moon
http://nanto.asablo.jp/blog/2005/10/12/105647

2006-06-30 Fri

JSide - JavaScript 統合開発環境

- Summary
Java で開発された，オープンソースの JavaScript 統合開発環境．
ライセンスは GNU LGPL (GNU LESSER GENERAL PUBLIC LICENSE) Version 2.1

o シンタックス色付け
o ブレース対応明示
o JavaScript関数アウトライン
o 文法チェック
o Undo / Redo
o ソースコードの印刷機能

- Reference
JSide : JavaScript IDE
https://jside.dev.java.net/

- via
JavaScript統合開発環境 JSide 1.0 登場
http://journal.mycom.co.jp/news/2006/06/28/345.html

- via ([2006-10-11]追記)
MOONGIFT - JSide
http://oss.moongift.jp/intro/i-2532.html

MOONGIFT - JSide レビュー
http://oss.moongift.jp/review/i-2533.html

2006-06-22 Thu