Contextual SCRIPT tags – James Padolsey
Here’s a nifty little trick that allows you to write “contextual” JavaScript. It’s incredibly obtrusive and probably shouldn’t be used at all but it’s still a pretty cool idea: <div id="some-div"> <script type=":contextual"> alert(this.id); // "some-div" is alerted </script> </div> Instead of the this keyword referencing the global object (window) we can make it reference the parentNode of the scr
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'
スクロールバーの幅を取得するコード - ?D of K
JavaScriptでスクロールバーの幅を取得したいと思ったのでさくっと書いてみた。 スクロールバーが表示されるiframeを生成して、offset〜を取得することで、iframeサイズとの差がスクロールバーの幅となることを利用して計算します。 IE7ではDOMの構築が終わっておらず正常に計算できませんが、僕はFxとChromeでしか使わないので、問題なしです。 function scrollBarSize() { var W = 1000, H = 1000; var iframe = document.createElement("iframe"); iframe.frameBorder = 0; iframe.width = W; iframe.height = H; with (iframe.style) { position = "absolute"; top = "0px";
クリックイベントの中で非同期処理したあとに別ウィンドウで開くときにポップアップブロックにひっかからない方法 - Webtech Walker
「twitterに投稿」みたいなボタンをクリックしたときにblt.lyとかのAPIで短縮URLを作って、window.openで別ウィンドウでtwitterを開きたい場合に、bit.lyのAPIを呼ぶJSONPが非同期処理になるので、ほとんどのブラウザでポップアップブロックに引っかかってしまいます。 以前、これ困ったねーって@sugyanと話してたんですけど、@taku_eofにその話しして、色々方法考えてたらよさげなのがでたんでやってみました。 まず、これはポップアップブロックされます。 $('#hoge').click(function() { $.ajax({ type: "GET", dataType: 'jsonp', url: "http://api.bit.ly/shorten", data: {...}, success: function(data) { ... wind
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
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
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
要素が document につながっているかを高速に調べる方法 - IT戦記
とある要素が document につながっているかどうかを調べたい！ とりあえず、ほとんどすべてのブラウザで出来る方法としては、 parentNode で確認することができますね。 function isElementInDocument(node) { do { if (node === document) { return true; } } while (node = node.parentNode) return false; } でも 前の例だとちょっと遅いので contains や、 compareDocumentPosition を使うといいです！ コードにすると以下のような感じ function isElementInDocument(node) { if (document === node) { return true } else if (document.compa
第8回 実践DOMスクリプティング#1：HTMLとテキストの操作 | gihyo.jp
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
Web Workers用と通常のJavaScript用のコードを共存させる - latest log
Web Workers の調べ物してました。 Web Workers は、Google Chrome 4+, Firefox3.5+ , Safari4+ で既に利用可能です。 Google Chrome5 では、Web Workers 内で Web Socket を動かすこともできます。 js の基本であり鬼門といえば this オブジェクト 各ポイントで this.toString() や self.toString() を行い、this や self が何を指しているのか調べました。 <script> var globalScope = this.toString() </script> // WebWorkers.js var workersGlobalScope = this.toString(); var self1 = self.toString(); onmessage =
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
結構前から収集していた海外エントリから面白い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/
AutoPagerize :: 5509
*WordPressプラグインもあります Greasemonkeyで有名なAutoPagerize、最近ははてなブックマークでも取り入れられて 機能としてサイト側でやるものかどうかっていう話も聞いたりしました。 AutoPagerizeは一度使ったらもう手放せないくらい便利ですけど これを自分でやってみました。 使い方は簡単、 5509内 ホーム・カテゴリ・タグ・検索のいずれかのページで、ページナビゲーションがある場合 ページナビゲーションにカーソルが近付くと自動で次のページを読み込んで下に追加表示します。 ひとつだけ出来なかったところがあって AutoPagerizeで読み込んだ部分はが適用できてないです。。解決、追記しました ソース（ログ） // AutoPagerize if($("div.wp-pagenavi","#main").length>0){ // WP-PageNavi
peter.michaux.ca - Lazy Function Definition Pattern
Lazy Function Definition Pattern Published August 11, 2007 in JavaScript This article examines a functional-programming design pattern I've been calling Lazy Function Definition. I've repeatedly found this pattern useful in JavaScript especially when writing cross-browser libraries that are efficient at runtime. Warm-Up Problem Write a function foo that returns a Date object that holds the time th
ライブラリの一部でありながら単体利用も可能にする工夫 - latest log
140文字を超えちゃうので、こちらで。 JavaScriptなコードを書いてると「このへんの処理はどこにも依存してないから、特定のライブラリの一部ではなく、単体でロードしても使えるような部品としてまとめられたらなぁ」とか「でも、ライブラリの一部として利用する場合にグローバルネームスペースを汚染するのはダメだよなぁ」と、考えたことはありませんか? window.uu 以下をライブラリのネームスペースとして利用している uupaa.js では、このような工夫をしています。 // === uu.base64 / window.base64 === (function(namespace) { namespace.base64 = { encode: base64encode, // base64.encode(data:String/ByteArray, // toURLSafe64:Boole
安全な HTMLDocument の生成方法について - nothing but trouble
何が危ないのか img.onerror や img.onload は src 属性の内容が評価された段階で実行されるので、外部ソースに対して HTMLDocument を構築する際などで、意図していないタイミングでスクリプトが実行されるケースがある。 具体的には、以下のような場合。 var source = '<img src="not_found.jpg" onerror="alert(1)">'; var range = document.createRange(); range.createContextualFragment(source); // onerror が実行される var img = document.createElement('img'); img.setAttribute('onerror', 'alert(1)'); img.src = 'not_found.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PC_LOAD_LETTER
http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs