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

Prodej webu audiny.cz

5 000 Kč

0 příhozů

Adult Inzerce – pro pracující dívky

9 900 Kč

0 příhozů

Kreativní Omalovánky – prodej digitálních produktů

20 000 Kč

0 příhozů

WatchOnlineBuy.com – Váš kompletní online obchod připraven k použití

200 €

0 příhozů

💸 Srovnavač půjček abpujcky.cz

50 000 Kč

0 příhozů

Poptávky Více

Hledám grafika na úpravu hotového webu

Hledám někoho na správu kampaní FB, Google, grafiku a případně i úpravy webových stránek ve WP (elementor, divi)

Hledám grafika na tvorbu reklamního banneru

Koupím affiliate web, generující příjem

Redesign wordpress webu

Pracovní nabídky Více

VBA, MS Access expert (call on TUESDAY 17. 12., 1000 CZK – 3000 CZK for call)

Brno, České Budějovice, Hradec Králové, Jihlava, Karlovy Vary, Liberec, Olomouc, Opava, Ostrava, Pardubice, Plzeň, Práce z domu, Praha, Ústí nad Labem, Zlín

1 000 - 3 000 Kč

Systémový Administrátor

Software Architect

Hledáme React Native vývojáře na externí spolupráci

Práce z domu, Praha

Python developer

130 000 - 150 000 Kč

Nabídky Více

🔥Programování (Symfony, Node.js, React), Grafika, Soc. Sítě | 350Kč/h

Nabídka na copywriting služby

Inzerce v novinách Nefrit na rok 2025 pro Zlínský kraj

⭐ Akce: napsání 5⭐ pozitivních recenzí pro Vaší firmu/eshop ❗ Pouze za 140Kč/recenze ❗

ŠÉFREDAKTORKA.CZ – Copywriting a obsah na míru