ドットインストール代表のライフハックブログ
JavaScriptのデバッグ環境としては、FirefoxであればFirebugで問題ないだろう。だが、他のブラウザの場合はどうだろう。各ブラウザごとにデバッグ環境を作るのは非常に労力がかかるだろう。 そこで試してみたいのがこのソフトウェアだ。これであればどのブラウザでも利用できる可能性がある。 今回紹介するオープンソース・ソフトウェアはJackal、JavaScriptデバッグプロキシだ。 JackalはWindows向けのソフトウェアで、MirageというHTTPプロキシソフトウェアを使っている。インストールし、プロキシのアドレスをlocalhost:9889に設定すれば準備完了だ。 その状態でWebサイトを見ると、左上にJackalのアイコンが表示される。これをクリックするとデバッグウィンドウが表示される。JavaScriptの実行はもちろん、エレメントの構造を閲覧することもできる。
Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが2倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが2倍になってしまうバグ IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
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へのアップグレード実例紹
id:kz_shikabaneによるJavaScript勉強会が実施されました。 DOMの話は以前id:seiryoが行ったので、今回はイベントリスナーについて。 prototype.jsやJQueryを使っていてあまり意識したことがなかったので参考になりました。 以下まとめ。 イベントリスナーとは 普通GUIアプリケーションを作るときにはイベントドリブン(イベント駆動型)プログラミングを行います。これはJavaScriptで書くときにも当てはまります。 HTMLファイルが読み込まれた、ボタンがクリックされた、キーボードが押された、といった行動をブラウザで行ったときにイベントは発生します。このイベントを受け取るのがイベントリスナーです。 イベントリスナーはイベントを受け取るまでは何もしません。受け取ったイベントの情報を元にイベントリスナーが、HTMLタグの属性を変更する、非同期にデータを読
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
LightBoxの登場にインパクトがあったからか画像の表示方法がワンパターン化している気がします。 今回紹介するjqShuffleでは、画像を1枚1枚めくるようなギャラリーを作成することができます。 Flashではありそうですが、Javascriptでは一風味変わった表示方法です。 sponsors 使用方法 jqShuffleからjqshuffle.jsを、JavascriptライブラリのjQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jqshuffle" type="text/javascript"></script> <script type="text/javas
tablesorter.com 2024 著作権. 不許複製 プライバシーポリシー
Examples Usage Options Download Examples Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Example uses following code: $('ul#list_example li').quicksearch({ position: 'before', attached: 'ul#list_example', loaderImg: 'loader.gif', focusOnLoad: true }) Option
Li'l Engineのエントリー「ユーザビリティフォームのためのチェックリスト」の意訳で、ユーザビリティの高いフォームを制作するための12のポイントの紹介です。 Checklist for Usability Forms 不明な箇所は英文のまま記載してましたが、皆様の協力により3,5を和文にしました。 フォームは正しく入力できるように、可能な限り簡潔に。 フォームには、必要なインフォーメーションを含める。 タイトル:なんのためのフォームか フォームのヘルプ キャンセル(中止)の選択肢 入力すべき項目は、多くしない。 重複する入力項目は設置しない。 フォームの公開後しばらくしたら、収集したデータが実際に使用されているかチェックする。利用されていないものがあれば、収集しないようにする。 長いフォームは紛らわしいので、分ける。 タスクごとに分ける それぞれのページごとにチェックをし修正すること
crestock.comのエントリー「2007年、最も人気が高い50のウェブデザインのブログポスト、リソース&チートシート」と、TenThousandThingsのエントリー「Web Design: From Good to Great in 25 Links」から、ウェブデザイン関連で2007年に人気が高かったサイトの紹介です。 The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007 Web Design: From Good to Great in 25 Links ウェブデザインの基本原則 9 Essential Design Principles ウェブデザインの9つの原則 The Importance of White space ホワイトスペースの使い方 8 Design Tacti
Example three: simple row highlighting using the default settings simple column highlighting using css class "hover" higlight the current cell using css class "hovercell" fix the current highlight on click using css class "click" $('#tablethree').tableHover({colClass: 'hover', cellClass: 'hovercell', clickClass: 'click'}); ABCD A+A-B+B-C+C-D+D-
Zoomi is a lightweight javascript file that adds zoom ability to images. Read More
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く