JavaScript

[jQuery]xmlを解析する

タイトル通り

Sample

 data.xml

<?xml version="1.0" encoding="UTF-8" ?>
<data>
<item id="A">あいうえお</item>
<item id="B">かきくけこ</item>
<item id="C">さしすせそ</item>
<item id="D">なにぬねの</item>
</data>

 

JavaScript

$.ajax({
    type:"GET",
    url:"data.xml",
    dataType:"xml",
    async:true,
    success:function(xml){
        $("#status").empty();
        $(xml).find("item").each(function(){
            var id=$(this).attr("id");
            var tex=$(this).text();
            $("#status").append("id:"+id+" text:"+tex+"<br/>");
        });
    }
});

[javascript]jQueryPlugin:frasiobox

不親切なjQueryPluginを作りました。
lightboxやfancyboxと同じような画像ビューワーです。
これらと違うところはuiが無い点です。
uiは自分で作りたい時に良いかと
使い方はサンプルを見て下さい。

下記ブラウザで動作を確認しました。
Windows7 Firefox7.0.1
Windows7 GoogleChrome 16.0.912.75 m
Windows7 Safari 5.1
WindowsXP IE6

frasiobox sample
js filejquery.frasiobox.js

Sample0(普通)
Sample1(重い画像ファイル)
Sample2(スタート番号指定)

[CSS3]iPhoneのホーム画面の動きをCSS3+jsで

iPhoneのホーム画面の動きを2つの方法で制作しました。
CSS3のanimationで動かす方法と
CSS3のtransformの値をjQueryのanimateで変化させる方法。
iPhoneで閲覧した場合
前者は動的にanimationの設定をしているので
トゥイーンが始まる時にちょっと動作が止まってしまいます。
後者は滑らかです。
Firefox,Chrome,Safari,iPhoneで動きます。

サンプルCSS3 animation

サンプルCSS3 jQuery.animate of translate

[javascript]audio.js

音を出すためのjs
HTML5ではなく小さなflashを利用しているので
ほとんどのブラウザで大丈夫です。
しかし、iPhone,iPadではエラーが起きるので
下記コードみたいに条件判定するとよい。
見た目を変えたいときはaudio.jsの中にCSSの記述があるので
これを書き換える。
※追記 ソースコードをよく見たら、ブラウザによってはHTML5を使っているようです

サンプルaudio.js

var isTouch = ('ontouchstart' in window);
init_audio();
function init_audio(){
	audiojs.events.ready(function() {
		if(isTouch)return;
		audiolist=audiojs.createAll();
	});
}

参考にしたサイト
audio.js
 

[Twitter]tweet with media

twitterの画像共有APIが公開されたので遊びました。

tweet with media

参考にしたサイト

POST statuses/update_with_media | Twitter Developers
https://dev.twitter.com/docs/api/1/post/statuses/update_with_media

themattharris/tmhOAuth – GitHub
https://github.com/themattharris/tmhOAuth

Index of /projects/phpThumbnailer/
http://www.hido.net/projects/phpThumbnailer/

jQuery.uploadでアップロード画像のサムネイルの作成 | Toro-Unit Blog
http://www.torounit.com/blog/2011/05/18/735/

[ajax]Twap

GoogleMapをクリックするとクリックした地点から
半径3km以内のツイートを検索して地図にプロットします。
制作時間:2時間

Twap