javascriptの最近のブログ記事

TwitPicの画像を表示させるのを
今更やりたくて出来たのでメモ。

Twitterに投稿した際
mhp3
というタグが振ってある（想定）条件で検索して、
Twitpicの画像を５件分表示させる、、という動きにしています。

まずHTMLから。
<div id="images"></div>
の中にulを動的に作り、最大件数まで
liを追加する事にします。

次に、通信を行なうのに何かと便利なのでheadタグ内でjqueryを読んでおきます

そして肝のtwitpicのapiから情報を取得する部分はこのようにしてます。
popupの処理はおまけなので特になくてもok。
そこは_blankをつけたくないだけ（jsだとvalidator関係ないかもですが）

最後にCSSでかるく整えて完成です。

デモはこちらにおきました。
» "mhp3"というタグつきでTwitPic投稿された画像を５件表示 demo

prototype.jsのメモ。
あるブロック要素を、ボタンを押したタイミングで閉じたり開いたりする時。
HTML要素がある事をあてにした書き方だとIEでのみエラーがでた。

これだとエラー。.innerHTMLで中身はいってる？とかにしても駄目。

Event.observe(window, "load", function(){
	var element = $("panel");
	if (element.length>0) {
		Event.observe("btn_open", "click", function(){
			$("panel").show();
			$("btn_open").hide();
			$("btn_close").show();
		}, false);
		Event.observe("btn_close", "click", function(){
			$("panel").hide();
			$("btn_open").show();
			$("btn_close").hide();
		}, false);
		$("panel").hide();
		$("btn_close").hide();
	}
}, false);

panel

開閉されるブロック要素。id="panel"が振られている。

btn_open

開くボタン。id="btn_open"が振られている。

btn_close

閉じるボタン。id="btn_close"が振られている。

※開くボタンと閉じるボタンも見栄えが変わる様表示切り替え、という設定

これで上手くいった。jQueryのセレクタでなれてるのでこっち使おうと思う。というメモ。

Event.observe(window, "load", function(){
	var element = $$("#panel");
	if (element.length>0) {
		Event.observe("btn_open", "click", function(){
			$("panel").show();
			$("btn_open").hide();
			$("btn_close").show();
		}, false);
		Event.observe("btn_close", "click", function(){
			$("panel").hide();
			$("btn_open").show();
			$("btn_close").hide();
		}, false);
		$("panel").hide();
		$("btn_close").hide();
	}
}, false);

TwitPicの画像を表示させるのを
今更やりたくて出来たのでメモ。

Twitterに投稿した際
mhp3
というタグが振ってある（想定）条件で検索して、
Twitpicの画像を５件分表示させる、、という動きにしています。

まずHTMLから。
<div id="images"></div>
の中にulを動的に作り、最大件数まで
liを追加する事にします。

次に、通信を行なうのに何かと便利なのでheadタグ内でjqueryを読んでおきます

そして肝のtwitpicのapiから情報を取得する部分はこのようにしてます。
popupの処理はおまけなので特になくてもok。
そこは_blankをつけたくないだけ（jsだとvalidator関係ないかもですが）

最後にCSSでかるく整えて完成です。

デモはこちらにおきました。
» "mhp3"というタグつきでTwitPic投稿された画像を５件表示 demo

prototype.jsのメモ。
あるブロック要素を、ボタンを押したタイミングで閉じたり開いたりする時。
HTML要素がある事をあてにした書き方だとIEでのみエラーがでた。

これだとエラー。.innerHTMLで中身はいってる？とかにしても駄目。

Event.observe(window, "load", function(){
	var element = $("panel");
	if (element.length>0) {
		Event.observe("btn_open", "click", function(){
			$("panel").show();
			$("btn_open").hide();
			$("btn_close").show();
		}, false);
		Event.observe("btn_close", "click", function(){
			$("panel").hide();
			$("btn_open").show();
			$("btn_close").hide();
		}, false);
		$("panel").hide();
		$("btn_close").hide();
	}
}, false);

panel

開閉されるブロック要素。id="panel"が振られている。

btn_open

開くボタン。id="btn_open"が振られている。

btn_close

閉じるボタン。id="btn_close"が振られている。

※開くボタンと閉じるボタンも見栄えが変わる様表示切り替え、という設定

これで上手くいった。jQueryのセレクタでなれてるのでこっち使おうと思う。というメモ。

Event.observe(window, "load", function(){
	var element = $$("#panel");
	if (element.length>0) {
		Event.observe("btn_open", "click", function(){
			$("panel").show();
			$("btn_open").hide();
			$("btn_close").show();
		}, false);
		Event.observe("btn_close", "click", function(){
			$("panel").hide();
			$("btn_open").show();
			$("btn_close").hide();
		}, false);
		$("panel").hide();
		$("btn_close").hide();
	}
}, false);