[JS]アニメーションで快適に動作する画像ギャラリーの超軽量スクリプト
画像の切り替えはフェード、サムネイルはスライドするアニメーションで動作する画像ギャラリーの超軽量（5KB）のスクリプトをLeigeberから紹介します。 ※jQueryなどの他のスクリプトには依存していません。 Animated JavaScript Slideshow - 5KB demo デモでは画像の切り替えがフェードで行われ、タイトルとキャプションがスライドして自動で表示されます。 サムネイルは左右にスムーズにスライドします。 各タイトルとキャプションと画像のセットはリスト要素で、それぞれh3, p, imgで実装されており、スクリプトオフ時にはリストの状態で表示されます。 スクリプトのオプションでは、スピード、不透明度、カラー、オート・手動、ダイアログの有無などが調整できます。 動作環境は、Fx, IE, Op, Safari, Chromeとなっており、IE6でも動作しました。
[JS]高機能なインターフェイスを実装できるスクリプト -UI.Layout
UI.Layoutは、可変タイプのパネルをベースとした自由なインターフェイスを実装できるスクリプトです。 UI.Layout – The Ultimate Page Layout Manager demo(UI Accordion) 上記のデモでは、アコーディオン型のパネルをはじめ、サイズ変更や開閉できるパネルが実装されています。 デモは他にも多数あります。 デモ：ミニマム デモ：シンプル デモ：ネスト デモ：複雑なネスト デモ：アコーディオン デモ：ドロップパネル デモ：フレーム UI.LayoutはjQueryのプラグインのため、実装にはjquery.js、アコーディオンなどのエフェクトにはjQuery UIが必要です。 下記のページから全てのファイルがダウンロードできます。 UI.Layout Plug-in & Related Downloads
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
【YQL 速攻レビュー】米 Yahoo! が SQL っぽく色んなデータを取ってこれるAPIを出した - てっく煮ブログ
米 Yahoo! が Yahoo! Pipes みたいに自由度が高くて、またちょっと毛色が違うサービスが出てきた。題して、Yahoo! Query Language。YQL と呼ぶようだ。SQL 風の言語を REST で投げて、結果を XML や JSON で受け取ることができる。具体的にやってみないと分かりにくいので、とりあえず試してみた。RSS からデータ取得YQL を使って RSS から最新のタイトル10個を取ってきてみる。こんな YQL になるらしい。 select title from rss where url='http://d.hatena.ne.jp/nitoyon/rss' rss テーブルに対して select を発行している。実際にこの YQL を試すには YQL 用の console を利用するとよい。（※要ログイン）console の左上に YQL を入力して
[JS]画像の一部を拡大表示するスクリプト -jQZoom Evolution
以前紹介した画像の一部を拡大表示するスクリプト「jQZoom」の機能がバージョンアップしたjQZoom Evolutionがリリースしました。 jQZoom Evolution demo 主なバージョンアップは、ズームウインドウのカスタマイズ、タイトル表示、エフェクトなどです。 オプションでは、ズーム時のタイプ、ズームウインドウのサイズと位置、タイトルの有無、フェードの有無とスピードなどが変更できます。 jQZoom EvolutionはjQueryのプラグインのため、実装にはjquery.jsが必要です。
jQuery でサイズや位置を取得する方法を図にしてみた - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary サイズの取得 煩雑になるので height の記述しかありませんが、width に置き換えれば幅もとれます。 普通のボックス要素 height() メソッドで取得できる値には、padding や border の分の高さを含みません。 CSS の height と同じなので、css('height')メソッドで取得してもよさそうですが、こちらの場合ブラウザの種類や CSS の定義の仕方で取得される値が異なる（クロスブラウザとしての機能が完全でない）ので、純粋に px 単位の高さを取得したい場合は height() メソッドを使用した方が無難です。 スクロールバー付きボックス要素 clientHeight には
jQueryを使うときに気をつけるべき8のポイント : tech.kayac.com - KAYAC engineers' blog
DAHONのBoardwalkを修理しようとしておもいっきり壊してしまいました。agoです。 普段はjQueryをメインで使用しているのですが、使っていていくつか注意すべき点があったのでまとめてみました。 （一部jQueryではなく、DOMの仕様上の制限も含まれています） 1 $().filterにstring以外のものを渡すとエラー 1.4系では修正されていました $().findや$().notは大丈夫ですが、$().filterの場合引数にjQuery objectや配列、html elementなどを渡すとエラーになります。 （たとえばjQuery objectを渡した場合、Firefoxでは「TypeError: t.substring is not a function」というエラーが発生します） 確認する ちなみに、$().findや$().notはstring以外も渡せるた
JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
twitter facebook hatena google pocket 過去2度jQueryベースのカレンダーを紹介しました。 ・jQueryベースのカレンダー作成javascript「jCalendar」 ・JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」 今回は第3弾となるdynDateTimeです。 sponsors 使用方法 dynDateTimeからjquery.dynDateTime.js、calendar-win2k-cold-1.cssをダウンロードします。 またjQueryからjqueryy.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jqu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作に便利そうなチートシート16選 | IDEA*IDEA