jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
IE6 でガタつかない positoin:fixed をさせるための詳細条件を調べてみた - Cyokodog :: Diary
「IE6 position:fixed の諸問題を解決する jQuery.exFixed.js」について、たくさんのコメント、フィードバックありがとうございます。 exFixed のうりとして「IE6 でもガタつかない position:fixed ができる」というのがありますが、フィードバックでいただいたバグを解消する際に、ガタつき防止の前提条件をいろいろと調べたので忘れないようメモしときます。 固定位置に表示させる処理 まず固定位置表示処理のおさらいから。 IE 固有機能の expression を使います。expression は CSS 定義内でも記述することができますが、JavaScript 内で記述する場合は以下のように書きます。コードは jQuery ベースです。 //位置調整ができるように position:absolute にします var el = $('#fixedE
ソースを修正しないでモーダルウィンドウ系プラグインの IE6 のガタつきを抑止してみる - Cyokodog :: Diary
jQuery BlockUI のようなモーダルウィンドウ系プラグインの中には、画面スクロールしてもウィンドウ表示位置が固定されるものがありますが、IE6 の場合 position:fixed が使えない関係でスクロール時、固定ウィンドウがガタついて表示されてしまう事が多いようです。 私の場合、会社の昼休みに IE6 でプラグインのデモページをチェックすることが多いので結構気になることがあります。（最近は IE6 だとまともに動作しないプラグインも結構多いです） 「IE6 position:fixed の諸問題を解決する jQuery.exFixed.js」では、expression と background-image / background-attachment の設定でガタつきを抑止することができました。 同様の手法でプラグイン自体のソースを変更することなくガタつきを解消することがで
IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog :: Diary
最近の更新履歴 2011-12-07 Ver 1.3.2 リリース jQuery 1.7.1に対応しました。 2010-12-27 Ver 1.3.1 リリース fixed 要素がブラウザ表示エリアから隠れ１度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具合を修正しました。 2010-11-14 Ver 1.3.0 リリースしました。exAPI ベースの実装に変更しました。サイズに auto を指定できるように変更しました。 2009-12-08 Ver 1.2.2 リリースしました。IE6 にて fixed 対象要素を非表示にしても表示されてしまう不具合を修正しました。Ver 1.2.1 でサイズを明示せずプラグインを実行すると fixed されない不具合を修正しました。 more jQuery exFixed を使用すると、IE6 で p
Date オブジェクトを拡張する jQuery.exDate.js - Cyokodog :: Diary
更新履歴 2009-03-25 addMonths メソッドでマイナス値を引数にした時の不具合を修正しました。 JavaScript の標準オブジェクトである Date オブジェクトに、各種拡張機能を追加したオブジェクトを返す jQuery プラグインを作ってみました。インスタンス化した Date オブジェクトに独自の拡張メソッドを追加する実装になっているので、Date.prototype の汚染も無く、Date オブジェクト純正メソッドとの併用が可能です。 インスタンスの生成 まず、下記のように記述し Date オブジェクトを生成します。引数を省略した場合は、現在日付時刻の Date オブジェクトが生成されます。 var date = $.exDate(); 引数を指定することで任意の日付時刻のオブジェクトを生成できます。デフォルトフォーマットは yyyy/mm/dd です。 var d
レイヤーベースのプレースホルダ付き入力欄を作る - Cyokodog :: Diary
変更履歴 2009/03/26 IE6 不具合対策として、input 要素と同一 font-size をラベルに割り当てる処理を無くし、パラメータでラベルの style を指定できるようにしました。（理由はソースのコメント参照） prototype.js 版 JavaScript でプレースホルダつき入力欄を作る(2) - log.8-p.info jQuery 版 jQueryでプレースホルダつき入力欄を作る - less JavaScriptでプレースホルダつき入力欄を作る(JQuery実装) - syttruの日記 JQueryでプレースホルダつき入力欄その２ - syttruの日記 昨日作ったものはテキストボックスからフォーカスが外れたときにvalue属性に値をセットしていたので、submitした時に表示されている文字列がそのまんま送信されてしまいます。これはいけません。 色々と考
スクロールイベントにおける position:absolute 要素の位置補正 - Cyokodog :: Diary
スクロールイベント内での position : absolute 要素の表示位置の補正処理について考えてみます。 具体的には以下のプラグインのような動きの動作原理について考えてみます。 jQuery Scroll Follow | demo スクロールにより対象要素が隠れると、スクロールに追従するように absolute 要素の表示位置が補正されます。 以前のエントリ「IE6 向け position:fixed + スクロール追尾型の要素固定表示の方法を考えてみた」でも似たようなことを試しましたが、この時は IE6 で position:fixed を擬似的に実現する事を目的としてたので、absolute 要素をスクロールさせるコンテナが $(window) 限定でした。 今回は position:relative な DIV 要素をコンテナとした場合や、擬似フレームの対応も含めて考えてみ
jQuery でブラウザの表示領域に対するサイズや位置情報を取得してみる - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary 前回、前々回のエントリではボックス要素を例にサイズや位置、スクロール量などの求め方について書きましたが、実際のプラグインの実装においてこれらの情報が必要になるのは、ブラウザの表示領域に対してということが多いかと思います。 具体的にはツールチップなどの機能で、画面の端の要素を hover した時、ポップアップがブラウザの表示領域内に収まるように表示位置を調整するような場合に、ブラウザの表示領域のサイズやスクロール量などが必要になります。 jQuery でブラウザの表示領域をつかむ方法 ブラウザの表示領域を jQuery でつかむには、以下のような記述でできそうです。 $('html') $(window) $(
jQuery でサイズや位置を取得する方法を図にしてみた(2) - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary 前回のつづきです。 前回同様 width の記述は省略してますが、height を width に置き換えれば幅も取得できます。 attr() メソッドでサイズを取得する際の注意点 attr('offsetHeight') や attr('clientHeight') でサイズを取得する際、対象要素が非表示状態だと 0 が取得されてしまいます。 要素を表示させる際、位置決め等のために表示処理前に対象要素を採寸することがあるかと思いますが、そのような場合注意が必要です。 対象要素が非表示だった場合、一時的に表示状態し、採寸後に非表示にするようなプラグインを定義しておくと便利です。(以下参照) $j.fn.mea
スクロール時にちらつかない IE6 向け position:fixed - Cyokodog :: Diary
更新履歴 2010-01-21 スクロール時のガタつきをはじめとする諸問題等を解決した精度の高い fixed を使いたい場合はこちらをご覧ください。 IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog::Diary 前回のつづきです。 スクロール時のちらつき 前回までのやり方は、スクロールイベント内で absolute 要素の表示位置をずらす事で position:fixed を実現してましたが、この方法だとスクロールの際、対象要素にちらつきが生じます。 今回はこのちらつきを解消する方法について考えてみます。 サンプルページ (本エントリのサンプルページは IE6 でご覧ください。) 表示位置のずらしこみを行わない スクロールイベントでの表示位置のずらしこみがちらつきの原因なので、別の方法で position:fixed させ
jQuery 関連記事まとめ - Cyokodog::Diary
はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基本機能 本家 jQuery.com リファレンス jQuery 日本語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery＋ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ
tableのヘッダを固定させる簡易scriptをサクっと作ってみた - Cyokodog :: Diary
更新履歴 2010-01-21 改良版を作りました。以下エントリをご覧下さい。 テーブルのヘッダとフッタを固定する簡易プラグイン - Cyokodog::Diary 以前のエントリ「Ajax系ライブラリによくあるtableのヘッダ固定の仕組みを調べてみた」で調べた結果、 Javascriptで生成するなら小飼さん方式でいいんじゃないでしょうか(そっちの方が安心)。 Ajax系ライブラリによくあるtableのヘッダ固定の仕組みを調べてみた という結論になりました。小飼さん方式っていうのはヘッダ用tableとボディ用tableを別々に用意しそれぞれのthとtdのカラム幅を合わせて、あたかもヘッダが固定化されてるように見せる方法なのですが、HTMLやCSSが煩雑になって記述がめんどくさいのが難点です。 と言うわけで tableのヘッダを固定させる簡易scriptをサクっと作ってみました。jQue
jQueryプラグインの書き方を考えてみる(1)
更新履歴 2010-01-21 プラグイン定義方法については、約１年後に再考した下記エントリの方をお勧めします。 jQuery プラグインの定義パターンについて調べてみた - Cyokodog::Diary プラグイン API の定義パターンについて調べてみた - Cyokodog::Diary jQuery UI の プラグイン定義関数 $.widget を使ってみる - Cyokodog::Diary jQuery ライクなプラグイン API の定義方法を考えてみる - Cyokodog::Diary プラグインを書いてみる まずこのへんの記事を参考に、 jQueryは、プラグインで手軽に機能を実装できるのが特徴です。プラグイン・ディレクトリ（Plugins | jQuery Plugins）に沢山のプラグインが公開されていますが、作り方を調べてみたら、かなり簡単に自分でも作成できるよ
自分用class定義ライブラリmyclass.jsを作ってみる(1) - Cyokodog :: Diary
自分の中でデファクトとすべく書き方を考えてみました。 いろいろと発見もあったので、はてな界隈の方々にはいまさらかとは思いますが、まとめてみました。 まずは単純に 汎用ルーチンとかに頼らず書いてみる。 /* 親 */ var Car = function(){} Car.prototype = { voice : 'boo', tire : 4, init : function(p){ if(p){ this.tire = p.tire; } return this; }, showSpec : function(){ alert('voice is ' + this.voice) alert('tire is ' + this.tire) return this; } } /* 子 */ var DumpCar = function(){} DumpCar.prototype = new
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
