mousemove + elementFromPoint でマウスカーソルが示すノードを取得 - latest log
mousemove と elementFromPoint を使うと、マウスカーソル直下のノードを取得できます。 elementFromPoint のサポート状況 http://www.quirksmode.org/dom/w3c_cssom.html#t20 デモ http://pigs.sourceforge.jp/blog/20100401/test/uu.Class.ElementFromPoint.htm IE6+, Safari3.1+, Firefox3+, Google Chrome4+, Opera9.5+ で動きます。 コード // === elementFromPoint === //{{{!depend uu, uu.class //}}}!depend uu.Class.ElementFromPoint || (function(win, doc, uu) { //
Array.forEach や Array.map は Firefox2〜3 や IE で利用できないケースがある - latest log
元々のタイトルは「要素数 n の密な配列を作ろうとして空回りした(JScript の Array をクロスブラウザ化)」だったんですが、ちょっと変えました。 Firefox2〜3 や IE6 〜 IE8 では、ECMAScript 5th で追加された Array.map などの便利メソッドの利用に制限があります。うっかりやっちゃうと、非常に面白くないことになります。 元々は、nanto_vi さんのつぶやきを見て、 @teramako Array.apply(null, Array(10)).map(function (e, i) i) とか。 http://twitter.com/nanto_vi/status/5014927085 そういえば以前、要素数 n の密な配列を作るのに Array.apply(null, Array(n)) が使えないかと思ったけど、JScriptでダメだ
良く訓練されたスライダー - latest log
JavaScript で作った UI 部品の話になると、 jQuery UI とか、jQuery TOOLS あるじゃん とか良く聞きますね。 jQuery UI http://jqueryui.com/demos/ ソータブルなリスト http://jqueryui.com/demos/sortable/default.html スライダー横 http://jqueryui.com/demos/slider/default.html Drag http://jqueryui.com/demos/draggable/default.html Drop http://jqueryui.com/demos/droppable/default.html jQuery TOOLS http://flowplayer.org/tools/index.html UI の話だったら、jQuery よりも
/^[a-z]+(\d+)/("abc123") という書き方が許容されているみたい(IE除く) - latest log
Safari, Chrome, Firefox, Opera では、 /^[a-z]+(\d+)/("abc123")とすると、 /^[a-z]+(\d+)/.exec("abc123")相当の動作をするようです。 IE だと「関数が見つからない」とエラーになります。 寝ぼけながら書いたコードが IE 以外だとまともに動いちゃったりして気がつきました。ちょっとしたサプライズです。
![/^[a-z]+(\d+)/("abc123") という書き方が許容されているみたい(IE除く) - latest log](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa425bc68b729d39821549b9810a4f0b98e52893/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127139005654%2F17680117127139028318%2F1558098883)
もっと速くするために(スコープ解決コストと正規表現オブジェクトの置き場所) - latest log
正規表現オブジェクトをどのように配置すれば効率的なのか調べました。 配置パターン A. ループ内にべた書き function job(expr, n) { var i = 0, match; for (var i = 0; i < n; ++i) { match = /regexp1/.exec(expr); match = /regexp2/.exec(expr); } } B. スコープ内(ループの外)に配置 function job(expr, n) { var i = 0, match, REX1 = /regexp1/, REX2 = /regexp2/; for (var i = 0; i < n; ++i) { match = REX1.exec(expr); match = REX2.exec(expr); } } C. 5つ外側のスコープに配置 (function() {
関数の初期化とCallオブジェクト - latest log
大事なことなので、記憶を裏打ちしてみる。 <!doctype html><html><head><title></title></head><body><script> function fn() { alert(typeof a + ", " + a); // undefined, undefined alert(typeof b + ", " + b); // function, function() { alert("b2"); } b(); // alert("b2"); try { alert(typeof c + ", " + c); } catch(err) { alert("c was not found"); } function b() { alert("b3"); } function b() { // duplicity alert("b2"); } var a =
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
excanvas.js のハマリどころ, G_vmlCanvasManager.initElement の使い方 - latest log
追記: uupaa-excanvas.js をリリースしました。 excanvas.js は IE で canvas 要素のエミュレートを行う Google 謹製の JavaScript ライブラリです。 このライブラリは、最初のとっかかりが結構難しいです。 実体験を元に、ハマリポイントを列挙してみます。 動的に生成したcanvas要素は、すぐにドキュメントツリーに追加し、その場で初期化する必要がある。 以下が、動的にcanvas要素を生成し2Dコンテキストを取得する例です。が… var e = document.createElement("canvas"); document.body.appendChild(e); var ctx = e.getContext("2d"); 上記のコードでは、IEでは動作しません(Firefox,Safari,OperaはOK)。 動的に生成したca
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
