less - 非同期処理を挟むと発動するポップアップブロックへの対処方法
各ブラウザのポップアップブロック機能は普通ユーザーが起こしたイベントに対しては発動しないように作られていますが、例えば要素がクリックされると非同期でリンク先を取得してページを開くような場合、Operaを除く主要ブラウザでポップアップブロックが発動します。実際どうなるかクリックするとURLをbit.lyして別ウィンドウで開くサンプルを書いて試してみました。ちなみにわざわざ非同期でリクエストするのは負荷軽減のためです。 #0は最初からURLが分かっている場合です。非同期ではないので各ブラウザ、直接開いたと認識して問題なく動きます。参考用で今回のテストとは関係ないです。 #1はbit.lyへのJSONPリクエストを挟みました。結果を取得後にwindow.openしています。ブラウザでポップアップを許可していない場合、 IEとFirefoxはポップアップブロックが働き警告が出る SafariとCh
Monitoring DOM properties – James Padolsey
I recently came across a jQuery plugin that claims to emulate the functionality of Object.prototype.watch, a method inherent in all objects that enables you to watch for a property change and run a function upon that change. Of course, this isn’t available in all implementations. IE, for example, doesn’t support this but has a DOM equivalent, onPropertyChange. Both methods are useful but their sli
Binding Events To Non-DOM Objects With jQuery
Yesterday, Dan G. Switzer, II was giving me some really great jQuery tips. Among the things that we discussed was the ability to define an anonymous function and then call it immediately: This is not jQuery specific, but the benefits of doing this is that you can create a totally private memory space in which to execute your anonymous function. In this memory space, locally declared variables won'
iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadでダブルタップをJavaScriptで実装する iPhone/iPadのJavaScriptでは「onclick≒タップ」なのに「ondblclick≠ダブルタップ」となるのでダブルタップを利用したい場合は独自に実装しなくてはいけない。 次のように記述するとjQueryで擬似的にダブルタップを実装することが出来ます。 $("p").data("dblTap",false).click(function(){ if($(this).data("dblTap")){ //ダブルタップ時の命令 console.log("ダブルタップ"); $(this).data("dblTap",false); }else{ $(this).data("dblTap",true); } setTimeout(function(){ $("p").data("dblTap",false);
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
iPhone/iPadでPCと同じJavaScriptのイベントを実装する PC向けに作ったサイトをiPhoneやiPadでも利用できるようにする際に注意しなくてはいけないのがJavaScriptのイベントです。 iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。 使い分けとしてはだいたい次のようになります。 ontouchstart = onmousedown ontouchmove = onmousemove ontouchend ≒onmouseup ですのでjQueryを利用した場合、 var ua =navigator.userAgent; if(ua.indexOf('iPhone'
Greasemonkeyでウィンドウ（画面）がアクティブになる度に何かしたい場合の書き方 - phithonのブログ
「javascript」、「ウィンドウ」、「前面」辺りでぐぐっても参考になるページが無かったので書いておく。 documentのfocusに対してイベントリスナを登録すればおｋ。 最初document.bodyに対して登録しててハマった。 document.addEventListener('focus', function (e) { // 処理 }, false);
Detecting event support without browser sniffing — Perfection Kills
One of the pain points of feature testing in client-side scripting is that for event support. DOM doesn’t really specify any means to detect exactly which events browser understands and can work with. If you’d like to know if a browser supports, say, “dblclick” event, you’re pretty much out of luck. This is probably the reason why so many scripts on the web employ unreliable browser sniffing in su
結構前から収集していた海外エントリから面白いcustom eventの使い方を紹介 - monjudoh’s diary
jQueryでは非DOMオブジェクトにもeventをbind/triggerできる Binding Events To Non-DOM Objects With jQuery この例だとwindow.location.hrefが変化しているかどうかTimerで監視し続け、 変化したタイミングで$( window.location ).trigger('change',data);で変更前後の情報を通知している。 なので、$( window.location ).bind('change',function(ev,data){});で通知を受け取る事ができる。 hashで状態を管理しているAjaxアプリで有効そうなテクニック。 select boxでcustom eventを活用 http://trulyevil.com/2009/05/07/custom-events-in-jquery/
汎用的にcurrentTarget,target,pageX,pageYをJavaScriptのイベントでとる方法 - yukobaのブログ
何度やっても忘れてしまうので、自分へのメモ。JavaScriptはIEだけ、イベントが特殊なので、汎用的に扱うための方法。今、僕が欲しいのは、currentTarget, target, pageX, pageYの4つです。何かの参考にどうぞ。IEは5以降に対応してます。Firefox 3.6, Chrome 4, Safari 4, Opera 10で確認。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><script type="text/javascript"> window.onload = function() { document.getElementById("a").onclick = fu
Using setTimeout to Delay Showing Event-Delegation Tooltips | Learning jQuery
In my last two tutorials, I explained how to use event delegation for showing and hiding tooltips. In a comment on the first one, Jan Aagaard asked how we might go about enhancing the script by adding a small delay before showing a tooltip. The answer lies with two JavaScript functions, setTimeout() and clearTimeout(). Setting Up Picking up where we left off last time, I’m going to create the tool
Binding Multiple Events to Reduce Redundancy with Event-Delegation Tooltips | Learning jQuery
Last time I showed how to use event delegation to create a simple tooltip for a huge number of elements without running into the problem of binding an event handler to all of those elements. In this tutorial, I’m going to refine that tooltip script a bit, avoiding some code repetition and fixing a bug that someone pointed out in a comment. For review, here is the final version of the script from t
Selectors APIのmatchesSelectorと、動的なページでのイベント処理 - 素人がプログラミングを勉強していたブログ
Selectors APIのDraftに、matchesSelectorというAPIが定義されていて、現在、WebKitとMinefieldのNightlyに搭載されている。 ただし、ドラフトなのでベンダープレフィックスがついていて、Element#webkitMatchesSelectorやElement#mozMatchesSelectorを使わなければいけない（というより、まだ直接使うには時期尚早だ）。 使い方は簡単。 var paragraphs = document.getElementsByTagName("p"); paragraphs.item(0).webkitMatchesSelector("p"); // true paragraphs.item(1).webkitMatchesSelector("div#main > p"); // <div id="main"><
JavaScriptの高速化3 - Hashによる検索を活用することで、ドラッグをもっとスムーズに - latest log
IE6のベンチスコアを追加 補足を追加 アイコンやウインドウをつかんでずずっと移動する。 この動作をもっともっとスムーズにするために、何ができるか考えてました。 以下はサンプルコードです。 uuClass.MyDrag = uuClass.Generic(); uuClass.MyDrag .prototype = { construct: function() { // ウインドウを包括するオブジェクト this._frame = uu.id("WindowFrame"); // ウインドウのタイトル部分でmousedownされたらhandleEventを呼び出す。 uu.event.set(this, uu.id("WindowTitle"), "mousedown"); }, handleEvent: function(evt) { uu.event.stop(evt); // イベ
Emulating onhashchange without setInterval—zachleat.com
There is one limitation that all of the major JavaScript browser history management plugins have to hack around: How to tell when there is a change to the location.hash? Sure, you can tell when you’re modifying the hash yourself, but what if the user hits the back/forward button? YUI’s History component and Really Simple History both use setInterval with an internal variable to compare and find ch
event式autoKana.jsの紹介 - KAYAC Engineers' Blog
すでに若干乗り遅れてる感じもしますが、読み仮名の自動入力がはやっているようなので乗っかってみます。 サンプル （IE7,FF2,safari3.1で動作確認） お気づきの方もいるかもしれませんが、これまでの記事（１，２，３）はこのライブラリを作る過程で発見したことのまとめです。 で、このライブラリも結局は読み仮名の自動入力なんですが、今までのautoKana.jsと違ってsetInterval（or setTimeout）を使用していません。 ではどのようにして読みを取得しているかというと、IE,safariではkeyup、FFではtextイベントを使用してキー入力を取得し、その時点のひらがなから読みを認識しています。 この方法だとtimerをまわす必要がないのでブラウザの負担も軽く、高速でキーを入力されても取りこぼしもなく、イベント駆動なのでコードが短くなる等の利点があります。 ただ、o
FFのtext eventに関して - KAYAC Engineers' Blog
前回firebugのLog Event機能に関して紹介したんですが、そのとき見つけたちょっと面白いイベントに関して紹介したいと思います。 そのイベントは「text」 私もLog Eventで見るまで知らなかったんですが、これはIMEがONの時にkeypressの代わりに呼ばれるようです。 IE,safariはIMEがONでもkeyup(or keydown)が呼ばれるのですが、FFはIMEがONの間はkeyup(or keydown)が呼ばれないのでこのイベントは結構重要かもしれません。 ちなみにjQueryでは以下のようにして捕捉可能です。 $(':text').bind('text', function () {console.log(this.value)});
FirebugのLog Eventsに関して - KAYAC Engineers' Blog
こないだfirebugをいじってたら面白いものを見つけました。 ちょっと試してみたところ対象の要素に起こっているイベントを全てコンソールタブへ表示させることが出来るようです。 基本的には良くあるイベントが表示されるだけなんですが、IMEをONにした状態でテキスト入力するとちょっと面白いイベントが表示されます。 あまり知られていないイベントなので、これに関しては別に紹介してみたいと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Brandon Aaron