[B! css][jQuery] ben-keiのブックマーク

ピュアCSSのエモティコンを実装できるjQueryプラグイン「Emoticons」:phpspot開発日誌

JSPkg ピュアCSSのエモティコンを実装できるjQueryプラグイン「Emoticons」次のような、ピュアCSSで実装された、見た目的には若干微妙でも、軽量でカーソルを合わせると動いてくれるエモティコンが実装できますピュアCSSっていうところが熱いですね。とにかく軽くエモティコンを実装したい場合に検討してみてもよいかも関連エントリ Gmailスタイルのemoticonを実装できるjQueryプラグイン textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」

ben-kei 2013/10/22

リンク

背景画像をブラウザの枠いっぱいに表示するテクニックの考察

最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。各デモはページ下部のDownload Files」で、まとめてダウンロードできます。背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック背景画像をブラウザの枠いっぱいに表示するテクニックとは前提として、下記のポイントが挙げられます。画像でページをいっぱいにします。空きは無いようにします。画像のサイズは必要があれば調整しま

ben-kei 2010/11/28

リンク

クロスブラウザ対応、スクロールに追従するパネルの3つの実装方法

JavaScriptやCSSを使用して、スクロールした際にパネルを追従させるチュートリアルをCSS-Tricksから紹介します。 Scroll/Follow Sidebar, Multiple Techniques demo チュートリアルでは、JavaScriptで実装したアニメーション版、CSSで実装した版２つの計３種類が紹介されています。サイドバーのリストをクリックすると、追従のパターンを変更できます。実装はシンプルで、div要素でコンテンツとサイドバーを配置し、サイドバーには「position: fixed;」を指定します。 CSS <textarea name="code" class="css" cols="60" rows="5"> #page-wrap { width: 600px; margin: 15px auto; position: relative; } #s

ben-kei 2009/12/01

リンク

[JS]アクティブなタブとパネルの境界線を無くすチュートリアル

Simple Tabs w/ CSS & jQuery demo タブはリスト要素で実装されており、アクティブ時にはclassに「active」を与え、ボーダーの色を背景と同色（#fff）にして境界線を無くします。デモではタブをクリックすると、フェードのアニメーションでパネルを切り替え、シンプルながらもかっこいいエフェクトを備えています。スクリプトオフ時には各パネルは成り行きで表示され、各タブはページ内アンカーとして機能します。

ben-kei 2009/07/03

css
jQuery

リンク

jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌

Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。何ができるか？というのは次の図を見て頂くのがはやいでしょう。ビフォア ↓↓↓↓ アフターこれを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });