そして、今回発見した、JavaScript用アニメーション作成ライブラリ「Animation.js」の紹介。 Animation.jsを使って、次のエフェクトが実現可能です。 エレメントのアニメーション移動 文字のアニメーション切り替え 色のアニメーション切り替え フェードイン・フェードアウト なかなか面白そうなクラスですね。 javascriptのアニメーションクラスは他にもいろいろありますが、自分にとって使いやすいアニメーションクラスを選ぶのがいいですね
そして、今回発見した、JavaScript用アニメーション作成ライブラリ「Animation.js」の紹介。 Animation.jsを使って、次のエフェクトが実現可能です。 エレメントのアニメーション移動 文字のアニメーション切り替え 色のアニメーション切り替え フェードイン・フェードアウト なかなか面白そうなクラスですね。 javascriptのアニメーションクラスは他にもいろいろありますが、自分にとって使いやすいアニメーションクラスを選ぶのがいいですね
しばらく検討中のままの はてなアイデア - 不具合>macOSX、safariにてタイトルが文字化けする場合を解消して欲しい。例えばこれ。http://f.hatena.ne.jp/qubi/20050621132459 を実装してほしい。 文字起こしグループ - 050628hatenaidea (naoya):これってさ、safari が・・・ safari がエンコード、そうそう、こいつが、文字判定下手だから・・・。 (naoya):あっ、safari の場合に、別の関数を加えておけばいいのかなぁ? いやぁ、何にしても結構だめなんだよね・・・。 (kiyohero):善処。結構、根が深そう? (naoya):根深い。根深いっていうか、safari のせいだから・・・。基本的には。 Core JavaScript 1.5 Guide:Predefined Functions:escap
文書の URI の後に #foo などの識別子(id)をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tool... 次の記事 ≫:JavaScriptで使えるカラーピッカー作成ライブラリまとめ deconcept ? SWFObject: Javascript Flash Player detection and embed script SWFObject is a small Javascript file used for embedding Macromedia Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. Flashプレイヤー
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」 2006年10月22日- Tooltip for forms You can download the entire script from this Zip file フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」。 このライブラリを利用すれば、次の画像のようなツールヒントをフォーム上に出すことが可能です。 実装は、必要なライブラリを読み込んだ後、次のように、tooltipText 属性にヒントを書きます。 <input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"> そして、
リッチなExcel風グリッドインタフェースを提供するJavascriptライブラリ「dhtmlxGrid」 2006年10月20日- dhtmlxGrid - sortable Javascript DHTML grid with rich script API dhtmlxGrid is a cross-browser editable JavaScript grid control that provides professional solution for representing and editing tabular data on the web. リッチなExcel風グリッドインタフェースを提供するJavascriptライブラリ「dhtmlxGrid」。 見出し部分をクリックで各アイテムをソート可能。セルのフォーマットを指定でき、チェックボックスやラジオボックスを置くことも
「マルチプラットフォーム」「利用する際に必要なものは、デフォルトでインストールされているWebブラウザとネットワークに接続できる環境のみ」といったような利便性の高さから、見ない日はないと言っても過言ではないほど浸透したWebアプリケーション。今日もいたるところで、さまざまな業務を円滑にすすめるためにWebアプリケーションが利用されている。 Webアプリケーションはハイパーリンクやフォームなど、Webブラウザの基本機能を用いて作成されている。Webブラウザ単体でできることは限られているため、ローカルアプリケーションと比較するとユーザビリティにが低くなりやすい。このため、デベロッパはWebブラウザ上で動作するJavaScriptやFlashをもちいて、そのユーザビリティを高めてきた。 ここではJavaScriptコードを記述するデベロッパの負担を軽減かつユーザビリティを簡単に高めることができる
皆さんは、「Ext」というJavaScriptフレームワークをご存知だろうか。Extは、4月1日にバージョン1.0がリリースされたばかりの新鋭のフレームワークである。 Extの前身は、「Yahoo! UI Library(YUI)」の拡張版として開発された「yui-ext」というライブラリである。しかし、yui-extでは、リッチなUIを実現できるものの、決してサイズが小さいとは言えないYUIを導入する必要がある。そこで、yui-extの作者であるJack Slocum氏は、YUI以外のライブラリとも併せて使えるようにyui-extを刷新。その成果物をExtという名前で(頭文字の「yui」を外して)リリースした。 Ext 1.0で対応している外部のフレームワークはPrototype.js(scriptaculousも併せて利用可)、jQuery、そしてYUIである。現在のところExt単体で
QuickTime動画、PDF等もLightBox風表示するJavaScriptライブラリ「lightWindow」 2007年04月19日- lightWindow Demo After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. QuickTime動画、PDF等もLightBox風表示するJavaScriptライブラリ「lightWindow」。 画像、IFRAMEだけではなく、QuickTimeムービーやSWFファイル、PDFなどもLightBox風表示してしまうライブラリ。 次のようにLightBox風表示できます。 ( QuickTime ムービーを LightBox 風表示 ) ( PDFドキュメントを LightBox 風表示 ) 使
JavaScriptでBackボタンを扱うためのライブラリ集いろいろ。 dojoやYUI 用のものがいろいろ出ているようですね。 dsHistory Really Simple History (RSH), Brad Neuberg AJAX-Nav, Mike Stenhouse dojo.io.bind, Alex Russell, et al YUI Browser History Manager, Julien Lecomte ブラウザ履歴を簡単に操作可能なjQueryプラグイン「jquery.history」 原理は「 Ajaxなページで「戻るボタン」を機能させる方法」で紹介した感じでIFRAME等を使って実装されています
May 08, 2007 331 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer supp
script.aculo.usベースのリッチGUIコンポーネント作成JavaScriptライブラリ「S... 次の記事 ≫:ペイントより圧倒的に高機能な「Paint .net 3.0」が正式リリース 機能変更、お知らせなど - はてな技術発表会日記 - 1月19日の技術勉強会 タイプされたキーに対するアクションを行う Observer 的なライブラリ JavaScriptでキーボードイベントを驚くほど簡単に扱える「KeyTypeListener.js」 MochiKit ベースで、次のように簡単に使えます。 addKeybind('a', function(ev) { log('a')}); addKeybind('a', function(ev) { log('a!!');}, $('loglog')); addKeybind('B', function(ev) { log('B')})
Realtime validation using Ajax Ajaxなどを駆使して、入力値を動的にチェックするライブラリ、realtime validation を公開しました。 >> http://masuidrive.jp/validation 正規表現とメッセージを指定するだけで、入力した瞬間にユーザに対してガイドメッセージを表示させる事ができ、今までの様に画面遷移後にエラーが出て、ユーザがエラー位置を把握しづらいと言う事がありません。 フォームの入力値をリアルタイムにバリデーション「Realtime validation」。 prototype.js と、配布している validate.js を読み込んだあと次のようなコードを書くだけ。 Validator.register({ "#mail" : { "/^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2
SoundManager 2: Javascript Sound For The Web - Schillmania.com A Javascript API was needed to achieve the kind of client-side flexibility I wanted, and access to sound was possible using Flash 8's ExternalInterface capabilities through a hidden movie. JavaScriptでMP3を扱えるライブラリ「SoundManager 2」。 次のように、JavaScriptで音声を再生したいな、と思ったことはないでしょうか。 soundManager.play('helloWorld','/hello-world.mp3'); 今回紹介するライブラリを
JavaScriptで開発され、クロスブラウザで動作するライトウェイトエフェクトライブラリに「bytefx」がある。Andrea Giammarchi氏によって開発されているライブラリで、動作があげられているWebブラウザはInternet Explorer、Safari、FireFox、Opera、Konquerorなど。 bytefxはMIT Style Licenseのもとで公開されているオープンソースソフトウェア。同エフェクトライブラリは執筆現在のバージョン(0.1f)において、通常配布で6.75KB、圧縮配布で2.72KBしかない。 もっとも、圧縮配布のほうは最低限の著作権表示のほかは、1文字に変換された変数名や詰められた空白スペースなどに変換されており、可読性は著しく低い。ライブラリを読むなら通常配布をダウンロードすべきだ。 同ライブラリにおいては実現されている主なエフェクトは
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
Image Rollover Code This script is a standards compliant means of adding mouse rollover code to images in a document without the hassle of coding in extra parameters to each image in your document. This code is standards compliant and should not invalidate your document. Sample Usage To begin with you need to load the javascript into a page in the head section of your page. If you place the code
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く