Форум

Tyoma5891 · #1 (**permalink**) 26.02.2016, 18:18

Добрый день, всем!
такая проблема есть у меня слайдеры

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>slider demo</title>
  
   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
      <link href="style.css" rel="stylesheet" type="text/css"/>
       <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<style>

  #slider0, #slider1 { margin: 10px; width: 300px; }

    </style>
</head>
<body>



<div id="slider0"></div>



<div id="slider1"></div>

<script>

 var sliders = $( "#slider0, #slider1" );

sliders.slider(

   {
   orientation: "vertical",
   slide: function( event, ui ) {

   var i =  sliders.index(this);



   i ^= 1;

   $("#slider"+i+ " .ui-slider-handle").css("left", (ui.value)+"%");


     }

 

   }

);



</script>

</body>

</html>

как мне сделать чтобы заставить их работать вертикально?
orientation: "vertical", не то тут не помагает. Признаюсь этот код
var i = sliders.index(this);

i ^= 1;

$("#slider"+i+ " .ui-slider-handle").css("left", (ui.value)+"%"); нашел здесь на форуме...
заранее спасибо

рони · #2 (**permalink**) 26.02.2016, 19:35

Tyoma5891,
наверно height: 300px; а не

Сообщение от Tyoma5891

width: 300px; }

и убрать

Сообщение от Tyoma5891

нашел здесь на форуме...

или обьяснить зачем вам оно надо

рони · #3 (**permalink**) 26.02.2016, 20:14

Tyoma5891,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slider demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <style type="text/css">
  body{
    background-color:#EEE8AA;
  }

  #slider0,#slider1{
    margin:10px;
    width:8px;
    height:300px;
    float:left;
    background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
    background-image:-o-linear-gradient(left,#FFD700,#FF4500);
    background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
    background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
    background-image:linear-gradient(to right,#FFD700,#FF4500);
  }

  .ui-slider-handle{
    border-radius:50%;
    position:relative;
    font-size:10px;
    display:block;
  }

  .ui-slider-vertical .ui-slider-handle{
    padding-top:8px;
    left:-.6em;
    background-color:transparent;
    border:4px solid #D2691E;
    background-image:none;
    margin-bottom: -1.2em;
  }

  :focus{
    outline:0;
    border:0;
  }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
</head>
<body>
  <div id="slider0"></div>
  <div id="slider1"></div>
<script>
var sliders = $("#slider0, #slider1");
sliders.slider({
    orientation: "vertical",
    value: 50,
    slide: function(event, ui) {
        var i = sliders.index(this);
        i ^= 1;
        $("#slider" + i).slider("option", "value", 100 - ui.value)
    }
});
  </script>
</body>
</html>

Tyoma5891 · #4 (**permalink**) 26.02.2016, 20:21

ой извините отправил и не заметил Ваш ответ...

Tyoma5891 · #5 (**permalink**) 26.02.2016, 23:55

Спасибо Вам огромное, Вы очень помогли все работает теперь как надо
зы карму плюсанул

Tyoma5891 · #6 (**permalink**) 01.03.2016, 17:02

Добрый день, всем!
извините а не подскажите как мне к моим этим слайдерам двум привязать тултип по типу как тут http://jsfiddle.net/j08691/bEze7/1/
чтобы отображалось у обоих слайдеров, что-то у меня не выходит никак, заранее благодарен...

var slidersw = $( "#sliderw0, #sliderw1" );
 var initialValue = 870;
 var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
});
slidersw.slider({
    
    range: "min",
      min: 470,
      max: 1920,
      value: initialValue,
	   create: function( event, ui ) {
   tooltip.text(initialValue);
	
    },
   slide: function( event, ui ) {
   tooltip.text(ui.value);
   var i =  slidersw.index(this);
   i ^= 1;
	$("#sliderw" + i).slider("option", "value", ui.value)
	
	$( "#door_w" ).val( ui.value );
	
	$.post('action.php', { sliderw: ui.value }, result_sliderw );
	
    }
}).find(".ui-slider-handle").append(tooltip);

