FaiblUG/setIframeHeight GitHub iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」 iframe外からはコンテンツの高さって取れなかったりしたと思うので、いざ同じことを実装しようとすると面倒ですが、こちらのスクリプトで簡単に調整でき、調整された際のイベントハンドラも設定できたりと便利に使えそうです。 関連エントリ image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload Images」
Embed.js | Plugin to convert text into image-based emoticons,supports automatic embedding for media URL サイト内テキストの絵文字、動画、PDF、ソースコード、Tweet等の自動変換が行える「Embed.js」。 テキスト内にemoticon用テキストや、動画のURLが埋め込まれていた場合、こちらを使って変換すれば閲覧者が見やすい形式に自動変換してくれる便利なもののようです 絵文字の自動変換 PDF、絵文字、動画など一括で変換 ツイートもURLから自動で埋め込みが可能 シンプルにテキストを書くだけであとはこちらのライブラリが自動でリッチにしてくれるのでタグをいじったりする手間が省けてよいかもしれませんね。 関連エントリ HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆ
jQuery Selectable - elohr selectボックスを置換えてオシャレかつ使いやすくできるjQueryプラグイン「Selectable」 selectというとその場で開閉するデザインですが、次のようなデザインの選択用のウィジェットに置き換え可能。 項目を検索できたり、項目がウィジェット内にならんでおり、便利に使えます 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flexselect」 BootstrapのselectボックスをよりリッチにするjQueryプラグイン「bselect」 selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」
revrev.js テキストを文字に分割してちょっとずらしてカッコよくできる「revrev.js」。 1文字づつ区切って反転させたりサイズを変えたりするというjQueryプラグイン。用途は限られるのかもしれませんが、面白かったのでご紹介 関連エントリ 1文字目を綺麗に大きくするAdobeのJSライブラリ「dropcap.js」 文字列を色コードに変換できるjQueryプラグイン「String to Color」 JSでCanvasに描いた文字等をOCRできる「Ocrad.js」 ページ内の文字をハイライトさせることができるjQueryプラグイン「FilteringHighlight」 テキストを1文字ずつフェードインする効果を実装「Blast.js」
Linkify - a jQuery plugin by @SoapBoxHQ 文中のURLを自動でリンクしてくれるjQueryプラグイン「Linkify」 サーバサイドで自動リンクするような処理はよくありますが、jQueryプラグインでクライアントサイドのCPUを使って自動リンクできるという便利なプラグインです。 初期化すれば簡単に簡単にリンク化されます。httpがはいってなくてもドメインぽいものは全て変換されるようです 関連エントリ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 テキストエリアを動的リサイズ&カスタマイズ可能なjQueryプラグイン ランダムに動く面白テキスト実装jQueryプラグイン「funnyText.js」 jQueryで分かりやすいテキストのDIFF表示ができる「jQuery.PrettyTextDi
Perspective Page View Navigation | Codrops 超カッコイイ立体的なメニューを実装したデモ。 ページがあって、クリックすると次のようにページが傾いてメニューが表示されるというデモです。 デザインもフラットでクール。 数年後のWEBではこうしたデザインは当たり前になっているのかもしれませんね。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 アコーディオン型のシンプルな階層メニューが作れるjQueryプラグイン「navgoco」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Nav
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
SMINT | The simple jQuery plugin for lovers of one page websites. スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 ページを開くと中部に何の変哲もなく現れるナビゲーションバー。スクロールするとページの上部にfixed固定され、どれだけスクロールしてもナビゲーションできて便利な物を簡単に実装できます デモはレスポンシブにも対応しているっぽいです。1ページにコンテンツを埋めこんでBookmarkによって移動させる的なページで便利に使えそう 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 ナビゲーションが斬新な30のサイト
jQuery.mmenu slick app look-alike sliding menus for your mobile website アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」 この手のライブラリというかプラグインは色々と出ていそうですが、1つの選択肢として知っておくとよいのかも。 $("#nav").mmenu(); で簡単にメニューが初期化でき、オプションも豊富です 関連エントリ レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」 レスポンシブでクールなドロップダウンメニュー実装例 垂直アイコンメニュー実装デモ&サ
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 2013年04月11日- kamens/jQuery-menu-aim GitHub 新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 次のような新しいamazonのメニュー。amazonといえば品揃えや安さだけでなく、秀逸なUIによって売上を伸ばしてきたといってもよいと思いますが、新しく実装されたドロップダウンメニューLikeなものを実装できるプラグインです。 デザインは違いますが、動作は同じです。 なかなか汎用的に使えそうなデザインですね。 関連エントリ HTML5&CSS3なフリーのドロップダウンメニュー25 レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 シンプルだけどデ
jQuery Responsive Thumbnail Gallery Plugin レスポンシブな画像ギャラリーが作成できるjQueryプラグイン。 jQueryプラグインを使えば簡単にできる事は多くなりましたが、レスポンシブでもできるものはこれからどんどん出てきそうですが、その1つといえそう。 画像の下にサムネイルがあってクリックするとその画像に切り替わるというシンプルなものですが、レスポンシブに動いてくれて便利に使えそう レスポンシブじゃなきゃ使ってもらえない、なんていう時代がもうそこにあるのかも 関連エントリ HTMLメール用のレスポンシブテンプレート「Antwort」 レスポンシブでクールなCMS「Bolt」 レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 レスポンシ
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ&ドロップでページ指定が簡単に出来ます。 30までドラッグ&ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」 2011年06月01日- Welcome AlbanX.com スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」。 「Cloud Zoom」というjQueryプラグインがあって、こちらへのパッチとして動作するみたい マウスオーバーでも動くみたいですが、iPhone、Androidでタッチした際にも動きます。 指でそのままスライドさせればマウスオーバーのように商品を拡大表示できます。一度iPhoneなどでみてみましょう。 スマートフォン向けのショッピングサイトにおいて、商品のディテールを説明するにはこうしたUIってかなり有用だと思われます。 いかに小さな画面においても詳細を見せるか?という場合において1つの選択肢として覚えておいて損はな
Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 2011年04月05日- Custom YouTube Player Reload ? Scripts and Code Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 Youtubeの通常のembedタグを埋めこむと、再生ボタンやらなにやらが付いていたりしますが、次のように、再生ボタンなしに出来ます。 これだけでも、デザインされたサイトには馴染みそうですね。バーがあるとデザイン全体が台なしというケースもありそう。 更に、カーソルを合わせると次のようにカスタマイズされたコントロールバーが現れます。 このコントロールバーは、JavaScript + CSS + 画像でデザインされており、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く