問題タブ [jquery-isotope]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - 同位体を使用してアイテムを再レイアウトしますが、構造が維持されていないようです
私はアイソトープを少し http://isotope.metafizzy.co/demos/relayout.html で遊んでいて、固定サイズのままで、常に6つの小さいアイテムを持ち、フィットするように再シャッフルする親コンテナーを作成しようとしています。 7番目に大きいアイテム。
これが私がこれまでjsfiddleに持っているものです http://jsfiddle.net/pedalpete/LGBg6/
私が望んでいたのは、任意のブロックをクリックした後、任意の1行の小さいブロックの総数が3になることです。
何らかの理由で、user .isotope('resize')を使用するか、または私が行っているように同位体を再作成して再作成すると、一番上の行に3より大きい数値が表示されるため、アイテムが均等に並べ替えられません。
頼りにした後の配置はやや静的になると思いました。同位体をバインディングボックスの幅と高さのパラメータに従わせる方法はありますか?
internet-explorer - CSS3 トランジション、jQuery、および Google Fonts でのフォント レンダリングの問題
Firefox では問題ありません。画像は次のとおりです。
http://cl.ly/3R0L1q3P1r11040e3T1i
Safari では、テキストのレンダリングが不十分です。
http://cl.ly/0a1101341r2E1D2d1W46
IE7 & IE8 ではもっとひどいのですが、写真がありません。ごめん :(
Isotope jQuery プラグインを使用していますが、CSS3 トランジションが原因でフォント レンダリングが低下しているようです。
Google Font API も使用しています。
Isotope の CSS トランジションは次のように記述されます。
これについて何か助けていただければ幸いです。Firefoxで見栄えがします!
ありがとう!
jquery - jquery プラグイン Isotope のコールバック
展開可能なアイテムで同位体 ( http://isotope.metafizzy.co ) を使用しています。新しく展開されたアイテムに自動的にスクロールできるように、ScrollTo を使用したいと思います。
私は最初に、次のような reLayout メソッドでコールバックを使用しようとしました。
origin は、クリック ハンドラから「this」を配置する変数です。
残念ながら、私は常にオブジェクトの古い位置を取得します..
実際、コールバックが呼び出されるのが早すぎるのか、それとも jQuery オブジェクトを保存するとコピーや「ポインター」のようになるのか理解できないのかわかりません;-)
何か考えはありますか?
編集:アニメーションが終了する前にコールバックが呼び出されることを確信したので、私の質問は次のようになります:アニメーションが終了したらどうすればよいですか?
jquery - .isotope('reLayout') について
このようなもの:
.isotope('reLayout') を使用して画像ページを作成したい。GOOGLE のロゴは "$(this).animate" を使用し、JQUERY のロゴは "$(this).css" を使用しています。それらをクリックしてみてください。問題は、GOOGLE のロゴ the.animate が機能せず、反対側の GOOGLE をクリックし、JQUERY thes.css が正しいことです。どうすれば修正できますか?
jquery - jQuery 同位体:
配置をそのままにして、要素をクリックできないようにする方法はありますか? ここでデモ。
の代わりに別のクラスを追加することで.element
、ポジショニングを失います。
この問題を修正する場所 (マークアップ、css、または jquery 部分) がわからないため、特定のコード例を追加していないことをお詫びします。
jquery - jQueryアイソトープChromeのバグの可能性?
私はjQueryIsotopeを使用して、マルチ幅マルチハイトグリッド(等しい比率)のスペースを埋めています。
グリッドは、ソート後にIsotopeに戻るボタンを備えたui-sortableを使用してソートされます。空のブロックを残すソート順がいくつかあります。アイソトープを使用してスペースを埋めるにはどうすればよいですか?
私は複数の同位体レイアウト方法を試しました。
http://jsfiddle.net/zdSYG/41/を参照してください
うだて:
望ましい効果はFirefox4、IE 8および9で達成されますが、問題はGoogle Chrome(最新バージョンの安定チャネル)にあるようです。
クロム:
Firefox 4:
jquery - jQueryアイソトープ組積造レイアウトアニメーションが失敗する:(
このテストサイトでjQueryIsotopeの石積みレイアウトを機能させようとしています:http: //make.truliablog.com/test-filters
正しく並べ替えられているように見えますが、ウィンドウのサイズを変更してブロックを調整したときのアニメーションが機能していません。この問題を解決するにはどうすればよいですか?
関連するjQueryコードは次のとおりです。
javascript - 同位体にロードする前にアイテムをフィルタリングする方法
同位体のフィルター機能を利用しています。私が書いた:
2 か所:
問題は、ハッシュされたリンクをクリックするか、ハッシュ付きの URL を入力するたびに、ブラウザが最初にすべての項目をロードし、後でフィルタリングして除外することです。私が欲しいのは:ページはフィルタリングされたアイテムのみをロードします。
jquery - jQueryアイソトーププラグインを使用して幅と高さを設定する
jQuery Isotopeプラグインを使用していますが、機能していますが、マージンを認識できないようです。
Firebugでマージンが適用されていることがわかりますが、アイテムはマージンとちょうど重なっています(アイソトープは絶対位置を使用しているためだと思います)。
私は以下を使用して幅を簡単に機能させました:
しかし、高さを機能させる方法がわかりませんでした(rowHeightを石積みで試しました。masonryHorizontal)。
使用する幅と高さを同位体に伝えるにはどうすればよいですか?
ありがとう