Dynamic Drive DHTML(dynamic html) & JavaScript code library
This innovative script uses CSS flexbox to create cards that when clicked on expands to show copious amount of information in a compact, manageable manner. Think of it as an expandable cards based layout. Ken Burns is a type of panning and zooming effect commonly used in video production to bring still images to life. This image slideshow adds an awesome Ken Burns effect to each image during trans
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
JavaScriptやFirefox拡張開発等に使われるXULの開発環境「Spket IDE」:phpspot開発日誌
Spket IDE Spket IDE is powerful toolkit for JavaScript and XML development. JavaScriptやFirefox拡張等に使われるXULの開発環境「Spket IDE」。 Aptana に続き、Eclipseベースの JavaScript エディタが公開されました。 JavaScript、XUL以外にも、Laszlo、SVG、Yahoo! Widget のコード補完に対応しているようです。 JavaScript開発環境としては、Aptana もすごいですが、Firefox拡張の開発に使われるXULのコード補完は嬉しいですね。 関連エントリ JavaScript開発用IDE:Aptana
lockエラー | 月額200円からのレンタルサーバー JSN
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref
C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」:phpspot開発日誌
C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」 2007年03月26日- google-code-prettify - Google Code A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page. C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」。 具体的な対応言語は、Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, Ruby, PHP, Awk, Perl のよ
入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル:phpspot開発日誌
Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル＋画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変え
Wii用のサイトを作る際に超便利なJavaScriptライブラリ「wii.js」:phpspot開発日誌
Creating web sites for the Wii Opera browser Though it may be old news that Wiimote keycodes can be detected by JavaScript in the Wii Opera browser, I could not find a JavaScript library that facilitates handling these input events, so I created my own. Wii用のサイトを作る際に超便利なJavaScriptライブラリ「wii.js」 wii.jsをインクルードすると次のようなAPIを使うことが出来ます。 wii.isWiiOperaBrowser() - WIIで見ているかどうかを true/ false で返す wii.setupHand
Webデザイナー/開発者が覚えておくとよい２５のテクニック:phpspot開発日誌
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
フォームの入力値チェックをしてくれるJavascriptのライブラリ『Validate.js』 | S i M P L E * S i M P L E
これは便利そう。 『validate.js』ではフォームのさまざまな入力をチェックしてくれます。URLやメールアドレスなどのよくあるチェックに加え、ISBNかどうかといったマニアックなチェックもできます。 マニュアルに載っている命令をご参考までに。 hasValidChars isSimpleIP isAlphaLatin isNotEmpty isIntegerInRange isNum isEMailAddr isZipCode isDate isMD5 isURL isGuid isISBN isSSN isDecimal isplatform addRules Apply サイトでは動作チェックのデモもあります。コードも見れますよ。 ↑ こんな感じでさまざまなチェックができます。 詳細＆ダウンロードはこちらからどうぞ。 » Mutationevent :: Validate.js
JavaScript: クロスブラウザでブロック要素内のクリック座標を得る方法:phpspot開発日誌
JavaScript: クロスブラウザでブロック要素内のクリック座標を得る方法 ちょっとやることがあって調べてみたら案外情報が見つからず、実現するのに時間がかかったのでメモしておきます。 <script type="text/javascript"> <!-- function clickhandler(event) { if (!event) { event = window.event; } var hx, hy; if (document.all) { // for IE hx = event.offsetX; hy = event.offsetY; } else { hx = event.layerX; hy = event.layerY; } alert("x:"+hx+",y:"+hy); // return [hx,hy]; } //--> </script> <div on
クールなJavaScript入力補完ライブラリ「Ajax Auto Suggest v.2」:phpspot開発日誌
Ajax Auto Suggest v.2 : CSS . XHTML . Javascript . DOM : Brand Spanking New The new and improved version of my JavaScript/Ajax auto suggest script. More features, less bugs. Demo and documentation here.クールなJavaScript入力補完ライブラリ「Ajax Auto Suggest v.2」。 入力ボックス上でaを入力したところ。 JSON形式や補完時のコールバック関数、フェードエフェクト、ＣＳＳデザインなど基本的な機能は盛り込まれています。 ちょっと変わった補完ボックスを作りたい場合に使えそう。
prototype.jsを使ったJavaScriptでグラフ描画ライブラリ「Plotr」:phpspot開発日誌
超クールな画像スライドショーを実現するためのJavaScriptライブラリ「F... 次の記事 ≫：フリーのPHPフォトギャラリースクリプト「phpGraphy」 solutoire.com | Plotr So I took some parts of PlotKit and wrote some parts myself. The result is a lightweight charting framework (12kb!) named Plotr. prototype.jsを使ったJavaScriptでグラフ描画ライブラリ「Plotr」。 次のようなグラフをJavaScript+CSSで描画することが可能。 ライブラリを使ったソースコード例は次になります。 var dataset = { 'myFirstDataset': [[0, 1], [1, 0.8], [2, 2.3]
JavaScriptで3Dオブジェクトを作成するためのライブラリ「JS3D」:phpspot開発日誌
JS3D: 3d Javascript Graphics Layer JS3D is a library which allows you to have interactive 3d objects on your website JavaScriptで3Dオブジェクトを作成するためのライブラリ「JS3D」。 サンプルが楽しくて、マウスの動きに追従して、３Ｄのオブジェクトが動きます。 （ＩＥでは正常に動作しない模様） mousemove イベントによって物体を動かしているようですが、その処理部分がなかなか興味深いですね。 関連エントリ JavaScriptによるモーショントゥイーンアニメーション実装「JSTween」 JavaScriptアニメーションフレームワークライブラリ「Run」 JavaScriptパーティクルエンジンライブラリ IEで透過PNG画像の透過処理を簡単に行うJava
【レビュー】これは凄い! Ajax最強のデバッグツール"FireBug 1.0"リリース (1) デベロッパのアツい視線を受ける実力派エクステンション (MYCOMジャーナル)
デベロッパがFirefoxを使う理由はエクステンション! Ajax Webアプリケーションの開発者には、WebブラウザとしてFirefoxを愛用しているユーザが多い。その理由のひとつに豊富なエクステンション機能が挙げられる。Firefoxを使っているからエクステンションを使っているというよりも、エクステンションを使いたいからFirefoxを使っているという感じだ。 デベロッパに人気のあるエクステンションはいくつもあるが、代表的なところではAll-in-One GesturesやDictionarySearch、Greasemonkey、User Agent Switcher、ScrapBookなどを挙げることができる。そしてAjax Webアプリケーションの開発において必須ともいえるエクステンションに、Firebugがある。 Firebugに対する称賛の声は枚挙にいとまがない。「Fireb
【レビュー】ドキュメントも充実「mootools 1.0」 - 軽量なAjax/JavaScriptライブラリ (1) mootoolsの概要と提供されているモジュール (MYCOMジャーナル)
mootools - 軽量なAjax/JavaScriptライブラリ ここでは、サイズの小さなAjax/JavaScriptライブラリである「mootools 1.0」(以下、mootools)の機能や使い方について解説する。mootoolsは、バージョン1.0がリリースされたばかりのライブラリで、ドキュメントが充実していることが特徴の一つである。 このmootoolsは、Valerio Proietti氏によって開発が続けられているAjax/JavaScriptライブラリである。The MIT Licenseのもとで、オープンソースソフトウェアとしてリリースされている。オブジェクト指向にのっとって開発されたモジュール形式のライブラリで、ダウンロード時に構成ライブラリを選択し圧縮率を指定して成果物を取得できるという特徴がある。 百花繚乱のAjax/JavaScriptライブラリ Ajax/
フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
とても便利なJavaScriptカスタム関数集10個をまとめたライブラリ「common.js」:phpspot開発日誌
Top 10 custom JavaScript functions of all time とても便利なJavaScriptカスタム関数集10個をまとめたライブラリ「common.js」 読み込むことで、次のような便利関数が使えます。 addEvent - イベントの付与 addLoadEvent - onloadイベントの付与 getElementsByClass - classNameによってエレメントを得る。getElementById や getElementsByTagName のように使える ※ prototype.js にも実装されています。 cssQuery - cssのセレクタを元にエレメントを得る toggle - 表示、非表示を行う関数。 insertAfter - insertBefore という関数は標準でありますが、insertAfterというのはありません。
WebにJavaScript 2.0の時代が近づく - 日経トレンディネット
米国時間11月7日、Web時代のアプリケーションを総合的に持つAdobe Systemsが、ActionScript Virtual Machine(AVM)をMozilla財団に寄贈すると発表した。AVMは「Adobe Flash Player」に採用されているスクリプト言語処理機能。Firefoxの開発・普及を推進するMozilla財団では、これを受けて「タマリン・プロジェクト(Tamarin Project)」を発足し、2008年にまでにこの技術をFirefoxに統合することを目標に活動を始めた。 どういうことか？ ニュースの本質は「タマリン」という名称が暗示している。「Google」のイメージ検索で「Tamarin」を探すと一目で分かるが、タマリンは一般的には「ゴールデン・ライオン・タマリン」を指す。美しいモンキーだ。クモザル（Spider monkey）もかわいいけれど……と思っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting
http://youmos.com/news/swfobject.html