注意： sleep sort は、あくまでもネタです。ネタとして楽しんでください。
コメント欄でも指摘されてますが、実用に耐えるものではありません。
間違っても実用しようとか思わないように！
一部で話題沸騰中のソートアルゴリズム「sleep sort」を jQuery 用プラグインとして実装してみました。
via. 常識を覆すソートアルゴリズム！その名も"sleep sort"！ – Islands in the byte stream
とりあえず、デモ。
下の textarea に数値をスペース区切りで入力してから「Sleep Sort!」をクリックしてください。
ソートされるはずです。
続きを読む
Twitter で、@masaru_b_cl さんが、「jQueryでチェックボックスがチェックされているかどうかを取るのって、 var checked = $("#checkboxid").attr("checked"); しか方法ないのか・・・」と言ってました。
jQuery オブジェクトには .checked() とかってメソッドがありません。
なので checkbox がチェックされてるかどうかは、通常以下のようにして取得します。
checked = $("#checkboxid").attr("checked");
checked = $("#checkboxid").get(0).checked;
ただ、これだとあまり直感的じゃないですね。
checked = $("#checkboxid").checked(); のようにして、取得できるとカッコイイです。
本当にできないんでしょうか？
実は .checked() メソッドを jQuery オブジェクトに追加するのは、すごい簡単です。
続きを読む
先日 Twitter の公式 Tweet ボタンが提供されました。
ただし、この機能では Twitter が提供するボタン画像しか使えません。
Tweet ボタンとして他の画像を使いたい場合は、「Build your own」の所で説明されているように http://twitter.com/share へのリンクを設置してねとしか説明されていません。
しかし、これでは公式 Tweet ボタンのようにサブウィンドウを開いて Tweet することができませんね。
任意のリンクに公式 Tweet ボタンと同様の機能を持たせるにはどうすれば良いのでしょうか？
ここでは jQuery で、任意のリンクに公式 Tweet ボタンと同様の機能を持たせる方法を解説します。
続きを読む
画像や動画を lightbox 風に表示する拙作の jQuery 用プラグイン jQuery.lightpop.js ですが、画像の拡大表示で大きな問題がありました。
以下のようにサムネイル表示されている画像と、リンク先の画像が同一で、サムネイル表示している画像を width, height で小さく表示している場合、画像本来のサイズ(幅, 高さ)が取得できないため、正常に表示できないのです。
<a href="pict01.jpg" rel="lightbox" title="画像１"><img src="pict01.jpg" alt="画像１" width="160" height="120"/></a>
困ったなぁと思いつつも、画像本来のサイズを取得する方法について調べずに放置していましたが、以下のエントリを読んで解決したので、久々に jQuery.lightpop.js をバージョンアップします。
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 – latest log
続きを読む
さて、昨日のエントリの続き。
「Googlle AJAX Feed API なんて外部のサービスに依存したくないんじゃ！」という人のために、昨日と同様のことを自前で行うための方法。
WordPress の更新情報を JavaScript で取得して表示するには AJAX と呼ばれる技術を使います。
しかし、http を通してデータを読み込むための XMLHttpRequest では、制限として別ドメインのデータを読み込むことができません。
これを回避する方法が JSONP です。
hiromasa さんが、昨日のエントリにトラックバックしてくれた静的 HTML に WordPress を埋め込む方法を用いて JSONP 形式で、WordPress の最新記事を取得してみましょう。
続きを読む
みなみさんが静的ページに WordPress の新着記事一覧を表示する方法を急募していた。
これを実現するために JavaScript で RSS フィードを取得して表示する方法を調べたので、自分用にメモ。
使用するのは Google AJAX Feed API。
Google AJAX Feed API を使用するには、APIキーが必要。
Google Map を利用する際に取得した API キーがあれば使えるが、無ければGoogle AJAX Feed API への登録をしておこう。
続きを読む
主に日本国内のマイクロブログサービスを横断検索するつぶやき専門の検索エンジン Twiple! を開発した ayunyan さんが、Twiple! の API を利用した Tweetback を実装したと言うことなので、テスト用に簡単なブックマークレットを書いてみた。
以下のリンクをブックマークに登録して、Twitter などのマイクロブログサービスで言及されているかどうか調べたいページで使ってみてください。
しばらくして画面右側に Twiple! での検索結果が表示されます。
邪魔になったら、「Close」をクリックすれば、画面上から消えます。
Tweetback!
Twiple! の検索速度が速いので、結構快適に検索結果が見れますね。
Firefox 3.05 (on Ubuntu) でしか動作確認していないので、他のブラウザだと不具合があるかも。
続きを読む
Google Chrome はレンダリングエンジンに Safari と同じ Webkit を使用している。
そのため jQuery 1.2.6 では Safari として認識される。
# jQuery では、ユーザーエージェントに webkit の文字があると Safari として認識するため
しかし、JavaScript エンジンは独自の V8 を使用しているため、jQuery をそのまま使用すると、微妙に不具合が発生する。
すべては調べきれていないが、概ねエレメントの位置取得で問題が発生している感じだ。
私が JSeries でリリースしているプラグインでは、大抵 JavaScript で jQuery を使用しているため、一挙に微調整をした。
バージョンアップしたのは、以下の５つのプラグイン。
IE が独自に実装しているプロパティ hasLayout。
これが false の時にレイアウト崩れを起こすバグは多々あります。
このバグを回避するために CSS で * {zoom:1;} とかって指定して強引に全要素の hasLayout プロパティを true にしてしまうハックは、広く知られています。
（参照：IEでのCSSのバグを回避するhasLayout | コリス）
しかし、この hasLayout プロパティ、実は true の時にもバグを引き起こすことがあるのです。
しかも、凶悪なことに <ul>, <ol> 要素の hasLayout が true の時、リストマーカーが消えてしまうと言うバグ。 👿
(参照：hasLayoutプロパティがtrueで発生するバグ – Webtech Walker)
で、実は Quick Comments Ver.0.5.1 をリリースしたときにみなみさんに指摘されたのですが、IE でリストマーカーの数字が消える不具合が発覚しました。
これは、jQuery で <ol> 要素を操作する際に、お節介にも jQuery が CSS に zoom:1 をセットしてしまい、結果として hasLayout プロパティが true になってしまうために発生した不具合でした。
とりあえず、回避策として CSS の zoom プロパティを保持しておいて、 IE の場合のみ <ol> 要素の操作終了後、元に戻すようにしてあげました。
IE のお陰で本質的でない所で、頭を悩ませられるのは疲れますね。
昨日のエントリの続き。
WordPress.com Stats 日本語版の JavaScript を並列読み込み対応にしてみましょう。
WordPress.com Stats 日本語版で JavaScript を読み込み、動作用の JavaScript をフッタに書き出しているのは、stats.php の 107 〜 113 行目の以下のコード。
<script src="http://stats.wordpress.com/e-<?php echo gmdate('YW'); ?>.js" type="text/javascript"></script>
<script type="text/javascript">
st_go({<?php echo stats_array($a); ?>});
var load_cmc = function(){linktracker_init(<?php echo "{$a['blog']},{$a['post']},2"; ?>);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();
</script>
まず、外部 JavaScript http://stats.wordpress.com/e-<?php echo gmdate('YW'); ?>.js を読み込み、その後 st_go() 関数、linktracker_init() 関数を呼び出しています。
外部 JavaScript の読み込みが完了してからでないと st_go() 関数を呼び出すことはできないため、並列読み込みでは問題が生じます。
# JavaScript のロード完了まで待たないで継続処理を行われると処理不可能。
また、st_go() 関数の中では document.write() を使って <img> タグを書き出しているため、単純に DOM 操作で <script> タグを head 内にブチ込むだけでは、うまくいきません。
続きを読む