getBoundingClientRect()を使って要素の絶対座標を求める - 素人がプログラミングを勉強していたブログ
追記：どうやらnowa サービス終了のお知らせで既出だった模様。 ページが見つかりません | Mozilla Developer Networkを使って簡単に、絶対座標を得ることができる。 offsetParent辿っていってoffsetWidth足したりしなくていいので手軽。 function getElementPosition(elem){ var position=elem.getBoundingClientRect(); return { left:Math.round(window.scrollX+position.left), top:Math.round(window.scrollY+position.top) } } getElementPosition(document.links[5]) getBoundingClientRect()で返ってくるプロパティは、小数にな
DocumentFragmentとdisplay:none、documentに直接追加する場合の速度比較 - 素人がプログラミングを勉強していたブログ
追記：コメント欄で指摘されたように、下のコードではイベントリスナは削除されなかった。 DocumentFragmentに一旦ストックすると、登録したイベントリスナは削除される。cloneNode、innerHTMLなども同様。 つまり、下のようなコードを書いて、ドキュメントをクリックしても、"click!"とは表示さない。 document.body.addEventListener("click", function(){ (console.log||alert)("click!"); },false); var df=document.createDocumentFragment(); df.appendChild(document.body); document.documentElement.appendChild(df); 不特定のサイトで動作するGreasemonkeyスクリプ
Flash上にプルダウンメニューを重ねる: Good Sleep｜Webデザイナーの日々のスキマ
swf上にHTML要素をレイヤー表示する際の解決策 少し前に「JavaScriptでプルダウンメニュー（DropDownMenu.js）」という記事をこのブログで紹介してみたトコロ、結構なアクセスがあったので、気をよくしての第２弾です。 この前かかわった仕事で、JavaScriptのプルダウンメニューの下にFlashコンテンツを表示したいというページがあった。いろいろと試してみるとFirefoxなどでは、Flash上で画面が書き変わってしまうと、最上位面に表示されてしまい、その時にプルダウンメニューが表示されているとFlashの下に隠れてしまうコトが分かった。 何とかならないかと思っていたのだが、解決作が見つからず、そのページはFlashを使わない事にしてもらった。…しかし、開発の人間としては何か解決策がないだろうかと、その仕事が終わった後もいろいろ本を眺めていた。 するとやっぱりあるんで
)
JavaScript addEventListener() - とみぞーノート
仕様書を読んでもわかりにくい、addEventListener()の第3引数useCaptureの意味についてのメモ。 addEventListener()はIEでは未実装なので関係なし。 以下はFireFoxで確認。 useCaptureの意味 通常登録したイベントハンドラ(*1)はイベント伝搬のバブリングフェーズで呼ばれる。このため、DOM Treeの下の方のエレメントからイベントハンドラが順番に呼ばれる。 useCaptureをtrueにしてイベントハンドラを登録すると、キャプチャフェーズでイベントハンドラが呼ばれるようになる。このため、その他のイベントハンドラに先だって呼び出されるようになる。 (*1) 以下のものが含まれる。 DOMエレメントのプロパティに設定したイベントハンドラ(element.onmousedown = handler) HTMLタグに埋め込んだイベントハンド
JavaScriptでクッキーを超簡単に使うライブラリ「Cookie Manager」:phpspot開発日誌
PHPから使えるprototype.jsとscript.aculo.usのラッパークラス「Projax」 次の記事 ≫：WEBマスター/WEB開発者、御用達のサイトリンク集 Cookie Manager | Javascript Code | All Things Webby Initialisation of a CookieManager object: JavaScriptでクッキーを超簡単に使うライブラリ「Cookie Manager」。 JavaScriptでクッキーを扱うのって、いちいちクッキーをパースして面倒だ、と思っていた人は多いのではないでしょうか？ CookieManager.jsを使えば、phpでcookieを使うときみたいに簡単にcookieが使えます。 prototype.jsをベースとしていて、サンプルのコードは次のような感じになります。 サンプルはクッキーを使
はじめてのiGoogleガジェット開発#1
どうも、「公開APIを利用したサンプルサイトを作っていくよ」管理人のZAPAです。 今日は、マッシュアップツールを作るための第一歩として、「iGoogleガジェット」の開発方法を解説します。 「Googleからのプレゼントが届いたよー！！！」に登場した、iGoogleガジェット。 「ガジェット大好き！」って人も、「これからの時代はガジェットだ！」って人も、「ガジェットって何だろう？」って人も、これからの時代は自分でガジェットを作れるとカッコイイと思うよ！！iGoogleガジェットに興味を持っても、開発情報を調べるのはなかなか大変です。 公式サイトに重要な情報はたくさん載っていますが、コンパクトにiGoogleガジェット開発方法を理解できるページがありませんでした。 公式ドキュメントをマジメに読むと30分以上かかり、やる気がそがれてしまいますので、ここに「iGoogleガジェット開発方法」を
[JS]背景やテキストの色を少しずつ変更するスクリプト -fader.js
leigeberのエントリーから、背景やテキストやボーダーの色を、指定色から指定色に少しずつ変更するスクリプトの紹介です。 JavaScript Color Fading Script デモページ デモには、下記の4つがあります。 ホバーすると、背景の色をフェード。 クリックすると、背景の色をフェード。 ホバーすると、テキストの色をフェード。 ホバーすると、ボーダーの色をフェード。 fader.jsの動作環境は、IE6/IE7, Firefox, Opera and Safariとなっており、jQueryやPrototypeなどの他のスクリプトに依存せずに動作する軽量(約2KB）のスクリプトです。 実装も簡単で、「fader.js」を外部スクリプトとして配置し、下記のように指定します。 <textarea name="code" class="html" cols="60" rows="5
jQuery
Lightweight Footprint Only 30kB minified and gzipped. Can also be included as an AMD module CSS3 Compliant Supports CSS3 selectors to find elements as well as in style property manipulation What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use
Handling Keyboard Shortcuts in JavaScript
Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have crea
document.lazy_writer
特定のscript中に含まれるdocument.writeを上書きして、遅延描画にすることができます。 document.writeを使う広告配信スクリプトや、ブログパーツなどの挙動を置き換えることが出来ます。 外部サーバーから読み込むスクリプトをページ最後部に記述することでページレンダリングを妨げなくなります。 このページはこんな感じになってます。 var adsense_url = 'http://pagead2.googlesyndication.com/pagead/show_ads.js'; document.lazy_writer(adsense_url, function(str){ var id = "adsense_" + this.script_count; document.getElementById(id).innerHTML = str; }, {delay :
戻るボタンとonloadイベント - Pixel Pedals of Tomakomai
ブラウザの戻るボタン(history.back)で戻った時にonloadイベントが走るかどうかは、ブラウザによって違うようです。 まず、IEですが、戻るボタンのときもonloadイベントが走ります。よって、なんにも心配要らないです。 次に、Firefoxではbfcacheと言う機能があり、以下の事情になってます。 ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません。 (中略) ユーザがそのページから去るナビゲートをするときに実行されるようにしたい動作があるものの、この新しいキャッシュ機能を生かしたく、さらにそれゆえに unload ハンドラを使用したくないという場合は、新しい pagehide イベントを使用します。 Using Firefox 1.5 caching と言うことで、Firefoxのことを考えるのなら、onpa
フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」:phpspot開発日誌
Autotab: jQuery auto-tabbing and filter plugin | Matthew Miller フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」。 電話番号入力欄や、郵便番号入力欄で、フィールドが複数に分かれている場合、桁数が決まっているのであれば、次のフィールドに自動で移ってくれた方が使い勝手はよくなります。 Tabで移動することは出来ますが、その処理を知らない場合はマウスで移動する人なんかもいそうですし、打つキー数も多くなります。 そこで、オンラインバンキングなどではよくある、規定の桁を入力した後は次のフィールドに自動で移ってくれるＪＳライブラリがjQueryベースで開発され、公開されています。 実装は簡単で、まず必要なＪＳを読み込みます。 <script type="text/javascript" src="jquery
[JS]注目させたい箇所にユーザーの視線を集めるスクリプト -Seek Attention
Seek Attentionは、画面をグレーアウトさせ、注目させたい箇所にハイライトやアニメーション効果を利用して、ユーザーの視線を集めるスクリプトです。 Seek Attention 注目させたい箇所がブラウザの表示領域外の時は、表示領域内に自動でスクロールされます。 オプションでは、グレーアウト箇所の指定（全体・一部）・色・不透明度・フェードのタイミングが調整可能で、ハイライト箇所のアニメーションの有無・領域のpaddingなども設定することができます。 Seek AttentionはjQueryのプラグインのため、動作にはjquery.jsが必要です。
Flip! A jQuery plugin
Flip is a jQuery plugin to apply flip animation to any element.0.4.1 Fixed some regression in Chrome and Safari 0.4 Fixed some bugs with transparent color. Now Flip! works on non-white backgrounds! 0.3 Added the content setting: now you can define the next content of your Flip!box. 0.2 Fixed jQuery chainability and buggy innerText rendering (Thanks xNephilimx for your tips!) 0.1 Kick off
特集：jquery.jsを読み解く｜gihyo.jp … 技術評論社
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
script.aculo.usを読み解く 記事一覧 | gihyo.jp
第6回effects.js（後編）基礎エフェクトの組み合わせからなる15種類の複合エフェクト 源馬照明 2008-04-11
XML を JSON に変換するサービス - ベータ版を公開 :: Drk7jp
JavaScript 2.0 支援ツール「XML 2 JSON service」って何？ XML を JSON に変換するサービスです。この技術を用いることで、 クロスドメイン制限を超えて JSON 形式で XML 形式のデータを利用することが可能となります。 JSON は XML と比較して JavaScript 上で非常に扱いやすいため、コツを掴めば簡単に自分のサイトで利用できます。 既に幾つかのサイトで実装されていますが、不特定多数の方にサービス提供するために負荷対策を施し、XML 2 JSON service ベータサービスを公開することにしました。 最近良く聞く Ajax とは何が違うの？ 最近、流行りまくっている Web 2.0 と呼ばれるものの基礎技術の１つとして Ajax があげられます。Ajax は大変便利な技術なのですが、セキュリティの観点から自ドメインへのアクセスしか
WSHでDOM (Shibuya.js in Kyoto) - てっく煮ブログ
Shibuya.js in Kyoto にて「WSHでDOM」というタイトルで発表しました。開発に一週間、プレゼン作りに一週間かけた渾身のネタです。プレゼン作りにあたっては、２ページ目のイメージ写真を撮るために祇園祭に出かけたのが楽しかったです。資料に使ったフォントは「アニトＭ-教漢（無料版）」です。素敵なフォントが比較的自由なライセンスで公開されていて大変ありがたいですね。無料版なので、一部漢字が使えずに文章の変更を余儀なくされましたが、おかげで小学生にも読める分かりやすい資料になりました。ソースコード：http://coderepos.org/share/browser/lang/cplusplus/dom4winui/trunk/srcプレゼン 全画面で見る：http://tech.nitoyon.com/misc/shibuya-js-kyoto/Slide.swfソース：http
wedata
もとは、androidのN2TTSやVocalizerという読み上げアプリ用に作ったユーザー辞書(読み替え単語集)です。 最近のTTSエンジンは十分に賢いので、このユーザー辞書を使うと、かえって読み上げ精度や抑揚が悪くなるかも。 （例：「青瓦台」は、googleテキスト読み上げでは「セイガダイ」と正しく読めるが、マイクロソフトのHarukaでは「アオガワラダイ」と読んでしまうなど、TTSエンジンによって得意・不得意がある） ベクターのフリー辞書などを転用して、時代小説などに頻出する地名や人名などを登録してみました。 TabSpeechというChromeプラグインでユーザー辞書（読み替え）のデータベースを指定できるので、このデータベースも利用できると思います。 ★ユーザー辞書を充実させるため、単語追加歓迎します。 ただ、隆盛（人名でのタカモリ、普通名詞のリュウセイ）とか意味によって読み方が変
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
xml2json.cgi - ドメインを超えてXMLを読みこむ [tech.nitoyon.com]![xml2json.cgi - ドメインを超えてXMLを読みこむ [tech.nitoyon.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95abde13f7ed41248843e654a2f2ddcde8983db4/height=288;version=1;width=512/http%3A%2F%2Ftech.nitoyon.com%2Fapple-touch-icon-114x114.png){kind=icon}
