jQuery UIを使ってiframeをリサイズできるようにする - TakiTakeの日記
jQueryとjQuery UIがあれば大抵のことはできるのですが、意外なことにiframeのリサイズができなかったので、できるようにしてみました。 といっても、jQuery UIのResizableにiframe用の処理追加しただけです。 デモ iframeをdivで囲む Resizableは、リサイズハンドラーとしてのdiv要素を対象要素の子ノードとして追加するのですが、iframeにはappendChildできません。そこで、iframeをdivで囲みdivをリサイズ対象にして、alsoResizeとしてiframeを指定します（divのリサイズにiframeを連動させる）。 リサイズ中はiframeをdivで覆っておく 通常iframe上でのイベントは、iframe内で起きます。iframe上でマウス動かしても、$(document).mousemoveが起こらないって事です。そこ
データを範囲で絞り込む際に便利なjQueryスライダーライブラリ·jQRangeSlider MOONGIFT
jQRangeSliderは日付や数値を範囲で絞り込む際に便利なスライダーライブラリです。 情報を絞り込んだり、データを登録する際には様々な入力方式が考えられます。今回はjQRangeSlider、範囲指定のスライダー入力コンポーネントを紹介します。 例です。 ドラッグして範囲を変更できます。 ぐぐっと移動。 左右の矢印で範囲は固定のまま移動させられます。 値を入力して変更もできます。 一気に逆まで。 細かなカスタマイズもできます。 jQRangeSliderはフローティング部分をドラッグして範囲を指定して、左右の矢印を使って範囲全体を移動できます。ホイールでの範囲指定もできます。iOSやAndroidでのタッチ操作もサポートしています。日付や数値の範囲指定に使うと便利そうです。 jQRangeSliderはjQuery/JavaScript製のオープンソース・ソフトウェア（GPL/MIT
JavaScriptを使ってSVGでグラフを描く·Morris.js MOONGIFT
Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。 Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。 二つのデータがある折れ線グラフ。 棒グラフ。 エリアグラフ。 パイチャート。 今のところ対応しているのは折れ線、棒、エリア、ドーナッツチャートになっています。それぞれ豊富なオプションが用意されています。また、マウスオーバーで値をフローティング表示してくれるのも便利です。データはJavaScriptで与えますが、グラフはSVGで出力される仕組みになっています。 Morris.jsはjQuery/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
[JS]jQueryのプラグイン33+1選 -2012年10・11月
equalize.js 高さや幅が不揃いのDOM要素を同じ高さ・幅にします。 height, width, outer-, inner- に対応
AndroidとjQueryのスライドアニメーションの不具合
AndroidとjQueryのスライドアニメーションの不具合 Android2.2でjQueryのスライドアニメーションを利用すると、特定の条件でセレクトボックスの値が切り替わらないという不具合が発生します。 まずは問題なく動作するパターン。 $(".btn").click(function(){ if($("#search").css("display")=="block"){ $("#search").slideUp(); }else{ $("#search").slideDown(); } return false; }); サンプル 開閉リンクでセレクトボックスの表示・非表示を切り替えられます。 次が不具合があるパターン。 $(".btn").click(function(){ if($("#search").css("display")=="block"){ $("#search
[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
業務システムに単なるCSVもリッチに表現·js-tables MOONGIFT
js-tablesはCSV形式のテキストをフィルタリングやソートに対応したテーブル表示にしてくれるjQueryプラグインです。 js-tablesは業務システムで使えそうなjQueryプラグインです。CSVファイルやCSVのテキストを渡してフィルタリングや並び替えに対応したテーブルを表示してくれます。 サンプルです。元データはCSVファイルとなっています。 カラムごとに入っているデータをグルーピングして表示します。そこから選べばデータがフィルタリングされます。 end tagと入っているデータだけ抽出しました。ソートもできます。 フィルタリングはインクリメンタルに行われます。 任意のCSVファイルを指定してテーブル化できます。1行目が自動的にヘッダーになります。 実際の使い方です。単純にテキストを入れるだけでテーブル表示にしてくれます。 CSVを表示する場合にはYahoo! Pipesを使
Circle Menu
A customizable jQuery plugin that emulates the menu in the Path application. Includes a selection animation and various animation options for opening and closing the menu. See it in action. Author Jason Hutchinson (zikes@zikes.me) How to Use Download and include the JS file in your page. Create a list, with the first list item representing the icon at the center of the menu. <ul> <li><a href="#">+
汎用性の高い、jQueryの定番系プラグインのまとめ
単体で使ってもいいし、それを使って更に面白いものを作りだすのにも役立つjQueryの定番系プラグインを紹介します。 いつもリリースされたばかりのプラグインを紹介しているので、たまには定番系で汎用的なものを。
deck.js » Modern HTML Presentations
<div class="deck-container on-slide-1"> <section class="slide deck-previous"> <h1>My Presentation</h1> </section> <section class="slide deck-current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide deck-next"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit
Smooth Page Scroller for jQuery- ver.3.0.8 | coliss.com
Smooth Page Scroller for jQuery: article & download Demo Demo 1- [Top of Page] doctype yes doctype no Demo 2- [h2-01] doctype yes doctype no Demo 3- [adjuster: position] doctype yes doctype no Demo 4- [adjuster: traverser] adjTraverser = 1: doctype yes adjTraverser = 1: doctype no Demo 9- [adjuster: traverser] adjTraverser = 1: doctype yes adjTraverser = 1: doctype no Demo 5- [adjuster: traverser]
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
suggest.js - 入力補完ライブラリ
Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES
jQueryのプラグイン33+1選 -2011年9月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Loupe 画像の一部を拡大します、多彩なオプションが便利。 Slicebox 画像をダイナミックに3Dスライスするギャラリー。 E
[JS]表示サイズに合わせてレイアウトやフォントのサイズ・ポジションを変更するスクリプト -jFL
デモ3：幅800pxで表示 [ad#ad-2] jFLの実装 現在、開発者バージョンが公開されており、それを参考に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jFL.min.js"></script> HTML 3カラムのデモのHTMLです。 ※シンプルにしています。 <div id="container"> <div id="left"><p>カラム：左</p></div> <div id="center"> <img src="gnu.png" id="the_img" style="float:left"> <p>カラ
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/09/jquery-table.html
screw-axis.com
http://www.redplugin.com/index.php?mainmenu=11&submenu=18
Daniel Raftery. Software Engineer.