0
地形の時間間隔を選択する範囲スライダを作成しようとしています。私はほとんどこれを動作させました。実際には宣言を含まない限り動作するバージョンがあります。それ以外の場合、スライダは画像の上に止まります。これはjsfiddleでも同様です。私はおそらくCSSを混ぜたが、いくつかのアドバイスは本当に歓迎されるだろう - 良い解決策が広く適用される可能性があります。画像の下にjqueryuiスライダを配置するにはどうすればいいですか?
jsfiddleがここにありますjsfiddle of timescale selctor
HTML
Current window
<input type="text" name="amount" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
<div class="geoframe">
<div class="sliderpos_inframe">
<div id="geoslider-range"></div>
<img id="tscaleimage" src="http:www.mikrotax.org/Nannotax3/graphics/timescale-narrow-rotated.png"/>
</div>
JS
$(document).ready(function() {
var gettop, getbase;
gettop=12; getbase=50;
$("#geoslider-range").slider({
range: true, min: 0, max: 210,
values: [gettop, getbase ],
slide: function(event, ui) {
$ ("#top").val(ui.values[ 0 ]);
$ ("#base").val(ui.values[ 1 ]);
$("#amount").val(ui.values[ 0 ] + "Ma - " + ui.values[ 1 ] +"Ma");
} });
//output the values
$ ("#top").val($("#geoslider-range").slider("values", 0));
$ ("#base").val($("#geoslider-range").slider("values", 1));
$("#amount").val($("#geoslider-range").slider("values", 0) +
"Ma - " + $("#geoslider-range").slider("values", 1) + "Ma");
});
CSS
/* size of the box and positioning of slider over image */
.geoframe {
width: 850px;
height: 230px;
position: relative;
display: block;
background-color: white;
border: 0 solid yellow;
margin-bottom: 10px;
}
.sliderpos_inframe {
position: absolute;
top: 20px;
bottom: 20px;
left: 25px;
right: 25px;
background-color: white;
}
#tscaleimage {
width: 100%;
position: absolute;
top: 0;
}
/* vertical position */
#geoslider-range .ui-slider {
position: relative;
top: 165;
z-index: 2;
text-align: left;
}
#geoslider-range .ui-slider-handle {
background: url(http:www.mikrotax.org/Nannotax3/graphics/slider4.png) no-repeat;
border: none;
position: absolute;
top: -148px;
margin-left: -17px;
z-index: 3;
width: 35px;
height: 175px;
cursor: default;
outline: 0 none;
}
/* the coloured box indicating range selected */
#geoslider-range .ui-slider-range {
position: absolute;
z-index: 2;
font-size: 2em;
display: block;
border: 0;
background-position: 0 0;
top: 0%;
height: 100%;
}
ノブをもう少し長くしてスケールの終わりまで届くようにする必要があるかもしれません。あなたのデザイナーはそれをできるはずだと思います。 – 82Tuskers
多くの感謝 - 問題を解決しました。私はまた、修正されたバージョンでjsfiddleを更新しました。 NB上部が-60に設定されている場合、スライダは正しい高さです –
適切にテストする直前または直前に話しました。あなたの解決策では、スライダの幅は画像幅に結びついていないので、divの絶対/相対ペアで定義されたボックスの中に入る必要がありますが、正しい軌道に乗っていれば、正しいバージョンが現在フィディ –