このトピックをしばらく検索しましたが、答えは目の前にあったかもしれませんが、すべてをまとめることができませんでした. 私がやろうとしているのは、セクション領域のようなカスタム スライダーのサイズを変更することです。
フレームワークとしてブートストラップを使用していますが、コンテナー内のコンテンツは絶対配置を使用しており、jQuery 独自の.draggable
機能を使用して管理パネルでランダムな上/左の値が生成されるため、ここで jQuery が最適に機能します。
私はそれをできるだけ基本的なものにしたいと思っています。必要なのは数学だけだと思います。フィドルの例
var h = $(window).height();
var w = $(window).width();
var static_h = $('.static-area').height();
if((h/w) > 800) {
$('#main').css({'margin-top': w/1.2});
}
else {
$('#main').css({'margin-top': w/1.2, 'width':w});
$('.static-area div').css({'width': w/2, 'left':0});
}
この種のソートは機能し、すべての css プロパティを上/左の幅/高さなどに分割できますが、ブラウザーのサイズ変更に合わせてコンテンツが適切に調整されるように、ここで計算を行う方法がわかりません。
ビジュアル デモFIDDLEのクイック フィドルを作成しました
ここでホイールを再作成しようとしているわけではありません。この質問は簡単です。特定の方法でそれを行うつもりはありませんが、現代の慣行では非常に一般的であると確信しているため、かなり一般的な方法です。これに対する答えを見つけるのが難しい唯一の理由は、コンテナー内のコンテンツが完全に配置され、ランダムであるためです。
要約: すべての子の幅、高さ、左、および上の値を使用して計算したいと思います。.resize()
この計算方法はよくわかりませんし、それよりも少し複雑だと思いますが、それが私が求めている原理です。
追記:私は、layersliderプラグインの大ファンです。素晴らしい仕事をしてくれました。レイヤーを好きな位置にドラッグする機能が本当に好きなので、これを研究しようとしています。これはクールで、基本的に必要な.draggable()
のはデータベースだけです。レスポンシブ部分についても調べてみましたが、この関数を含むjQueryは3,000行のコードです(誰かが実際にそれほど多くのコードを書いたとは信じられません.彼らのデモページを見ると、私が話していることがわかります。
アップデート:
var w = $(window).width();
if((w) > 800) {
//Figuring out what to do lol, but nothing for now
}
else {
// Doing this when window is under 800px
$('.sublayer_1 div, .sublayer_1 img').css({'left': w/2, 'width': w});
}
これは私が望むように機能します。もちろん、アドオンする必要がありますが、誰かがもう少し高度なものを書くのを手伝ってくれるでしょうか?
上記のコードが行っていることは、ブラウザーがウィンドウの幅を 2 で割ってサイズを変更するときに、要素の左と幅を変更することです。それが機能する理由は漠然とわかりますが、頭を包み込むことはできません笑数学が嫌い。