memo.xight.org

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

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

2006-06-12 Mon

dp.SyntaxHighlighter - ソースのハイライトができるJavaScriptライブラリ

- Summary
クライアントでソースコードをハイライトできる、JavaScriptライブラリ。

- 対応言語
  ActionScript3
  Bash/shell
  C#
  C++
  CSS
  Delphi
  Diff
  Groovy
  JavaScript
  Java
  JavaFX
  Perl
  PHP
  PlainText
  PowerShell
  Python
  Ruby
  Scala
  SQL
  VisualBasic
  XML

- Reference
Google Code - syntaxhighlighter
http://code.google.com/p/syntaxhighlighter/

Alex Gorbatchev - SyntaxHighlighter
http://alexgorbatchev.com/wiki/SyntaxHighlighter

- via
phpspot開発日誌 - 2006-01-17 - Javascriptだけで各種プログラム言語コードを色分け表示する方法
http://phpspot.org/blog/archives/2006/01/javascript_2.html

2006-06-12 Mon

振る舞い分離 JavaScript ライブラリ

- behaviour.js
http://bennolan.com/behaviour/

- Modified Behavior
behaviour.jsの改良版.
http://www.firelord.net/modifiedbehavior

- document.getElementsBySelector
http://simon.incutio.com/js/getElementsBySelector.html

- cssQuery
http://dean.edwards.name/my/cssQuery/

- jQuery
http://jquery.com/

- prototype.js
http://prototype.conio.net/

- Reference
我的春秋: 振る舞い分離 JavaScript ライブラリ一覧
http://my-chunqiu.cocolog-nifty.com/html/javascript-behaviour.html
TECHMemo - 2005-12-31 - CSSのselectorとイベントハンドラの関連付け
http://d.hatena.ne.jp/dann/20051231/p5
fladdict.net blog - 2006-06-02 - jsがメッサ楽しくなるフレームワークjQuery(1)
http://fladdict.net/blog/2006/06/jsjquery1.html
JavaScript++かも日記 - 2006-06-02 - jQuery
http://jsgt.org/mt/archives/01/001088.html
- via
我的春秋 - 2006-01-05 - JavaScript ソースが HTML から消える日
http://my-chunqiu.cocolog-nifty.com/blog/2006/01/javascript_html_bc22.html
我的春秋 - 2006-06-10 - 続 JavaScript ソースが HTML から消える日
http://my-chunqiu.cocolog-nifty.com/blog/2006/06/_javascript_htm_d49c.html

2006-06-09 Fri

JavaScriptでラスタスクロール,サイコロ回転エフェクト

- Reference
Kawa.net - Animation.Raster - ラスタスクロールだ!
http://www.kawa.net/works/js/animation/raster.html
Kawa.net - Animation.Cube - サイコロ回転エフェクト (rotating cube animation)
http://www.kawa.net/works/js/animation/cube.html
- via
@IT - Ajax うきうき Watch 第8回 “CGUI” 消費者が作り出すユーザーインターフェイスの時代
http://www.atmarkit.co.jp/fwcr/rensai/ajaxwatch08/01.html

2006-05-18 Thu

指定した日時までの時間を表示するスクリプト "countdown.js" と使用法

- Summary
YAPC::Asia 2006のカウントダウンで使われていたスクリプトを見てみた.

- countdown.js

function toCountString(sec) {
	if (sec <= 0) {
		return '00:00:00';
	}
	var day = Math.floor(sec / (60*60*24));
	var hour = Math.floor(sec % (60*60*24)/(60*60)).toString().replace(/^(\d)$/, '0$1');
	var min = Math.floor(sec % (60*60*24) / (60) % 60).toString().replace(/^(\d)$/, '0$1');
	var sec = Math.floor(sec % (60*60*24)%60%60).toString().replace(/^(\d)$/, '0$1');
	return day + 'days ' + hour + ':' + min + ':' + sec;
}
 
function updateCountdown(id, m, c) { 
	var node = document.getElementById(id);
	if (!node) {
		return false;
	}
	for (var i = 0; i < node.childNodes.length; i++) {
		node.removeChild(node.childNodes[i]);
	}
	var count = toCountString(Math.floor((m - c)/1000));
	node.appendChild(document.createTextNode(count));
}


- HTML
<script type="text/javascript" src="countdown.js">
<div id="countdown"></div>
<script type="text/javascript">
	updateCountdown('countdown', new Date('March 29,2006 00:00:00'), new Date());
	setInterval("updateCountdown('countdown', new Date('March 29,2006 00:00:00'), new Date())", 1000);
</script>


- 複数のカウントダウンに対応する
原始的にやってみると以下のようになる.
<div id="countdown-1"></div>
<div id="countdown-2"></div>
<div id="countdown-3"></div>
<script type="text/javascript">
	updateAllCountdown();
	setInterval("updateAllCountdown()",1000);
 
	function updateAllCountdown(){
		updateCountdown('countdown-1', new Date('June 22,2006 00:00:00'), new Date());
		updateCountdown('countdown-2', new Date('October 1,2006 00:00:00'), new Date());
		updateCountdown('countdown-3', new Date('March 18,2007 00:00:00'), new Date());
		return true;
	}
</script>

2006-04-20 Thu

