jQuery 関連記事まとめ - Cyokodog::Diary jQuery 関連記事まとめ、ということでjQueryに関する役立つサイトが多数紹介されています。 jQuery をこれからやろうという方は参考にできそうです。 関連エントリ コンテンツのスクロールをクールに行える「jquery.scrollable.js」 時刻の入力に便利なJS入力補助ライブラリ「jquery.timepickr.js」
jQuery 関連記事まとめ:phpspot開発日誌
jQuery 関連記事まとめ - Cyokodog::Diary jQuery 関連記事まとめ、ということでjQueryに関する役立つサイトが多数紹介されています。 jQuery をこれからやろうという方は参考にできそうです。 関連エントリ コンテンツのスクロールをクールに行える「jquery.scrollable.js」 時刻の入力に便利なJS入力補助ライブラリ「jquery.timepickr.js」
画面全体でクリックイベントを監視する - F.Ko-Jiの「一秒後は未来」
JavaScriptアプリケーションを作るときに最近よく使うテクニックが、「個々のHTML要素ごとにクリックイベントを監視せずに、html要素(もしくはbody要素)のみでクリックイベントを監視する」という方法です。これは「まるごとPerl!」の「livedoor Readerのしくみ」で紹介されていたものです。 Amazon.co.jp： まるごとPerl! Vol.1: 本: 小飼 弾,宮川 達彦,伊藤 直也,川合 孝典,水野 貴明 例えば「飲食店検索 – この辺で」では次のようにクリックイベントを監視しています。 window.onload = function() { document.getElementsByTagName("html")[0].onclick = HOTPEPPER.clickObserver; HOTPEPPER.onload(); } HOTPEPPER.
完全に状況を掌握した画像の遅延読み込みの実現 - latest log
IE8の挙動について追記しました。 IE8は、img.complete は 画像読み込みでも true になりません(falseのままです)。 そのかわり、img.readyState が "complete" になります。 JavaScriptでの画像の動的/遅延読み込みといえば (new Image).src = URL; なんですが、 タイムアウトやエラーの状況を把握したい時もあったりします。GoogleMapライクなアプリを作ってるときとか。 今回ちょっと必要になったのでまずは調査から。 以下のコードで、存在しないファイル(missing.jpg)を読み込ませ、実行経路を確認してみます。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://w
Prototypeベースのグラフ描画用JSライブラリ「ProtoChart」:phpspot開発日誌
ProtoChart: Prototype Canvas = Pretty Charts :: Deensoft We finally have a bit stable version of our new charting library. Prototypeベースのグラフ描画用JSライブラリ「ProtoChart」 線グラフ 棒グラフ 円グラフ 曲線グラフ などが作成可能です。 関連エントリ JavaScriptで小さくて可愛いグラフを作れる「jQuery Sparklines」 フリーのグラフスクリプト１０個
入力補完のためのJavaScriptライブラリを投稿・共有できる『Suggiere』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
入力補完のためのJavaScriptライブラリを投稿・共有できる『Suggiere』 July 6th, 2008 Posted in その他 Write comment Google Suggestをはじめ、フォームで入力するときにさまざまな候補を出してくれるインターフェースがある。1、2文字入力すると候補がずらりと表示される例のあれだ。 これはJavaScriptで実現することができるが、そうしたJavaScriptライブラリを投稿・共有できるのがSuggiereだ。 アメリカの州、イギリスの都市、ルノーの車などなど、よく使われそうなリストをここで検索したり、投稿したりすることができる。使うほうはさくっと1つのファイルをダウンロードし、自分のサイトに設置するだけでOKだ。 投稿する際はリスト作成用のツールも提供されているので簡単だ。JavaScriptの文法を理解する必要などまるでない
Gmail Client Side Architecture Part 1 - DZone
Gmail is the best web application I have ever seen. Simple implementation, Ajax, Chat, Status Messages, Fast Mail retrieval, live updating and its features are endless. When you type: www.gmail.com, the following actions will happen. Script1 loads the first JavaScript file https://mail.google.com/mail?view=page&name=browser&ver=1k96igf4806cyThe first script's job is to check the browser type, os e
フリーのグラフスクリプト１０個:phpspot開発日誌
10 Free Chart Scripts | WebTecker the latest Web Tech, Resources and News. This week I’ve been working on a project that required data to be shown visually. フリーのグラフスクリプト１０個が特集されてました。 JavaScriptやFlash製のグラフを使う際の選択肢として使えます。 Flot Open Flash Chart AmCharts Emprise JavaScript Charts PlotKit Flotr PHP/SWF Charts Visifire FusionCharts JFreeChart グラフを作る際にはこうしたツールを使えば一瞬ですね。 その他、グラフ関連エントリは以下 ピュアCSSでクールなグラフサン
長文を横スクロールで表示し読みやすくするＪＳ「bookreader.js」:phpspot開発日誌
bookreader.js bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。長文を横スクロールで表示し読みやすくするＪＳ「bookreader.js」。 次のページへボタンを押すと、アニメーションしながら横にずれていきます。 本を読むスタイルに似ているためか、bookreader.jsという名前ですね。 文章の見せ方として面白いので覚えておいたらいつか使えそうです。
PHP＋ImageMagick＋JavaScriptで画像を切り抜くサンプル:phpspot開発日誌
Crop & Resize with JavaScript, PHP, and ImageMagick - Monday By Noon PHP＋ImageMagick＋JavaScriptで画像を切り抜くサンプル。 次のように、JavaScriptで領域指定→キリトリ→拡大が可能なサンプル →デモを見る １回アップロードしてしまった画像を再度加工して再利用したい場合に便利そうですね。 ダウンロードはこちら 関連エントリ 画像をサーバ側で好きなサイズにリサイズできるPHPスクリプト
JavaScriptの関数オブジェクトを完璧に理解する:phpspot開発日誌
JavaScriptの関数オブジェクトを完璧に理解する - builder by ZDNet Japan JavaScript関数の実体は、Functionクラスのオブジェクトです。今回はFunctionクラスの機能を網羅的に解説します。 JavaScriptの関数オブジェクトを完璧に理解する、という builder by ZDNet JP の記事。 Function の機能が網羅されていて、JavaScriptをプログラムに使うという人でも知らないような内容が載っていて勉強になります。 Functionクラスのcall/applyについてと使い方 関数のlengthプロパティで引数の数確認 関数のいろいろな定義の方法 引数としてつかえるargumentsオブジェクト JavaScriptはなかなか奥が深いですね。 関連ページ JavaScriptist - JavaScript入門 Ja
要素のドラッグ＆リサイズを可能にするJS「DragResize」:phpspot開発日誌
DragResize - TwinHelix This is an easy means of adding drag and resize capability to elements on your webpage.要素のドラッグ＆リサイズを可能にするJS「DragResize」。 次のように、ボックスをクリックするとつまみが現れて、リサイズでき、かつドラッグ＆ドロップも可能なエレメントが作成できます。 依存ライブラリが無く、ライブラリ自体が3KBという軽さなので、ちょっとウィンドウだけ実装したいんだけど、という場合に非常に使えそうです。 関連エントリ ブロック要素のリサイズやドラッグを可能にするjQueryプラグイン「jqDnR」 ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」
CanvasデータをPNG/JPEG等の１枚画像に変換するJS「Canvas2Image」:phpspot開発日誌
Saving canvas data to image file This is a small library that lets you easily save a WHATWG canvas element as an imagefile. CanvasデータをPNG/JPEG等の１枚画像に変換するJS「Canvas2Image」。 Flashを使わずに、ブラウザ上でお絵かきして、画像に変換できます。 次のように、Canvasに対して１行で変換できます。。 var oCanvas = document.getElementById("thecanvas"); Canvas2Image.saveAsPNG(oCanvas); Canvasの使えないブラウザでは当然、使うことは出来ませんが、描画したものをそのまま画像にする、というのは使いどころがありそうです。
jQueryを使ってパズルを作るjQueryプラグイン:phpspot開発日誌
jQuery Demo: Creating A Sliding Image Puzzle Plug-In : Kinky Solutions : A Student's Perspective by Ben Nadel jQueryを使ってパズルを作るjQueryプラグインが公開されています。 １枚の元画像をJavaScript＆ＣＳＳによって分解して、パズルを作成することが出来ます。 パズルのデモページ 以下が元の画像。本当に１枚です。 画像を分割して、HTMLを書いて、という面倒な作業は必要なくて、以下のように初期化が出来るようです。 $( "div.puzzle, p" ).puzzle( 100 ); 商品のＰＲ等、サイトのキャンペーンなんかでも活用できそうですね。
CSS・JSを活用して高度なUIを作成するサンプル集「The Highly Extensible CSS Interface」:phpspot開発日誌
The Highly Extensible CSS Interface CSS・JSを活用して高度なUIを作成するサンプル集「The Highly Extensible CSS Interface」。 デモサイトのようなリッチなUIを実現するためのサンプル集 Part I: The Foundation Part II: CSS Selectors & jQuery Part III: Adding Ajax Interactivity Part IV: Testing for Extensibility jQuery、Ajaxなどを活用してページを作成していく部分はページ作りにおいて非常に参考に出来る部分が多いです。 IE7, FireFox2, Safari2.x 以降が推奨環境となっているようです。
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
カーソル位置によって自動スクロールする小窓実装ライブラリ:phpspot開発日誌
woork: Using CSS and Mootools to simulate Flash horizontal navigation effect カーソル位置によって自動スクロールする小窓実装ライブラリ。 枠の右端に移動すると、右にズイズイとスクロール、左に移動すると左へスクロールするような小窓を実装するためのライブラリが公開されています。 クリックでデモを表示 次のように、見えている部分と、隠している部分をCSSによって出し分けています。 JavaScriptによってスクロール処理を実装。 横スクロールしていくようなＵＩの実装に使えそうです。 また、サンプルのような大きいブロックではなく、小さい領域で、いくつかの情報を格納するのにも便利そうですね。 mootools+CSSで実装されているようです。
iTunesのカバーフロー風ＵＩをJavaScriptで実現「ProtoFlow」:phpspot開発日誌
ProtoFlow first preview release… :: Deensoft I got busy with few other client work and didn’t really get any chance to polish up the ProtoFlow widget. iTunesのカバーフロー風ＵＩをJavaScriptで実現「ProtoFlow」。 まずはデモページを見てみましょう HTMLは次のようにシンプル <div id="protoflow"> <img src="imgs/DSCN0940_91360.jpg"/> <img src="imgs/stimme_von_oben_187192.jpg"/> <img src="imgs/Tropfen_1_Kopie_201721.jpg"/> <img src="imgs/farbraum_01
JavaScript Tips & Technique
操作方法 → キー: 次のページへ ← キー: 前のページへ ↑ キー: 目次ページへ ↓ キー: 目次ページから戻る 目次ページでは ← → キーで一覧を移動し、クリックで選択します 10 年。 世界が JavaScript の真の実力を発見するのに要した時間である。 1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、 ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。 JavaScript は、Web の「あちら側」と「こちら側」とを取り結ぶ、もっとも古くてもっとも新しい、そして、もっとも重要な技術だ。次の 10 年を自らの手で創り出す
WindowsVista風のLightBox作成JSライブラリ「GlassBox」:phpspot開発日誌
GlassBox WindowsVista風のLightBox作成JSライブラリ「GlassBox」。 若干表示が重いのですが、なかなかカッコいいUIを実現できます。 使い方は、以下のとおり 1. スクリプトを読み込み <script src="glassbox/glassbox.js" type="text/javascript"></script> 2. divでボックスを作成 <div id="myGlassboxContent"> <!-- Content --> </div> Content 部分にGlassBoxの中身を記述 3. スクリプトの初期化 <script type="text/javascript"> var myGlassBox = new GlassBox(); myGlassBox.init( 'myGlassboxContent', '400px', '30
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sniper