カラムの高さを単に揃えるだけでなく、アニメーションで揃えたり、指定した値に揃えることができるスクリプトを紹介します。
[JS]カラムの高さを揃える多機能なスクリプト -Equal Column Heights
カラムの高さを単に揃えるだけでなく、アニメーションで揃えたり、指定した値に揃えることができるスクリプトを紹介します。
jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」:phpspot開発日誌
jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」 2010年07月06日- Plugins | jQuery Plugins jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」。 次のようなリッチな動画プレイヤーがノンFlashで実装できるプレイヤーです。HTML5非対応ブラウザ用にFlashでフォールバックも可能。 Youtube、vimeoの埋め込みもOKです。 jQuery UI Theme-Roller を使ってテーマの変更も容易だそうです。 HTML5の動画プレイヤーは色々出てますが選択肢のひとつとして覚えておいてもよさそうですね。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能
１枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」:phpspot開発日誌
１枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」 2010年07月05日- imagineMenu() jQuery plugin Tutorials Devoth.Design Edinburgh １枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」。 サイトのナビゲーションメニュー等を画像で構築していて、カーソルがあたった際にハイライトさせたいという場合がたまにあります。 onmousemoveなどで画像を切り替える方法もありますが、imagineMenuを使えば、次のような１枚の画像からメニューを構築出来ます。 カーソルを合わせるとハイライトされるメニューが出来ました。 CSSで色々と修飾できるようになったとはいえ、画像でメニューを構築したほうが自由度は増すので選択する場合もあると思います
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
MacOS X風のJavaScriptオフでもなんとか動くドック風UI実装サンプル:phpspot開発日誌
Mac-like icon dock (v2) - using jQuery - JavaScript/CSS Projects - APL Web Development MacOS X風のJavaScriptオフでもなんとか動くドック風UI実装サンプルが公開されています。 JavaScriptがONであればjQueryでスムーズなアニメーションをしながら動かすこともできるのですが、CSSを使ってオフでも動くみたいです。 JavaScriptを使わない環境でもDock風にしたいという場合に使えそうですね。 XHTMLとCSS, jQueryで実装されています。 関連エントリ prototype.jsでMacOSXのDock風ＵＩを作るJavaScriptライブラリ 超絶クールなMacOS X風ドックメニュー「CSS Dock Menu」 JavaScriptでMacOS XのDock機能
フォーム周りに使えるjQueryプラグイン50 – creamu
フォームをより使いやすくしたい。 そんなときに使えそうなのが、『50 jQuery Plugins for Form Functionality, Validation, Security and Customisation』。フォーム周りに使えるjQueryプラグイン集です。 バリデータやアップローダ、パスワードの安全性チェックなど、いろいろありますね。 jQuery “Highlight” Plugin フォーカスが当たっているフォームに背景画像を敷いて、ハイライトしてくれるプラグイン Autotab: jQuery Auto-Tabbing and Filtering 電話番号などのinputで、自動で次のinputにカーソルを移動してくれる jQuery NobleCount Twitterのような、あと何文字入力できる、を表示してくれる「jQuery NobleCount」 AJ
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
スムーズにスクロールしないjQueryプラグイン「jDTScroll」 - Rewish
ページ内リンクでスクロールをスムースにするスクリプトは良くありますが、アレってもっとスムーズにスクロール出来ないのかなーとか思いますよね。僕は思います。 もっとスムーズにするのは僕には難しいので、普通のスムーススクロールがスムーズに感じられるように、スムーズにスクロールしないjQueryプラグインを作りました。 ダウンロードとデモ jdtscroll.js デモを見る 導入方法 1. jQueryとjDTScrollを読み込む <script src="jquery.js"></script> <script src="jdtscroll.js"></script> 2. 実行する $() で対象にする要素を指定します。ページ内リンクなのでフラグメント識別子が付いてるっぽいアンカーを指定するのがいいですね。 jQuery(function($) { $('a[href^="#"]').jd
jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル:phpspot開発日誌
Create a Custom Content Slider with jQuery jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル。 次のように、左側にボタンがあって押すと右側のコンテンツがアニメーションで切り替わるコンテンツスライダーの実装チュートリアルとサンプルが公開されています。 サイドバー等に仕込むことで少ないスペースで多くの情報を格納することが出来る上になかなかクールな印象を与えられそうですね。 簡易チュートリアル的なコンテンツを載せる場合なんかに使えそうです。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット JavaScript製の画像スライダー・ギャラリーいろいろ JavaScriptでページスライダー用ライブラリいろいろ
ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」:phpspot開発日誌
ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」 2010年06月10日- Video LightBox - Embed video to your website with beautiful Lightbox effect! ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」。 名前から推測するに、単に動画をLightBox化しただけでしょう、と思いきやなかなか素晴らしいプラグインになっていたのでご紹介です。 動画のサムネイルを次のように様々なスキンによって修飾できます。クリックすればニュイーンとLightBox表示されるというオシャレさ加減がいいです。 更に埋込可能な動画形式が豊富で、flv, mp4, 3gp や、外部動画サイトのYoutube, Facebook, Goo
これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム:phpspot開発日誌
これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム 2010年06月07日- Plugins | jQuery Plugins これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム。 なかなかリッチなUIとGoogleカレンダーばりの操作性を持つ便利なスクリプトになっています。 Googleカレンダーに登録するのもよいのですが、ちょっと外部に流したくないこととかも結構あるので、自前で構築したいというニーズもあるのではないでしょうか。 タイムライン上をドラッグ＆ドロップして予定を入れられます。ポップアップがでるので予定を入れます。日本語もOK 見ての通りUIもなかなかいい感じです。 スケジュール管理等に活用できますね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-w
jQueryによってカスタマイズされたCSSボタン２０:phpspot開発日誌
20 Awesome jQuery Enhanced CSS Button Techniques - Speckyboy Design Magazine jQueryによってカスタマイズされたCSSボタン２０としてエントリがあがっていたのでご紹介。 ボタンデザインのサンプル集として覚えておけばかなり使えそうなサンプル集になってます。 ボタンでクリック率は大きく変るということもあるので、クリック率を高めたい場合はこだわってみるとよいかも。 関連エントリ iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 綺麗にデザインされたCSS3ボタンのまとめ PhotoShopで美しいボタンを作るチュートリアル39個 CSS3なボタンをWEB上で作れる「Button Maker」
ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」:phpspot開発日誌
ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」 2010年05月24日- Senamion.com - multiselect2side (multiple select double side) plugin: documentation and demo page ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」 デスクトップアプリケーションなんかでよくある、使うリスト＆使わないリストを表示する際に便利なUIを実装出来ます。 select ボックス内のアイテムを複数選択して、移動することも出来ます。 ボックスの中身をソートすることも出来ます。 ボタン部分のUIが独特ですが、CSSでリデザインできるようなので安心です。 このUIで、例えば、利用者がWEBサイト
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」:phpspot開発日誌
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 2010年05月19日- Plugins | jQuery Plugins ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」。 ドロップダウンメニューといえば、複数のアイテムが表示され、クリックするとページ移動するというのが普通の動きですが、ドロップダウンメニュー内に好きなコンテンツを入れこんでしまうことが出来るのがMegaMenu。 一見何の変哲もないナビゲーション マウスオーバーすると、テーブルコンテンツがアニメーションしながら表示されます。 フォームだって埋め込んでしまえます。ログインフォームなんかを置くといいのかも リストも次のように綺麗に表示されます。リンクを貼って普通にメニューのように使うことも出来ますね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像にぼかし効果を与えられるjQueryプラグイン「Image Blur」:phpspot開発日誌
40 Beautifully-Designed Navigation Menus | Vandelay Design Blog
動きがかわいいcss3+jQueryのコンテンツスライダー・Pretty Simple Content Slider - かちびと.net
Site Under Maintenance
クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」:phpspot開発日誌
moto-mono.net