昨日紹介した「わずか「12文字」でIEを判別するスクリプト」に続いて、Firefox 2/3, Safariを判別する1行のスクリプトをThe Spannerから紹介します。
昨日紹介した「わずか「12文字」でIEを判別するスクリプト」に続いて、Firefox 2/3, Safariを判別する1行のスクリプトをThe Spannerから紹介します。
Date 2009-01-15 19:06 Category blog / Web 関連 Tags blog / CSS / JavaScript / push!! / tips / Web 関連 / Webデザイン / Web制作 / 考え方 Navigation Link Newer Older 使用中の Firefox アドオンまとめ Comments / Trackbacks Comment Form Name URL Add Your Comment Trackback URL http://eclucifer.net/blog/web/2009011501.html/trackback/
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
複数のjsライブラリを利用する際にonloadを書き換える方法 複数のJavaScriptライブラリを利用していて、正常に動作しないや、どちらか一方しか動作しないなどの状況に陥ることがあります。 原因は様々なのですが、一番多いのがJavaScriptライブラリのonload記法に依存する問題です。 onload記法とはJavaScriptを実行するタイミングをonloadイベント(ブラウザがすべてを読み込んでから実行)に設定する際の書き方です。 DreamWeaverを利用している方は、以下のようなソースをよく見るかもしれません。 <body onload="MM_preloadImages('hogehoge')"> これはonloadイベントにMM_preloadImagesという関数を設定しているという意味です。 他にもソースコード中の window.onload = functio
jQueryでnの倍数だけに何か処理する(追記有) >>081007:追記1 :nth-child について追記しました。 >>081007:追記2 :lt について追記しました。 今までのバックナンバーリストを一覧でダダダーと並べてるページがあって、(このサイトで言うと全エントリのアーカイブページみたいなページ)リストの件数が少なかった時は特に何も感じなかったんだけど、サイト公開から時間が経って「数が増えてなんか見難くない?」みたいな話になった。 で、5件分ごとに区切り線入れたいっていう提案をされて了解したけど、なんかどんな方法が効率いいんか迷った。手作業で5件目ごとにclass振っていく様な手数増える方法でもいいんだけど、今新しいのが上、古いのが下ってなってる状態で上から順番に5件目毎にclass付けした所で更新の度に1つずつズラしていくの?手数増えるにも程があるwwwみたいな発想にな
随時更新 公式ドキュメント Firebug Console API http://getfirebug.com/commandline.html 気になったところ $$(selector) 複雑なCSSセレクタでなければjQueryの$関数の変わりとして使える感じ。 dirxml(node) outerHTML相当のHTMLを出してくれる感じ $$(selector)と組み合わせると便利そう。 inspect(object[, tabName]) 指定したオブジェクトを指定したタブで表示できる。特定要素をHTMLタブで表示させる時、「inspect($$('table#some-id td')[0],'html');」みたいにできる。今まで、「console.log($$('table#tab td')[0]);」を実行してconsoleタブに表示させた後、そこをクリックみたいにやっていた
Smartyでページを構築してたら、どうしてもjavascriptの部分でエラーになってしまう。しかもSmartyのエラー。悩んで調べてみたら、どうやらSmarty内でjavascriptを使うには、 {literal} <script type="text/javascript"> //<![CDATA[ function hoge(){ ごにょごにょ } //]]> </script> {/literal} のように、{literal}〜{/literal}で囲まなければならないらしい。 Smartyは単に文字列置換しているのかと思っていたら、JavaScriptはパースでエラーになるのね。 BooLog 1.0|SmartyとJavaScript でも、 <script type="text/javascript"> //<![CDATA[ var hoge = "ほげ"; //]]
JavaScript 追記Firefox 3.0で確認したところエラーになった。 Firefox 2.0.0.13で確認しました。 var url = 'http://localhost:8080/index.html'; var referrer = 'http://www.hatena.ne.jp/'; var req = new XMLHttpRequest(); req.open('GET', url, true); req.onreadystatechange = function(){ // 1: 読み込み中 if(req.readyState == 1) req.setRequestHeader('Referer', referrer); // 4: 準備完了 if(req.readyState != 4) return; console.log(req.responseTe
多少のプログラミング経験があれば、Firefoxアドオンを作るのはそんなに難しくない。自作アドオンを作るためのハウツーを紹介する。 ここで自家製Firefoxアドオンをリリースし始めて以来、何人ものユーザーから「Firefoxアドオンを作るのは難しいの?」という問い合わせを受けた。多少プログラミングの経験がある人なら、その答えは「そんなに難しくない」だ。 Firefoxアドオンの中身はJavascript――ブックマークレットや従来のWebページで使われている、あまりミステリアスではない言語――とXUL(「ズール」と発音する)というマークアップ言語だ。独自のアドオンを作るには、ある程度のJavascriptのノウハウとXMLファイルの快適な編集、それからお気に入りのブラウザを思いのままにすることへの健全な好奇心が必要だ。 わたしがWeb上のフリーチュートリアルを使ってFirefoxアドオン
サイト更新情報 2006/12/06 よく使われているページを検索窓から簡単に辿れるようにしました。(検索窓に「prototype」と入力) 2006/11/27 JavaScript入門/応用サイトJavaScriptistオープン! 2006/11/23 試して確認できるJavaScriptオンラインエディタを公開 2006/11/20 JavaScriptリファレンス、逆引きサンプル集を公開 2006/11/19 JavaScriptライブラリ活用ページ公開 2006/11/15 JavaScriptistベース機能の構築完了 過去のサイト更新情報
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら (zip ファイル / 10KB) デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 Webに言語は数あれど、特に玉石混淆の激しいJavascriptの書き方について纏めてみた。間違い指摘大歓迎! 発端はYahoo!の Eric Miraglia による、YUI 式モジュールの作り方をまとめた記事。ざっくりまとめると、以下の手順になる。 YAHOO.myProject.myModule = function () { //"private" variables: var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule."; //"private" m
Ajax/JavaScriptライブラリをまとめておきます。(順不同) | 基本 | 統合 | 表示系 | GUI部品 | イメージ | PGM連携 | ブラウザ | Flash | その他 | | 部品集 | リンク | 編集履歴 | ・基本ライブラリ ・・・Ajax開発のベースになるもの ↑TOP prototype.js 超メジャーなAjaxライブラリ prototype.js の開発者向けメモ prototype.jsリファレンス prototype.jsリファレンス(JavaScriptist) prototype.js逆引きサンプル集 Prototype 1.5.0 Cheat Sheet Prototype 1.5 PDF - API/サンプル/解説 Prototype.js Documentation - まとめサイト Prototype 1.6.0へのアップグレード実例紹
Nifty Corners: rounded corners without images By Alessandro Fulciniti Update This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube. Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く