This domain may be for sale!
OperaがWebKitの接頭辞を…というのは、まあとりあえずは中の人からの報告を待っておくとして。 さて、WebKitプロジェクトは接頭辞についてどう考えているんだろうか。先週やっていたWebKit Contributor Meetingで接頭辞などについて取り上げたセッションがあったらしい。 Deprecating features and vendor prefixes 機能の廃止、接頭辞の削除と、ふたつトピックがあったので、ふたつに分けて書く。 機能は廃止できるのか この前WebKitは接頭辞をエイリアスとして残す方針があると書いた。もう少し広げてかくと、既存のコンテンツが依存している機能は、接頭辞の有無にかかわらず、削除せず残しておく感じだ。カジュアルに使われやすいCSSの機能は、たぶん削除されることは今後もほぼないと考えている。 けれど、APIについては実装を削除している場合も
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる(?)ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
Script Junkie | Creating Responsive Applications Using jQuery Deferred and Promises (日本語訳: jQueryのDeferredとPromiseで応答性の良いアプリをー基本編 | ゆっくりと… ) をみて、 (ε・◇・)з Deferred… Promise… お 覚えられん… (ε・◇・)з 脳みそちっちゃいので、もっと気軽に使えて、簡単に書けるのがいいなぁ~ って思ってました。 なので、自分なりに、 複数の同期/非同期処理を同時に実行し、処理の合流ができたり多少の失敗があっても前に進める Future 複数の同期/非同期処理を順番/同時に実行し、流れを直感的に記述できる Stream という2つの仕組みを考えました。 Stream は一本の流れを制御し Future は同時多発的な流れを制御するため、こ
追記:続編書きました。 リンクは一番下に 最近jQueryにはまっているひつじです。こんにちは。 jQueryに限らず、JavascriptでDOMをいじっていると var name = 'bsheep'; $('<div>').addClass('name').text(name).appendTo('#profile'); // // <div id="profile"></div> // ↓ // <div id="profile"><div class="name">bsheep</div></div> // こんな感じでDOMをその場で生成して埋め込みとかいう操作が結構あります。 でも、こういうの書いているとHTMLとscriptとを分離したくなってきますよね! この書き方のまま複雑なものとか作ってると、できあがりのHTMLの構造を読み取るための思考コストがかなり必
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary 前回、前々回のエントリではボックス要素を例にサイズや位置、スクロール量などの求め方について書きましたが、実際のプラグインの実装においてこれらの情報が必要になるのは、ブラウザの表示領域に対してということが多いかと思います。 具体的にはツールチップなどの機能で、画面の端の要素を hover した時、ポップアップがブラウザの表示領域内に収まるように表示位置を調整するような場合に、ブラウザの表示領域のサイズやスクロール量などが必要になります。 jQuery でブラウザの表示領域をつかむ方法 ブラウザの表示領域を jQuery でつかむには、以下のような記述でできそうです。 $('html') $(window) $(
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary サイズの取得 煩雑になるので height の記述しかありませんが、width に置き換えれば幅もとれます。 普通のボックス要素 height() メソッドで取得できる値には、padding や border の分の高さを含みません。 CSS の height と同じなので、css('height')メソッドで取得してもよさそうですが、こちらの場合ブラウザの種類や CSS の定義の仕方で取得される値が異なる(クロスブラウザとしての機能が完全でない)ので、純粋に px 単位の高さを取得したい場合は height() メソッドを使用した方が無難です。 スクロールバー付きボックス要素 clientHeight には
jQuery インスタンスメソッドである jQuery().offset や jQuery().position の解読を行おうと思い立って、jquery.js コードを睨み続けた結果、改めて offsetTop、offsetLeft について検討を加える必要があると思われました。 偶々、W3C による CSSOM View Module Working Draft が 2009年8月4日に公表されていたこともそうする必要性を高めました。 ( CSSOM View Module 作業草案 )、 たとえ「作業草案」とはいえ、拠って立つことのできる offsetTop/Left プロパティの定義として受け止めることの出来る内容となっています。こうして、この定義によって各ブラウザの差異を検証出来ることも、offsetTop/Left について再考するきっかけとなりました。 CSSOM View
jQuery.offset オブジェクト(5785~5854行)の概要 このオブジェクトには 3 つのメソッドが定義されます。 initialize は、ブラウザ特性を把握するために幾つかのプロパティを設定するメソッドです。 この「幾つかのプロパティ」とは次に列挙した 5 つで、これらは、jQuery().offset() メソッド解読において後述するように、要素の正確な位置算出を行うために使われ、それは同時に、各ブラウザの CSS に関する特性を捉えることになります。 jQuery.offset.doesNotAddBorder : 或るボックスの offsetTop を算出する際に、直上の親ボックスのボーダー値を加算しないか(true)、加算するか(false) jQuery.offset.doesAddBorderForTableAndCells : table 内の或るセルの of
概要 対象を画面に収まる位置へ移動させます。ダイアログやコンテキストメニューなどを表示する際の座標計算を省略できます。 ダウンロード jQuery.gpInside-1.0.zip [127KB] 基本的な使い方 .gpInside()を実行すると、画面のサイズや要素の位置を取得し、はみ出していた場合は収まる位置へ移動させます。 $(elem).gpInside(); デモ デモ1 : 基本的なもの Demo 1 画面をクリックすると、クリックした右下にブロックが表示されます。 ブロックがはみ出す場合は座標が調整されます。 TypeでCenterをすると、画面の中央に表示されます。 TypeでContextmenuをするとクリックした右下に表示されますが、はみ出す場合は左や上に表示されます。 デモ2 :コンテキストメニューとダイアログ Demo 2 右クリック等で表示されるコンテキストメニ
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you’ve scrolled past that relevant section. Header… persisting. Couple things to know before we get started: There are many like it, but thi
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか? 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム(メインコンテンツ)</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
iPad, iPhoneではcssのposition:fixedが効かない。これは仕様らしい。これを何とかするにはJavaScriptを使う必要がある。 jQueryを使って簡易的に対応するのは下記のような感じ。 var jMenu = $('#main-menu'); var menuTop = jMenu.position().top; $(window).scroll(function() { jMenu.css('top', $(this).scrollTop() + menuTop + "px"); }); jQuery Scroll Followを使うと綺麗に動いてくれる。 iScrollを使うとposition: fixedっぽく出来るけど、これはscrollするcontentsを指定するので、「この要素だけposition:fixedにしたい」という指定は出来ない(たぶん)
更新履歴 2012-04-27 Ver 0.2.0 再実装し、もろもろ痒いとこを解消しました。詳しくは下記エントリをどうぞ。 一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました 2012-02-09 Ver 0.1.3.1 Firefox の場合、watchPosition パラメータ が true でスクロール状態で画面更新すると固定位置がずれる不具合を修正しました。 IE の場合、水平方向非固定処理が有効にならないケースがある不具合を修正しました。 2011-12-31 Ver 0.1.3 固定表示する要素の位置が変化するケースにも対応しました。Demo 2011-11-05 Ver 0.1.2 IEで、固定表示する要素のmarginがautoの場合、正しく処理されない不具合を修正しました 2011-10-06 Ve
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X's Growl Framework works. Example Usage and Samples: // Sample 1 $.jGrowl("Hello world!"); // Sample 2 $.jGrowl("Stick this!", { sticky: true }); // Sample 3 $.jGrowl("A message with a header", { header: 'Important' }); // Sample 4 $.jGrowl("A message that will live a little longer.", { life:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く