jQueryでブラウザウィンドウのリサイズに合わせてのdivとかもリサイズ(縦のみ) - DO☆KA☆TA ~information technology~
ブラウザウィンドウの縦のリサイズに合わせて表示中のdivとかで括られた部分を 同時にリサイズし、縮め過ぎたらスクロールバーを出す。ということをしなくては いけなくなった。 普通に組み込みと、長ったらしくてぱっと見、複雑そうで萎えるjavascriptのコード なりそうだったので、jQueryでできないかと思った。 しかし、自分で考えるのがいやだったので、色々飛び回った。そしてあった。 海外のどっかのサイトでサンプルがあったのだが、 場所を失念したのでサンプルに似たようなコードをメモしとく。 下記のコードでは、コンテナ（divタグ）でリサイズに応じて伸び縮みする対象を ３つ想定している。 ※divタグで、id=aaとid=bbとid=ccがあることを想定 ※footmargin変数は、フッターの余白の高さである。 $(document).ready(function() { var foot
jQueryでGoogle Mapsを簡単に扱えるようになるプラグイン『Google Maps jQuery Plugin』 - IDEA*IDEA 〜 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
画像が浮き上がるjQueryを使ったイメージギャラリー:phpspot開発日誌
jQuery Image Effects - Hover Effect w/ jQuery & CSS - jQuery Tutorial 画像が浮き上がるjQueryを使ったイメージギャラリー。 デモページのようなギャラリーを作成できます。 jQueryで小気味よくアニメーションするところがなかなかよいです。 ちょっとしたところで使えそうですね。 関連エントリ jQueryを使ったFlashばりにクールなギャラリー「GalleryView」 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 滑らかに画像が切り替わる超絶クールFlash写真ギャラリー「imagin」
lightbox
prettyPhoto prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6. It also comes with useful APIs so prettyPhoto can be launched from nearly an
ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル:phpspot開発日誌
Using jQuery for Background Image Animations - Snook.ca ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル。 デモページ デモページを見ればわかりますが、カーソルをあわせると滑らかに背景がアニメーションされます。 アニメーションの仕方がなかなか良くて、左→右や、上→下のように方向を指定できます。 当然ですが、Flashを使わなくてもJSでこうしたことが出来て、今までありそうでしたが、そんなに多く見かけることがなかったテクニックではないでしょうか。 覚えておくとふとしたときに使えそうです。
パネルをめくるような効果でブロック要素を切り替えられる「Flip!」:phpspot開発日誌
Flip! A jQuery plugin パネルをめくるような効果でブロック要素を切り替えられる「Flip!」。 次のようなパネルを上下左右の自由な方向にクルっと回転させられるウィジェット実装用jQueryプラグインが公開されました。 サイト上の省スペースで、製品なんかをＰＲする際に使えそうですね。 サイズを大きくすればプレゼンにも使えるかも。
フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」:phpspot開発日誌
Autotab: jQuery auto-tabbing and filter plugin | Matthew Miller フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」。 電話番号入力欄や、郵便番号入力欄で、フィールドが複数に分かれている場合、桁数が決まっているのであれば、次のフィールドに自動で移ってくれた方が使い勝手はよくなります。 Tabで移動することは出来ますが、その処理を知らない場合はマウスで移動する人なんかもいそうですし、打つキー数も多くなります。 そこで、オンラインバンキングなどではよくある、規定の桁を入力した後は次のフィールドに自動で移ってくれるＪＳライブラリがjQueryベースで開発され、公開されています。 実装は簡単で、まず必要なＪＳを読み込みます。 <script type="text/javascript" src="jquery
30 jQuery Menu Bar Tutorials & Examples - 1stWebDesigner
Navigation menus have really important role in any website. For big sites full with a lot of pages and articles, drop down menus and tabs are popular because they can make it a lot more easier to navigate and move through site, also you can save space on website displaying content on dynamic tabs. Also if you want to create a navigation menu, that really stands out of the crowd, jQuery could be th
画像をスムーズに拡大できるjQuery版FancyZoom:phpspot開発日誌
FancyZoom meet jQuery // Ordered List // We Make The Web Beautifully Simple 画像をスムーズに拡大できるjQuery版FancyZoom。 サムネイル画像をクリックするとそこからズームされる感じにアニメーションされるFancyZoomのjQuery版が出たみたい デモ jQueryな方にはよさそうですね。アニメーションがなめらかで、動作も軽いみたいです。 関連エントリ 画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (1) ドラッグ&ドロップでカラム幅を変更可能 | エンタープライズ | マイコミジャーナル
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
これはかっこいいぞ・・・スライドショーに激しく使えるjQuery用プラグイン『jQuery Cycle Plugin』 | i d e a * i d e a
ドットインストール代表のライフハックブログ
jQuery用のscript.aculo.usがリリース「jQuery UI」:phpspot開発日誌
jQuery UI: Widgets, Components, and Interactions jQuery UI is a set of themable widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. jQuery用のscript.aculo.usがリリース「jQuery UI」。 ドラッグ＆ドロップ、ソート、エレメント選択、リサイザブル、アコーディオン、カレンダー等、ＵＩに関わる機能が盛りだくさんです。 Interactions Draggables Droppables Sortables Selectables Resizables Widgets Acco
jQuery 開発者向けメモ
jQuery 開発者向けのメモです． ずっと以前に，jQuery に関する日本語の情報がまだ少ない頃に作ったページですが， その後 jQuery を再び利用する機会があったので，最新バージョン向けに記述を更新しました． 住宅ローンシミュレーションです． jQueryを利用したフォームの動的な追加や，flotプラグインによるグラフ描画などを行っています． 本ページの記載に間違い等見つけた方はブログのエントリまで連絡いただけるとうれしいです． 最終更新：2009/1/10 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したイ
jQuery版script.aculo.usの「Interface elements」がすごい:phpspot開発日誌
Interface elements for jQuery - Real examples of Interface elements jQuery版script.aculo.usの「Interface elements」。 script.aculo.us 同様、エフェクト、ドラッグ＆ドロップ、アニメーション、スライダー、オートコンプリートのほか、 ３Dアニメーション、アイテム選択用UI、テキストエリアリサイズ、ツールチップヒント、MacOS X の Dock 風UI を実装するためのライブラリが同梱されています。 詳しくは以下のデモを使ってみればそのすごさが分かるはず。 Effects [opens in new window] (combined showcase) Test new animate function [opens in new window] Use new func
ウノウラボ Unoh Labs: 簡単Ajaxライブラリ「jQuery」と便利なプラグインたち
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
[JS]jQueryのプラグイン33+1選 -2007年9月 | コリス
使えそうなjQueryプラグイン