memo.xight.org

日々のメモ

カテゴリ : JavaScript

3ページ目 / 全9ページ

WebFX - グラフを描くためのJavaScriptライブラリ

Posted on | Tagged :

Sample

<html>
	<head>
		<script type="text/javascript" src="includes/iecanvas.js"></script>
		<script type="text/javascript" src="includes/chart.js"></script>
		<script type="text/javascript" src="includes/canvaschartpainter.js"></script>
		<link rel="stylesheet" type="text/css" media="screen" href="includes/canvaschart.css" />
	</head>
	<body>
		<div id="chart" class="chart" style="width: 400px; height: 200px;"></div>
	</body>
</html>


function draw() {
	var c = new Chart(document.getElementById('chart'));
	c.setDefaultType(CHART_AREA | CHART_STACKED);
	c.setGridDensity(5, 5);
	c.setVerticalRange(0, 100);
	c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri']);
	c.add('Spam',            '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70, 60]);
	c.add('Innocent',        '#8080FF', [ 8,  7, 12, 20, 24, 16, 36, 28, 28, 45]);
	c.add('Missed Spam',     '#A5A5FF', [ 8,  7, 12, 20, 24, 16, 36, 36, 18,  5]);
	c.add('False Positives', '#DEDEFF', [ 1,  2,  3,  2,  1,  4, 18, 12,  8,  7]);
	c.draw();
}

window.onload = function() {
	ieCanvasInit('includes/iecanvas.htc');
	draw(); 
};


Reference

Chart Usage (WebFX)
http://webfx.eae.net/dhtml/chart/usage.html

via

phpspot開発日誌 - 2006-08-22 - JavaScriptでグラフを描画出来るライブラリ『WebFX』
http://phpspot.org/blog/archives/2006/08/javascriptwebfx.html

PlotKit - Canvas, VML, SVG でグラフを描画するためのJavaScriptライブラリ

Posted on | Tagged :

Summary

グラフを描画することに特化したJavaScriptライブラリ．

<table> 内の数値をデータとして扱うことも可能．

MochiKit を利用して開発されている．
Internet Explorer でも Canvas をエミュレートして，ベクターな画像が表示可能．

グラフを扱うライブラリなど

XML/SWF Charts, PHP/SWF Charts[2005-03-10-6]

クロスブラウザなベクタグラフィック描画ライブラリ

DrawingCanvas.js [2006-01-10-12]
wz_jsgraphics.js[2006-07-03-9]

Reference

liquidx.net - PlotKit - Javascript Chart Plotting
http://www.liquidx.net/plotkit/

incsearch.js - インクリメンタルサーチライブラリ

Posted on | Tagged :

Summary

JavaScriptによるインクリメンタルサーチを行うためのライブラリ
creative commons (帰属 2.1 日本) ライセンス．

利用例

Enjoy×Study - del.icio.us IncSearch - del.icio.usをインクリメンタルサーチ
http://www.enjoyxstudy.com/javascript/bookmarklet/delicious_incsearch/

Enjoy×Study - hatebu IncSearch - はてなブックマークをインクリメンタルサーチ
http://www.enjoyxstudy.com/javascript/bookmarklet/hatebu_incsearch/

Reference

Enjoy×Study - incsearch.js - インクリメンタルサーチライブラリ
http://www.enjoyxstudy.com/javascript/incsearch/

Enjoy×Study - incsearch.jsを使って、del.icio.us direc.torのようなものを作ってみた
http://d.hatena.ne.jp/onozaty/20060319/p1

glayer.js - グレーアウト表示させるためのJavaScriptライブラリ

Posted on | Tagged :

Summary

Lightbox などのように，背景全体をグレーアウト表示させるためのライブラリ
creative commons (帰属 2.1 日本) ライセンス．

Reference

Enjoy×Study - glayer.js - グレーアウト表示ライブラリ
http://www.enjoyxstudy.com/javascript/glayer/

Enjoy×Study - 背景をグレーアウト表示するためのライブラリを作ってみました。
http://d.hatena.ne.jp/onozaty/20060807/p1

via

phpspot開発日誌 - グレーアウト表示ライブラリ:glayer.js
http://phpspot.org/blog/archives/2006/08/glayerjs.html

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

Posted on | Tagged :

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

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

Posted on | Tagged :

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/

Javascript Sound Kit - ActionScript Sound Object のラッパライブラリ

Posted on | Tagged :

Code Example

var mysound = new Sound();
mysound.loadSound("http://example.com/path/to/music.mp3", true);
mysound.setVolume(30);


Javascript MP3 Player Demo

http://jssoundkit.sourceforge.net/player.html

API Test Page

http://jssoundkit.sourceforge.net/test.html

Reference

SourceForge - Javascript Sound Kit
http://jssoundkit.sourceforge.net/

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

Posted on | Tagged :

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

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

Posted on | Tagged :

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

JavaScriptでリストをスクロール

Posted on | Tagged :

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/