ブラウザ/ウィンドウのサイズ変更でstellar.jsを再初期化して要素のオフセットを再調整する方法はありますか?stellar.jsはウィンドウ上の要素オフセットを再調整できますか?
答えて
ちょっと酔っ払った後、私はこれを考え出した。私の場合、私は私の星の要素を含む 'スライド'を持っており、ビューポートの全幅/高さにサイズが設定されています。私はタブレットの向きを変更するためにサイズを変更する必要がありました。
$(window).resize(function(){
winHeight = $(window).height();
$("#scrollWrapper > div").height(winHeight);
// Find out all my elements that are being manipulated with stellar
var particles = $(window).data('plugin_stellar').particles;
// Temporarily stop stellar so we can move our elements around
// data('plugin_stellar') let's me access the instance of stellar
// So I can use any of its methods. See stellar's source code
$(window).data('plugin_stellar').destroy();
$.each(particles, function(i, el){
// destroy() sets the positions to their original PIXEL values.
// Mine were percentages, so I need to restore that.
this.$element.css('top', '');
// Once the loop is finished, re-initialize stellar
if(particles.length - 1 == i){
$(window).data('plugin_stellar').init();
}
});
});
それは要素が左/トップのための彼らの元の画素値に設定し得ることを問題ではない場合は、あなただけの他の後&のinit 1を破壊呼び出すことができます。
$(window).data('plugin_stellar').destroy();
$(window).data('plugin_stellar').init();
あなたの場合要素(すなわち、$.stellar();
の代わりに$("#element").stellar();
)に星をインスタンス化して、「window」をセレクタに置き換えます。あなたが水平方向の配置(それは垂直サイトだと仮定した場合)に問題がある可能性がありますように
まず第一に、それが聞こえます。もしそうなら、それはあなたが唯一の水平方向のスクロールを無効にする必要があると考えられます。これで問題が解決しない場合は
$.stellar({
horizontalScrolling: false
});
、Stellar.jsはあなたがプラグインを更新することを可能にする文書化されていない機能があります。例えば
、あなたがこのようStellar.jsを使用と仮定してみましょう:あなたは次のようにそれを更新することができ
$.stellar();
:
$.stellar('refresh');
ので、サイズ変更でそれをリフレッシュするために、あなたが行うことができます
$(window).resize(function() {
$.stellar('refresh');
});
うまくいけば、これはすべてあなたのために修正されるはずです。
まさに私が探していたもの! – hjuster
「更新」オプションありがとうございます:) –
Iはまた、ロケーションバーが再び見えるようになるときに、下にスクロールするときのFirefox/ChromeはWebViewのサイズを変更により引き起こされる可能性がモバイルに奇数オフセットを気づきましたか?
あなたの質問への答えはdocumentationのセクションにある「設定のすべて」:
// Refreshes parallax content on window load and resize
responsive: false,
だから、これはデフォルトではfalseです。これを有効にするには、...本当の問題がある.stellar({responsive:true})
を使用する理由これは、デフォルトでは無効になっているのですか? iOSを除いて私が気づいていた問題を修正するように見えました。
- 1. スクロールバーのオフセットに調整しますか?
- 2. Stellar.jsの要素が動かないのはなぜですか?
- 3. 要素を更新した後にjava.util.PriorityQueueを再調整する
- 4. このコードは再調整できますか?
- 5. 2つの要素の間の要素のサイズを調整します
- 6. wxPythonでウィンドウを調整するListCtrl
- 7. ウィンドウ上部をオフセットする方法50%
- 8. Expressはミドルウェアをどのように再調整しますか?
- 9. グローバル要素定義をローカル要素定義で上書きできますか?
- 10. 動的な先行ゼロのデータセットの要素を調整する
- 11. は、相続人は、ブラウザの再調整
- 12. 要素の高さを自動的に調整する方法
- 13. リサイズウィンドウでjCarouselLiteを再適用または調整する
- 14. アンドロイドのTimerを再調整する
- 15. 変更後のウィンドウの調整
- 16. Kurento Media Serverでの再調整
- 17. IE6は私の要素に大きな左オフセットを追加しましたか?
- 18. html5 canvas要素の変換を再利用できますか?
- 19. 親ウィンドウから子レイヤのウィンドウ要素に要素値を送る方法は?
- 20. ストーリーボード上のUITableViewのy値をプログラムで調整します。
- 21. ウェブページにあるすべての要素を調整する方法は?
- 22. Javascriptで新しいウィンドウを開き、そのウィンドウ内の要素をクリックできますか?
- 23. 動的ウィンドウのサイズを調整するには?
- 24. GNU ScreenとVim:マウスで分割ウィンドウのバッファサイズを調整する
- 25. inkcanvasを左上に調整する
- 26. 可視性を調整するとdiv要素が点滅します
- 27. Jquery Mobileでボタンのパディングを調整できますか?
- 28. Androidのボタンの境界を調整できますか?
- 29. グラフ上にテキスト要素や線を使用できますか?
- 30. mobilesubstrateの調整で助けが必要
私はここでかなり正確な状況にあったが、これはありがとう!これは機能のいくつかの並べ替えの機能として、ボックスのリフレッシュは、このインスタンスでは助けにはならない、私はそれがパーセントを使用すると何かを持っていると思うように含める必要があります。 – AlexKempton