memo.xight.org

2006-07-24 Mon

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/

カテゴリ: [JavaScript]

[ 固定リンク ]

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

カテゴリ: [JavaScript]

[ 固定リンク ]

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

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-07-19 Wed

BadgerFish - XMLをJSONに

- Reference
BadgerFish
http://badgerfish.ning.com/

- via
XMLをJSON形式に変換する「BadgerFish」
http://secure.ddo.jp/~kaku/tdiary/20060718.html#p11

カテゴリ: [JavaScript][XML]

[ 固定リンク ]

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/

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-07-13 Thu

mechanize.js - IEの遠隔操作用ライブラリ

- Reference
最速インターフェース研究会 :: IEの遠隔操作用ライブラリmechanize.js
http://la.ma.la/blog/diary_200607121903.htm

カテゴリ: [JavaScript]

[ 固定リンク ]

- Summary
ツリーをエクスプローラ風に操作するJavaScript．
HTMLをインポートしたり，HTML,PHP,SQLにエクスポートが可能．

- Reference
DynamicTree example 2
http://code.gosu.pl/dl/mygosuMenu/demo/1.5/example2.html

code.gosu.pl
http://code.gosu.pl/

SourceForge.net: MyGosuClan
http://sourceforge.net/projects/mygosuclan/

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-07-06 Thu

Json-lib

- Reference
Maven - Welcome to Json-lib
http://json-lib.sourceforge.net/

- via
オレンジニュース - 2006-07-03
http://secure.ddo.jp/~kaku/tdiary/20060703.html#p04

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-07-06 Thu

OrderByColumn.js - prototype.js を用いた table の列でソートするJavaScriptライブラリ

- Reference
OrderByColumnデモ
http://skit.dip.jp/lab/js/order_by_column

- via
phpspot開発日誌 - 2006-07-06 - テーブルの列でソートするJavaScriptライブラリ
http://phpspot.org/blog/archives/2006/07/javascript_19.html

カテゴリ: [JavaScript][prototype.js]

[ 固定リンク ]

2006-07-05 Wed

Litebox - moo.fx を利用した軽量な Lightboxエフェクト

- Refernece
Litebox- Same great taste, less calories
http://www.doknowevil.net/litebox/

- via
GIGAZINE - ファイルサイズわずか3KBのオーバーレイ効果「Litebox」登場
http://gigazine.net/?/news/comments/20060705_litebox/

カテゴリ: [JavaScript]

[ 固定リンク ]

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

カテゴリ: [JavaScript]

内部リンク: [2006-08-27-7]

[ 固定リンク ]

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

カテゴリ: [JavaScript]

内部リンク: [2006-08-16-2]

[ 固定リンク ]

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

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-06-27 Tue

YUIとSimpleAPIを利用したリンク先サムネイル表示

- Reference
[YUI] マウスオーバーでリンク先サムネイル表示
http://www.kawa.net/works/js/tips/yui-tooltips.html

- via
phpspot開発日誌 - 2006-06-27 - マウスオーバーでリンク先サムネイル表示
http://phpspot.org/blog/archives/2006/06/post_86.html

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-06-26 Mon

iBox - lightbox.js 風エフェクトライブラリ

- Summary
MIT Open Sourceライセンス．

- Reference
iBox Test Page
http://www.ibegin.com/ibox/ibox-test.html
iBox / iBegin Blog (powered by evoBlog)
http://www.ibegin.com/blog/p_ibox.html

- via
GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」
http://gigazine.net/?news/comments/20060625_ibox_ajax/

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-06-22 Thu

JavaScript Library World Cup - JavaScriptライブラリの比較

- Summary
Dojo，Prototype.js，Mochikit，Yahoo UI Libraryの基本的な使い方と利点/欠点を紹介．

- Reference
The JavaScript Library World Cup [JavaScript & DHTML Tutorials]
http://www.sitepoint.com/article/javascript-library

- via
phpspot開発日誌 - 2006-06-21 - Ajaxフレームワークでワールドカップ
http://phpspot.org/blog/archives/2006/06/ajax_15.html

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-06-22 Thu

LITBox - LightBox風リサイズ可能ダイアログ表示ライブラリ

- Reference
Ryan J Lowe's Dev Blog - 2006-06-13 - LITBox
http://www.ryanjlowe.com/?p=9#

- via
phpspot開発日誌 - 2006-06-21 - LightBox風リサイズ可能ダイアログ表示ライブラリ:LITBox
http://phpspot.org/blog/archives/2006/06/lightboxlitbox.html

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-06-21 Wed

overLIB - マウスオーバーによるツールチップ生成 JavaScriptライブラリ

- Reference
overLIB
http://www.bosrup.com/web/overlib/

www.Javable.Jp - Notes：overLib リファレンス
http://www.javable.jp/notes/webscripts/overlibref.html

KANWAKYUDAI::Blog - 2004-01-14 - overLIBでツールチップ表示
http://guitar.jp/MT/archives/000181.php

- via
Smarty入門 PHP5＋テンプレート・エンジンでつくるMVCアプリケーション pp.200

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-06-21 Wed

Force Directed Graphs in Javascript - グラフを作成するJavaScriptライブラリ

- Reference
kylescholz.com :: blog: Force Directed Graphs in Javascript?
http://www.kylescholz.com/blog/2006/06/force_directed_graphs_in_javas.html

Jolt 開発Blog:タグの関連性を図で見るサンプルを作ってみた
http://blog.jolt.jp/2006/06/post_41.html

カテゴリ: [JavaScript][視覚化]

[ 固定リンク ]

2006-06-19 Mon

きれいな独自フォームの生成方法

- Summary
Niceform[2006-04-18-3]のような独自フォームを生成する方法．

- Reference
maratz.com - 2006-06-11 - Fancy checkboxes and radio buttons
http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/

- via
phpspot開発日誌 - 2006-06-19 - デフォルトのフォームをクールにカスタマイズする方法
http://phpspot.org/blog/archives/2006/06/post_85.html

カテゴリ: [CSS][JavaScript]

[ 固定リンク ]

Color Reference

カテゴリ

最近の話題

リンク

過去ログ

QR Code