画像の下にjqueryuiスライダを配置するにはどうすればいいですか？

地形の時間間隔を選択する範囲スライダを作成しようとしています。私はほとんどこれを動作させました。実際には宣言を含まない限り動作するバージョンがあります。それ以外の場合、スライダは画像の上に止まります。これは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>

$(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%; 
}

出典

2017-08-30 Jeremy Young

マークアップとCSSを変更しました。

HTML

<body> 
    <b>AGE WINDOW TO SEARCH WITHIN</b> 
    <p>Current window 
     <input type="text" name="amount" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> 
     <div class="geoframe"> 
      <div class="sliderpos_inframe"> 
       <img id="tscaleimage" src="http:www.mikrotax.org/Nannotax3/graphics/timescale-narrow-rotated.png" /> 
      </div> 
     </div> 
     <div id="geoslider-range"></div> 
    </p> 
</body>

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 { 
    position: relative; 
    top: -50px; 
    text-align: left; 
    left: 25px; 
} 

#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%; 
}

これはあなたのために働く希望を：上下両方にそれらを見つけるしてください。

結果は次のとおりです。

PS：私は本当に、スライダーのアプリケーションを気に入りました！：）

出典

2017-08-30 14:50:59 82Tuskers

ノブをもう少し長くしてスケールの終わりまで届くようにする必要があるかもしれません。あなたのデザイナーはそれをできるはずだと思います。 – 82Tuskers

多くの感謝 - 問題を解決しました。私はまた、修正されたバージョンでjsfiddleを更新しました。 NB上部が-60に設定されている場合、スライダは正しい高さです –

適切にテストする直前または直前に話しました。あなたの解決策では、スライダの幅は画像幅に結びついていないので、divの絶対/相対ペアで定義されたボックスの中に入る必要がありますが、正しい軌道に乗っていれば、正しいバージョンが現在フィディ –

画像の下にjqueryuiスライダを配置するにはどうすればいいですか？

答えて

関連する問題