memo.xight.org

日々のメモ

カテゴリ : JavaScript

5ページ目 / 全9ページ

指定した日時までの時間を表示するスクリプト "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>

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

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/

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

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

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

Canvas Graph library - canvas を使った JavaScript によるグラフ描画ライブラリ

Reference

Announcement: new Javascript/Canvas Graph library
http://aslakhellesoy.com/articles/2006/02/09/announcement-new-javascript-canvas-graph-library
OpenSpace - HTMLタグリファレンス - <canvas>タグ
http://www.openspc2.org/HTML/appendix/canvas_param/title.html

via

[戯] canvas を使った JavaScript によるグラフ描画ライブラリ
http://cl.pocari.org/2006-02-13-1.html

Firefox 検索 Plug-in を追加する JavaScript

Summary

クリックすると,Firefox に検索プラグインを追加するダイヤログが表示される.
Qooqle で発見した.
http://qooqle.jp/javascripts/firefox_plugin.js

Source

function addEngine() {
	if ((typeof window.sidebar == "object") && (typeof window.sidebar.addSearchEngine == "function")) {
	window.sidebar.addSearchEngine(
		"http://xight.org/misc/firefox/searchplugins/xight.src",  /* engine URL */
		"http://xight.org/misc/firefox/searchplugins/xight.png",  /* icon URL */
		"memo.xight.org",                          /* engine name */
		"Web検索");                                /* category name */
	} else {
		alert("検索プラグインを使用するには Mozilla Firefox、Mozilla、または Netscape 6 以上が必要です。");
	}
}


<a href="javascript:addEngine();">Firefox に検索プラグインを追加</a>


Sample

Firefox に検索プラグインを追加

Reference

Qooqle
http://qooqle.jp/

FCKEditor - WYSIWYG な HTML 編集ライブラリ

Summary

<?php
	include "fckeditor.php";
	$fckObject = new FCKeditor( "edit_name") ;
	$fckObject->BasePath = "./";
	$fckEditorHtml = $fckObject->CreateHtml();
?>
<form method="post">
	<?php echo $fckEditorHtml ?>
	<input type="submit" value="send" />
</form>
<?php echo $_REQUEST['edit_name'] ?>


イメージマネージャを利用する

fckconfig.js を編集
// var _FileBrowserLanguage    = 'asp' ;   // asp | aspx | cfm | lasso | perl | php | py
var _FileBrowserLanguage    = 'php' ;   // asp | aspx | cfm | lasso | perl | php | py
// var _QuickUploadLanguage    = 'asp' ;   // asp | aspx | cfm | lasso | php
var _QuickUploadLanguage    = 'php' ;   // asp | aspx | cfm | lasso | php


editor/filemanager/browser/default/connectors/php/config.php を編集
// SECURITY: You must explicitelly enable this "connector". (Set it to "true").
// $Config['Enabled'] = false;
$Config['Enabled'] = true;

// Path to user files relative to the document root.
// $Config['UserFilesPath'] = '/UserFiles/' ;
$Config['UserFilesPath'] = '/FCKeditor/UserFiles/' ;


% mkdir /var/www/FCKeditor/UserFiles


XOOPSに組み込む

FCKeditor - xoopsに組み込む
http://www.geocities.jp/fckeditor/xoops.html




FCKEditorクラスのメソッド

メソッド名 用途
FCKeditor コンストラクタ
Create FCKEditorを実行するHTMLを出力する
CreateHtml FCKEditorを実行するHTMLを返す
IsCompatible FCKEditorが使用できるかどうか調べる
GetConfigFieldString ConfigプロパティをFCKEditorに渡すパラメータ文字列に変換する(private的関数)

FCKEditorクラスのプロパティ

プロパティ名 用途
$InstanceName インスタンスするフォーム要素名を指定する
$BasicPath FCKEditor本体のURLパスを指定する
$Width 表示するFCKEditorの幅をピクセル単位で指定する
$Height 表示するFCKEditorの高さをピクセル単位で指定する
$ToolbarSet 使用するツールバーの種類を指定する.デフォルトでは「default」と「Basic」がある
$Value FCKEditorのデフォルト文字列
$Config その他のFCKEditorの設定を配列で指定

Reference

FCKeditor - The text editor for Internet
http://www.fckeditor.net/

via

Writing/kiwameru_php_vol.1/wysiwyg-editor - よくきた wiki
http://wiki.poyo.jp/read/Writing/kiwameru_php_vol.1/wysiwyg-editor
cl.pocari.org - PHP で WYSIWYG な編集ライブラリ FCKEditor
http://cl.pocari.org/2006-01-23-2.html

hotkey.js - キー割り当て用ライブラリ

Summary

kb.add("キー入力",実行する関数);
でキー割り当てを追加.
キー入力に配列を渡すことで,複数キー割り当ても可能.

Source

var kb = new HotKey;
kb.add(["j","2","down"], function(){rollto(c_pos + 1)});
kb.add(["k","8","up"]  , function(){rollto(c_pos - 1)});
kb.add(["H","home"],     function(){rollto(0)});
kb.add("pageup",         function(){rollto(c_pos-3)});
kb.add("pagedown",       function(){rollto(c_pos+3)});


Reference

最速インターフェース研究会 - 2005-11-04 - キー割り当て用ライブラリを作った
http://la.ma.la/blog/diary_200511041713.htm

Behaviour - Using CSS selectors to apply Javascript behaviours

Summary

onclick などのイベントで HTML を汚さずに記述する方法を提供.
CSS selectorを利用して,振る舞いを定義する.

Before

<li>
	<a onclick="this.parentNode.removeChild(this)" href="#">
		Click me to delete me
	</a>
</li>


After

<li>
<ul id="example">
	<li>
		<a href="/someurl">Click me to delete me</a>
	</li>
</ul>

var myrules = {
	'#example li' : function(el){
		el.onclick = function(){
			this.parentNode.removeChild(this);
		}
	}
};

Behaviour.register(myrules);


Reference

Behaviour : Using CSS selectors to apply Javascript behaviours
http://bennolan.com/behaviour/
Prototype JavaScript Framework: Class-style OO, Ajax, and more
http://prototype.conio.net/

JavaScript::DebugScreen - JavaScriptのエラーをド派手に表示するライブラリ

Summary

JavaScriptのド派手なDebugScreen.
これは一度使ったら手放せない予感.

使用法

以下をHTML内に記述.

<script type="text/javascript" src="debug.js"></script>
<link rel="stylesheet" href="debug.css">


Reference

JavaScript::DebugScreen
http://la.ma.la/misc/js/debugscreen/

最速インターフェース研究会 :: JavaScriptでDebugScreenを表示する
http://la.ma.la/blog/diary_200601150700.htm

最速インターフェース研究会 :: JavaScriptでDebugScreen、その2
http://la.ma.la/blog/diary_200601161315.htm