memo.xight.org

日々のメモ

カテゴリ : JavaScript

3ページ目 / 全9ページ

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

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 - インクリメンタルサーチライブラリ

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ライブラリ

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でブラウザの表示領域のサイズを取得する方法

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

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

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 のラッパライブラリ

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 - マウスホイールで画像を切り替える

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 - リンクをマウスオーバーでサムネイルを表示するライブラリ

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でリストをスクロール

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/