в таком виде оно меняет тултип тока во втором слайдере а первый не меняет...

Tyoma5891 · #7 (**permalink**) 01.03.2016, 18:34

есть у кого-то какие-то мысли?
уточню, мой вопрос относился как продолжение к примеру рони, этому:

<!DOCTYPE html>
02
<html lang="en">
03
<head>
04
  <meta charset="utf-8">
05
  <title>slider demo</title>
06
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
07
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
08
  <style type="text/css">
09
  body{
10
    background-color:#EEE8AA;
11
  }
12
 
13
  #slider0,#slider1{
14
    margin:10px;
15
    width:8px;
16
    height:300px;
17
    float:left;
18
    background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
19
    background-image:-o-linear-gradient(left,#FFD700,#FF4500);
20
    background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
21
    background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
22
    background-image:linear-gradient(to right,#FFD700,#FF4500);
23
  }
24
 
25
  .ui-slider-handle{
26
    border-radius:50%;
27
    position:relative;
28
    font-size:10px;
29
    display:block;
30
  }
31
 
32
  .ui-slider-vertical .ui-slider-handle{
33
    padding-top:8px;
34
    left:-.6em;
35
    background-color:transparent;
36
    border:4px solid #D2691E;
37
    background-image:none;
38
    margin-bottom: -1.2em;
39
  }
40
 
41
  :focus{
42
    outline:0;
43
    border:0;
44
  }
45
  </style>
46
 
47
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
48
</script>
49
</head>
50
<body>
51
  <div id="slider0"></div>
52
  <div id="slider1"></div>
53
<script>
54
var sliders = $("#slider0, #slider1");
55
sliders.slider({
56
    orientation: "vertical",
57
    value: 50,
58
    slide: function(event, ui) {
59
        var i = sliders.index(this);
60
        i ^= 1;
61
        $("#slider" + i).slider("option", "value", 100 - ui.value)
62
    }
63
});
64
  </script>
65
</body>
66
</html>

рони · #8 (**permalink**) 01.03.2016, 19:04

Tyoma5891,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slider demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <style type="text/css">
  body{
    background-color:#EEE8AA;
     position: relative;
  }

  #slider0,#slider1{
    margin:10px;
    width:8px;
    height:300px;
    float:left;
    background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
    background-image:-o-linear-gradient(left,#FFD700,#FF4500);
    background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
    background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
    background-image:linear-gradient(to right,#FFD700,#FF4500);
  }
  #slider0{
    margin-left: 50px;
  }

  .ui-slider-handle{
    border-radius:50%;
    position:relative;
    font-size:10px;
    display:block;
  }

  .ui-slider-vertical .ui-slider-handle{
    padding-top:8px;
    left:-.6em;
    background-color:transparent;
    border:4px solid #D2691E;
    background-image:none;
    margin-bottom: -1.2em;
  }

  :focus{
    outline:0;
    border:0;
  }
  .show0, .show1{
       text-align:  right;
       position:  absolute;
       width: 30px;
       bottom: 50%;
       left: -40px;
    }
  .show1 {
    left : 12px;
  }

  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
</head>
<body>
  <div id="slider0"><div class="show0">50</div></div>
  <div id="slider1"><div class="show1">50</div></div>
<script>
var sliders = $("#slider0, #slider1"), fn =  function(event, ui) {
        var i = sliders.index(this);
        var bottom = $(ui.handle).css("bottom");
        $(".show"+ i).html(ui.value).css({bottom :  bottom });
        i ^= 1;
        $("#slider" + i).slider("option", "value", 100 - ui.value);

    };
sliders.slider({
    orientation: "vertical",
    value: 50,
    change: fn,
    slide: fn
});
  </script>
</body>
</html>

Tyoma5891 · #9 (**permalink**) 02.03.2016, 14:36

Спасибо большое, как всегда выручили, да по слайдерам еще надо учится)

Форум

Справочник

Discord чат

Курсы javascript