noobSlide 気持ちよいスライド機能を提供する「noobSlide」。 自動で画像をスライドさせたり、ページ送りでスライドさせたりできるスライド機能を提供。 プレビュー付きのスライドショー機能も実装できます。 画像だけでなく、スライドショー機能も実装できます。 関連エントリ jQueryベースのLightBoxクローン「prettyPhoto」 カスタマイズできる多機能LightBox「Lightview」
busy.js (loading indicators) busy.js 1.0 allows you to add/remove loading indicators to html elements on your webpages 指定したHTMLエレメントをローディング中にする際に便利な「busy.js」。 例えば、div 要素全体に次のようにローディング中にすることが出来ます。 デモはこちら - 要素をクリックでローディング状態にすることが可能 オーバーレイで要素自体の色も変わるため、ローディング中であることがよく分かるようになっています。 関連エントリ グレーアウト表示ライブラリ:glayer.js 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」
prettyPhoto - jQuery lightbox clone - by Stephane Caron Here's my jQuery lightbox clone, I did it because those available are either not close enough to the real lightbox (lacking animations, not supporting galleries, etc ,etc) or were just not suiting my need.jQueryベースのLightBoxクローン「prettyPhoto」。 特に真新しいというわけではありませんが、jQueryベースで動作します。 LightBox同様、複数画像でページ送りができるモードと、単体に対して設定することもできます。 最初から角丸になっているので角丸
Free, Fast and Easy CSS webpages! | psd 2 CSS Online psd2css online converts your fantastic, creative, artistic, no holds barred web page designs into strict XHTML compliant CSS web pages automatically. PhotoShopのPSDファイルをXHTML&CSSに一発変換できる「psd2css」 PSDファイルをアップロードすると、内容を読み取った上で、レイヤーごとにブロックが分けられた状態のXHTML+CSSを取得できます。 簡単なPSDファイルを送ってみたところ、完全ではないですが、再現することが出来ました。 PhotoShopにも同じような機能はありますが、必要な画像のみトリミングしてくれ
Easy Scroll v1.0 - Unobtrusive content scroller This is a demonstration of an unobtrusive content scroller.コンテンツをブロック内でスクロールさせられる「Easy Scroll」 先日、横スクロールのものを紹介しましたが、たてスクロールのものもありましたね。 狭い範囲に情報を入れたい場合に活用できそうなので覚えておきましょう。 関連エントリ カーソル位置によって自動スクロールする小窓実装ライブラリ
SEOに便利なFirefoxエクステンション色々 SEO用のエクステンションもいろいろあるようですね。 SeoQuake :: Firefox Add-ons SEOに便利なFirefoxエクステンション「SeoQuake」。 インストールすると、Googleのページランク、リンク数、関連リンク、Yahooのリンク数、関連リンク数などの情報が得られます。 SEO for Firefox Googleの検索結果にページランクなどのSEO情報を表示。 その他便利な機能いろいろ RankQuest SEO Toolbar 30以上のSEOツールに簡単アクセス Live PageRank ページランクをステータスバーに表示 Alexa Sparky Alexa情報をステータスバーに表示 SEOHAND ページランク、バックリンクなどを元にグラフを作成 実に様々な拡張がありますね。IEもこんな感じに
Pure CSS Animated Progress Bar | Css Globe Here's a simple demonstration of how you can create animated progress bar using pure css. JSレスでピュアCSSの超カッコいいプログレスバーのサンプル →デモを見る - ズイズイアニメーションしていきます。 何とこれ、JavaScriptを使っていません。 CSSとHTMLオンリーです。 仕組みは、GIFアニメーションで100%までプログレスする画像を作成しておき、進捗部分までを画像で塗りつぶすというもののようです。 CSSだけじゃ無理だと思うようなところもCSSのみでやっちゃうのは感動してしまいますね。 関連エントリ JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート
Flexigrid 手軽に使えるExcel風グリッドUI「Flexigrid for jQuery」。 カラムのソート、ページング、項目のフィルタリングが可能なグリッドUI。 jQueryベースで、18KBで使えます。 単純なグリッドUI ソート機能やページング機能を搭載したグリッド jQueryをメインで使っていて、手軽にこうしたエクセル風UIを実装したい場合に使えそうです。 関連エントリ リッチなExcel風グリッドインタフェースを提供するJavascriptライブラリ「dhtmlxGrid」 Yahoo! UI Library を使ったページ送りが可能なグリッドコンポーネント AjaxベースのPHPを使ったグリッドコンポーネント Ajax+PHP+Smarty+script.aculo.usなデータグリッドコンポーネント 高機能なJavascriptツリーグリッドコンポーネント
iBox - Lightweight inline popup iBox is a lightweight script that lets you overlay images and documents in a small dialog without a page reload.多機能LightBoxのiBoxがバージョンアップ「iBox v2」。 以前に紹介したiBoxがバージョン2にアップしていました。 画像、HTMLドキュメントに加えてYoutubeビデオ、インラインコンテナ(hiddenで内部に記述したdiv)を開くことができるようになっているみたい。 iBoxは依存ライブラリがなく、ライブラリ自体は7KBなので、この機能だけ使いたいという場合に使えますね。
IzzyMenu - Menu Builder - Build your pro CSS/DHTML Menu! オンラインでクールなメニューを簡単作成「izzymenu」。 パラメータをカスタマイズするだけでクールなメニューが簡単に作れてしまうというサービス。 メニュー作成の容易化もさることながら、サイト自体がフルAjaxでサクサク動いて気持ちいいですね。 参考エントリ 秋元@サイボウズラボ・プログラマー・ブログ: オンラインCSS/Javascriptメニュージェネレータ izzymenu 120以上生成できるCSSメニュー作成ジェネレータ『IzzyMenu』レビュー*ホームページを作る人のネタ帳
PHPでATOM、RSS1/2フォーマットのフィードが超簡単に吐き出せる「FeedWriter.php」 2008年03月12日- PHP Universal Feed Generator (supports RSS 1.0, RSS 2.0 and ATOM) | ajaXray It’s been a while since I’ve planned on developing a feed generator that fulfills most my needs by supporting the various feed formats. PHPでATOM、RSS1/2フォーマットのフィードが超簡単に吐き出せる「FeedWriter.php」。 RSS1や2、ATOMのフォーマットを理解して出力するのは面倒ですね。 このライブラリを使えば、RSS1/2もATOMも、クラスを作成す
jWYSIWYG This plugin is an inline content editor to allow editing rich HTML content on the fly. シンプルなWYSIWYGエディタ作成用JSライブラリ「jWYSIWYG」。 必要なスクリプトを読んだ後、次のようにマークアップ。 <div class="box"> <textarea id="wysiwyg" rows="11" cols="69"></textarea> </div> 初期化は「 $(function(){ $('#wysiwyg').wysiwyg(); }); 」だけでOKみたい。 WYSIWYGエディタは他にも色々ありますね。 Yahoo UI Library ベースのWYSIWYG prototype.jsでクロスブラウザなWYSIWIGエディタ FCKEditor Tin
woork: Flickr like horizontal menu This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu: Flickrで使われているあのクールなドロップダウンメニューを実装してみよう! 次のようなクールなドロップダウンメニューを実装してみましょう。 紹介元で、HTMLと画像のサンプルが配布されています。 実装自体は次のように関数が定義されていて、 <script language="javascript"> function showMenu(id_menu){ var my_menu = document.getElementById(id_menu); if(my_menu.style.
PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 2008年02月21日- Icebeat | class.image PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 class.image.php を使えば、分かりやすいコードで、簡単に画像のリサイズ、切抜きが可能です。 例えば、3行で、画像のサムネイルが作れてしまいます。 まずは、画像を幅200pxでリサイズ&保存のコード $thumb = new Image('image.jpg'); $thumb->width(200); $thumb->save(); そして、画像を50%のサイズにリサイズのコード $thumb = new Image('image.jpg'); $thumb->resize(50); $thumb->save(); そして、左0px、上30pxの位置
Create Resizing Thumbnails Using Overflow Property | Css Globe This tutorial is aimed at controlling the size of the thumbnails appearing on your page. CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル。 次のように、CSSで画像を固定サイズにトリミング表示できます。 更にマウスオーバーで画像を元サイズに。 実装について見ていきましょう マークアップが次のようにあったとします <p class="thumb"><a href="http://cssglobe.com/"><img src="image.jpg" /></a></p> そして、次のCSSを適用。 p.thumb{ float:left; margin:.5
jqDnR :: Minimalistic Drag'n'Resize for jQuery jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. ブロック要素のリサイズやドラッグを可能にするjQueryプラグイン「jqDnR」。 1. 赤の領域をドラッグして自由にリサイズできる要素作成 2. ドラッグ移動できる要素を作成 3. 赤いバーでドラッグ移動し、右下の赤いつまみでリサイズするボックスの作成 プラグイン自体が972バイトしかなくて、jQueryとあわせてもとても軽いですね。 CSSでスタイルすれば、当然、もっと綺麗なUIで提供できます。 関連エントリ 要素の中身をアニメーションしながら切り替えられる「InnerFade with jquery」
Pure Css Data Chart | Css Globe Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let's say simple data chart? How about giving it a try with nothing but good ol' css? ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」。 次のようなグラフを描画するCSSとHTMLマークアップのサンプルが紹介されています。 マークアップも次のように綺麗に記述できます。 <dt>Day 1</dt> <dd class
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く