JQuery value slider – nastavení přesného kroku

Tomáš Veselý

verified

21. 8. 2012 15:01:18

Ahoj,

chtěl bych se zeptat, někoho kdo se dobře vyzná v jQuery, jestli by mi poradil, jak nastavit krok jezdce na value slideru.

Mám div ve kterém je 7 sloupců. Pod tímto divem je slider s jezdcem, který bych rád nastavil tak, aby se jezdec posouval přímo pod danným sloupecem.

Bohužel ať se snažím, jak se snažím, nemůžu na nastavení přesného kroku pod sloupec přijít.

viz.: http://skyzone.cz/skript/

Nevíte, kde může být zádrhel? Předem díky, za reakce.

<style>
.demo{float:left;width:514px;}
#slider{width:512px;}
.ui-slider-handle{width:71px !important;margin:0;padding:0;}
#slider_cols{width:511px;height:180px;border:solid 1px #c3c3c3;}
#slider_cols ul{width:100%;height:100%;border: solid 0px c3c3c3;margin:0;padding:0;float:left;}
#slider_cols ul li{margin:0;padding:0;list-style:none;display:inline-block;width:71px;height:100%;float:left;border:solid 1px #c3c3c3;}
#slider_cols ul li a{margin:0;padding:0;border: solid 0px #000;vertical-align:middle;}
.tab-1{display:block;background:#c3c3c3;height:155px;}
.tab-2{display:block;background:#dedede;height:135px;}
.tab-3{display:block;background:#c3c3c3;height:115px;}
.tab-4{display:block;background:#dedede;height:95px;}
.tab-5{display:block;background:#c3c3c3;height:75px;}
.tab-6{display:block;background:#dedede;height:55px;}
.tab-7{display:block;background:#c3c3c3;height:35px;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<script>
	$(function() {
		$( "#slider" ).slider({
			value:1,
			min: 1,
			max: 7,
			step: 1,
			slide: function( event, ui ) {
				$( "#amount" ).val( "$" + ui.value );							
			}
			
		});
		
		$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
	});

$(document).ready(function() {
	
		$('#slider_cols a').each(function(index) {
			
			var height_cols = $(this).height();
			var css_height = 180 - height_cols;
			
			$(this).css('marginTop',css_height);
		});
 	});
	</script>

<div class="demo">

<div id="slider_cols">
        <ul>
            <li><a class="tab-1" href="#tabs-1"></a></li>
            <li><a class="tab-2" href="#tabs-2"></a></li>
            <li><a class="tab-3" href="#tabs-3"></a></li>
            <li><a class="tab-4" href="#tabs-4"></a></li>
            <li><a class="tab-5" href="#tabs-5"></a></li>
            <li><a class="tab-6" href="#tabs-6"></a></li>
            <li><a class="tab-7" href="#tabs-6"></a></li>
        </ul>
    </div>

<p>
        <label for="amount">Donation amount ($50 increments):</label>
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>
    
    <div id="slider"></div>

</div>

</body>

21. 8. 2012 15:01:18

https://webtrh.cz/diskuse/jquery-value-slider-nastaveni-presneho-kroku#reply798950

verified

21. 8. 2012 16:23:08

- Nemáš uzavřenou hlavičku

- Odkaz http://jqueryui.com/themes/base/jquery.ui.all.css je neplatný, použij http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css

- Chybí otevírací tag body

- $(function() {}) je to samé, jako $(document).ready(function() {})

- Slideru nastav margin: 0 36px; a mělo by se to chovat tak jak chceš

21. 8. 2012 16:23:08

https://webtrh.cz/diskuse/jquery-value-slider-nastaveni-presneho-kroku#reply798949

Tomáš Veselý

verified

21. 8. 2012 17:23:21

Děkuji za odpověď. Skript jsem upravil podle vašich instrukcí, ale stále ta pozice jezdce vůbec nesedí :-/.

http://skyzone.cz/skript/

21. 8. 2012 17:23:21

https://webtrh.cz/diskuse/jquery-value-slider-nastaveni-presneho-kroku#reply798948

verified

21. 8. 2012 17:34:25

On taky slider je #slider a ne .ui-slider-handle ;-) Myslel jsem to takhle.

21. 8. 2012 17:34:25

https://webtrh.cz/diskuse/jquery-value-slider-nastaveni-presneho-kroku#reply798947

Tomáš Veselý

verified

21. 8. 2012 19:39:51

Děkuji! Takto byto přesně mělo fungovat. Myslíte, že by to stejné šlo udělat i když #slider bude mít stejnou délku 514px jako .demo?

21. 8. 2012 19:39:51

https://webtrh.cz/diskuse/jquery-value-slider-nastaveni-presneho-kroku#reply798946

verified

21. 8. 2012 20:52:01

Sám o sobě to ten posuvník nepodporuje, ale třeba nějak takhle by se to dalo obejít:

21. 8. 2012 20:52:01

https://webtrh.cz/diskuse/jquery-value-slider-nastaveni-presneho-kroku#reply798945

Pro odpověď se přihlašte.

Prodej Více

👀 Prodám satirickou, fanouškovskou FB stránku obrovským potenciálem 🔥

1 000 Kč

0 příhozů

✅ Prodám rozpracovaný projekt na super doméně – Online tržiště PR článků a linků ❗️ WWW.LINKOVIŠTĚ.CZ ❗️

1 000 Kč

0 příhozů

Prodej domény WOODOO.CZ

4 000 Kč

0 příhozů

Prodám doménu VLASOVESTUDIO.COM

2 000 Kč

0 příhozů

Prodám doménu PRASAK.CZ

2 000 Kč

0 příhozů

Poptávky Více

Koupím Vinted účty s hodnocením

Web scraping / Tvorba procesů v UI Path

Hledám grafika

Jednorázový export faktur z Abra Flexi do Pohody

UI/UX Dizajnér NEEDED!

Pracovní nabídky Více

𝗧𝗲𝘀𝘁 𝗠𝗮𝗻𝗮𝗴𝗲𝗿

Práce z domu, Praha

Pětičlenný tým vývojářů na technologie .NET & React

Hledáme externí grafičku/grafika pro rodinnou firmu MycoMedica.cz

Hradec Králové

Hledáme medior Projektového manažera(ku)/koordinátora(ku)

Práce z domu, Praha

80 000 - 115 000 Kč

Front-end developer/ka / Kodér/ka

Práce z domu, Praha

Nabídky Více

PPC | Google Analytics | Looker Studio

PPC 👨🏻‍💻 | Facebook + Google Ads | ZÁRUKA VRÁCENÍ PENĚZ | 5+ let praxe ✅

LEVNÁ TVORBA WORDPRESS WEBŮ | E-SHOP | SEO | PPC

Nabízím službu manuálního testera vaší stránky,

Kodérské a frontenďácké práce (HTML5,CSS3,jQuery,etc etc)