リンクをマウスオーバーでサムネイルをポップアップ

- Source

function linkthumb(){
	var nophoto = 'http://img.simpleapi.net/img/nophoto.gif';
	var img = document.createElement('img');
	img.src = nophoto;
	img.onmouseout = function(){
		img.src=nophoto;
		img.style.display='none';
	};
	img.style.position = 'absolute';
	img.style.cursor   = 'pointer';
	img.style.display  = 'none';
	document.body.appendChild(img);
	var d = document.getElementsByTagName('div');
	for (var j = 0 ; j < d.length ; j++){
		if (d[j].className != 'body') continue;
		var a = d[j].getElementsByTagName('a');
		for (var i = 0 ; i < a.length ; i++){
			if (!a[i].href.match(/^http:/)) continue;
			if (a[i].href.match("^http://www\.example\.org/path/to/dir/")) continue;
			a[i].onmouseover=function(e){
				var link  = this.href;
				var thumb = 'http://img.simpleapi.net/small/'+link;
				img.onmouseover=function(){
					img.src=thumb;
					img.style.display='block';
				};
				img.onclick = function(){
					location.href=link;
				};
				if(document.all){
					img.style.left = document.documentElement.scrollLeft + event.x + "px";
					img.style.top  = document.documentElement.scrollTop  + event.y + "px";
				}else{
					img.style.left = e.pageX + "px";
					img.style.top  = e.pageY + "px";
				}
				img.src = thumb;
				img.style.display = 'block';
			};
			a[i].onmouseout = img.onmouseout;
		}
	}
}
if(window.addEventListener){
	window.addEventListener('load',linkthumb,false);
} else if(window.attachEvent){
	window.attachEvent('onload',linkthumb);
} else {
	window.onload=linkthumb;
}


以下の部分を適宜書き換えることで,自分のサイトはポップアップさせないように設定可能.
if(a[i].href.match("^http://www\.example\.org/path/to/dir/")) continue;


- Reference
Simple API - ウェブサイト・サムネイル化ツール
http://img.simpleapi.net/
- via
halchan's diary
http://www.halchan.org/diary/

2006-03-15 Wed

JavaScript で指定の HTML 要素を動的に角丸デザインにする方法

- Source

Rounded("div#nifty","#377CB1","#9BD1FA"); // この1行だけで要素を角丸にすることが可能


<div id="nifty"><p>test</p></div>


- Reference
Nifty Corners
http://pro.html.it/esempio/nifty/
- via
phpspot開発日誌 - Javascriptで指定のHTML要素を動的に角丸デザインにする方法
http://phpspot.org/blog/archives/2006/03/javascripthtml.html

2006-03-15 Wed

target="_blank" を使わないで新しいウィンドウでリンクを開く方法

- Summary
target="_blank" を使わないで新しいウィンドウでリンクを開くための手法.
Behaviour.js を利用すればより簡単,かつHTMLを汚さずに実装可能.
Sample

- Source

var myrules = {
	'.popup' : function(el){
		var href = el.getAttribute('href');
		if (href){
			el.onclick    = function(){ window.open(href); return false;}
			el.onkeypress = function(){ window.open(href); return false;}
		}
	}
};
Behaviour.register(myrules);


<script type="text/javascript" src="behaviour.js"></script>
 
<a href="index.html">Normal</a>
<a class="popup" href="index.html">Pop up</a>


- Reference
Behaviour : Using CSS selectors to apply Javascript behaviours
http://bennolan.com/behaviour/

- via
cl.pocari.org - 2006-03-14
http://cl.pocari.org/2006-03-14-5.html

2006-02-17 Fri

JavaScriptにおけるコントロール名としてのブラケット (大括弧) の利用

- Summary
PHP で フォームの値を配列として受け取りたい場合,
以下のように記述するが,JavaScript で値を受け取る場合にちょっと面倒.

<input name="hoge[]" />
<input name="hoge[]" />


- name が hoge[0],hoge[1] ... の場合
<input name="hoge[0]" />
<input name="hoge[1]" />


JavaScript で hoge[1] の値を取得したい.
以下の場合,配列として認識されてしまう.
document.forms[0].hoge[1].value;


elements を用いて解決.
document.forms[0].elements["hoge[1]"].value;


- name が hoge[],hoge[] ... の場合
<input name="hoge[]" id="hoge0" />
<input name="hoge[]" id="hoge1" />


JavaScript で hoge[1] の値を取得したい.
getElementById を用いて解決.
document.getElementById('hoge1').value;


elements を用いて解決.
document.forms[0].elements[1].value;


- Reference
Web相談室 - JavaScriptにおけるコントロール名としての[]の利用
http://www.parkcity.ne.jp/~chaichan/qanda/qa5517.htm

PHP マニュアル - 第71章 PHPとHTML - 3. HTMLフォームで配列を使用するにはどうすればよいですか?
http://php.s3.to/man/faq.html.html#faq.html.arrays

W3C Recommendation - HTML4.01 - Basic HTML data types - CDATA
http://www.w3.org/TR/html401/types.html#type-cdata

W3C Recommendation - HTML4.01 - Forms in HTML documents - The INPUT element
http://www.w3.org/TR/html401/interact/forms.html#h-17.4