Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Можно ли "ползунок" использовать вместе с ломанной линией?

Добрый день
Помогите, пожалуйста, понять как можно сделать следующее:

как можно привязать ползунок к кривой линии, т.е. когда его перемещаешь от одной точки к другой предыдущий текст скрывается, а появляется тот, который принадлежит текущей точке.
Ответ: nina_, просто кликать по точкам и всё зачем ползунок, а так при желании и знании можно и видео игру сделать, но нужно ли...
Вопрос: Беда с "самопальным" параллаксом

Собственно что имеем.
Хочу замутить "живой" фон, 4 картинки, 3 из них одинаковой высоты и один самый нижний ~11% от общей высоты всех блоков вместе взятых (+- несколько (даже десятков) пикселей не критично).

Первая картинка с фоном "прибита" к верху сайта.
Получается, что при прокрутке страницы слои фона ниже наезжают на слои, которые находятся выше. Когда страница заканчивается последняя картинка должна быть видима хотя бы на 50%.

Размер для блоков с фоном, как и начальное их расположение, я выбираю относительно высоты документа.
Скелет такой:

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <div class="content_back">
        <section id="top" data-type="background" class="pages">
            
        </section>
        <section id="middle" data-type="background" class="pages">
            
        </section>
        <section id="bottom" data-type="background" class="pages">
            
        </section>
        <section id="foot" data-type="background" class="pages">
             
        </section>
    </div>
</body>
Стиль:

Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#top {
  background: url(parallax/1.gif) no-repeat;
  height: 460px;
  background-position: center 0px;
  z-index: 2;
  top: 0px;
}
 
#middle {
  background: url(parallax/2.gif) no-repeat;
  height: 505px;
  background-position: center 0px;
  z-index: 3;
  top: 260px;
}
 
#bottom {
  background: url(parallax/3.gif) no-repeat;
  height: 1015px;
  background-position: center 0px;
  z-index: 4;
  top: 520px;
}
 
#foot {
  background: url(parallax/4.gif) no-repeat;
  height: 306px;
  background-position: center 0px;
  z-index: 5;
  top: 1150px;
 
}
 
section {margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: fixed;
 -webkit-transition: top 0.5s ease-out 0s;
     -moz-transition: top 0.5s ease-out 0s;
     -o-transition: top 0.5s ease-out 0s;
     transition: top 0.5s ease-out 0s;}
Ну и сам скрипт:

Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 jQuery(document).ready(function(){
//функция, условие 3 блока одной высоты (макс 780), один внизу 11% от общей (макс 300px)
            var min_height = 178;                                                                                   // cons минимальная высота блока
            var page_height = jQuery('#head').height()+jQuery('#content').height()+jQuery('#footer').height();      // zh высота документа
            var block_height = (page_height - (page_height * 0.11)) / 3;                                            // x высота блока
            var y = block_height - min_height;                                                                      // y 
            var shift = y / page_height;                                                                            // сдвиг
 
            jQuery('section#top').css('height', block_height);
            jQuery('section#middle').css('height', block_height);
            jQuery('section#bottom').css('height', block_height);
            jQuery('section#foot').css('height',page_height * 0.11);                                                // Тз текущий отступ элементов от верха страницы
            jQuery('section#middle').css('top', block_height);   
            jQuery('section#bottom').css('top', 2*block_height);    
            jQuery('section#foot').css('top',3*block_height);
            
            var pos2 = block_height;
            var pos3 = 2*block_height;
        var pos4 = 3*block_height;
            var pos = [pos2,pos3,pos4]; 
 
        var tempScrollTop = 0
        var currentScrollTop = 0;
          
            jQuery(window).scroll(function(){
                var pos2 = jQuery('#middle').offset();
                    var pos3 = jQuery('#bottom').offset();
                    var pos4 = jQuery('#foot').offset();
 
                    var scroll = jQuery(window).scrollTop();
                    var pos = [pos2.top,pos3.top,pos4.top]; 
 
                currentScrollTop = jQuery(window).scrollTop();
                if (tempScrollTop < currentScrollTop ) {   //down
                    tempScrollTop = currentScrollTop;
    
                    var pos_new = [pos[0] - shift * scroll - scroll,pos[1] - shift * scroll - scroll,pos[2] - shift * scroll - scroll];
 
                    console.log(pos_new);
                    } else if (tempScrollTop > currentScrollTop ){ //up
                        tempScrollTop = currentScrollTop;
 
                        var pos_new = [pos[0] + shift * scroll - scroll,pos[1] + shift * scroll - scroll,pos[2] + shift * scroll - scroll];
                        console.log(pos_new);
                   }    
 
            jQuery('#middle').css('top',parseInt(pos_new[0]));   
                jQuery('#bottom').css('top',parseInt(pos_new[1]));  
                jQuery('#foot').css('top',parseInt(pos_new[2]));
 
            });
});     
В чем беда. Все движется, НО! По какой то непонятной мне причине величина смещения при скролле страницы вниз больше, чем при скролле вверх. Уже неделю туплю над этим моментом. Может я упустил что то в js коде? Гляньте, думаю тут совершенно ничего непонятно) Но может все же кто нибудь подскажет что дельное. Формулы я почти на 100% уверен что верные. Что то со скролинг функцией не то...

Добавлено через 13 минут
Кстати, эта функция - моя попытка сделать вот эту мою простецкую функцию с параллаксом под любую высоту страницы на сайте, html-вариант чисто фона и скрипта, чтобы представление иметь:
parallax.zip - просто index.html запустить, должно работать. Картинки практически те же, что используются в новой функции, только разного размера.

Возможно кто-то сможет модифицировать эту простую функцию другим методом, вознаграждение гарантирую.

Думаю я тут не все адекватно и понятно описал, ибо мозг истощен полностью этим параллаксом. Спрашивайте, отвечу.
Ответ: Причем, блин, величина сдвига при скроле "перетягиванием" ползунка и при скроле колесиком мыши - разная! Хотя по формуле расчетной должна совпадать...

Добавлено через 9 минут
Ну или может кто подскажет уже готовую функцию parallax, те что я находил на хабре и других ресурсах не подошли.
Вопрос: input type="range" слушатель события.

Добрый день уважаемые. Вот возникла необходимость при изменении значения ползунка производить некий пересчет значений в остальном коде. Подскажите как реализовать. Приведу пример
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Exam</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<input class="corners" type="range" min="1" max="60" step="1" value="48">
<span>show</span>
<script>
  window.onload = function () { 
      var corners = $('.corners'),
	 	 num = $('span');
     var a = corners.val();
$(function(){
	num.text(a);
	$('.corners').change(function(){
  	a = corners.val();
		console.log(a + "  =a");
		num.text(a);

		return a;
   })
})
   
   var showResalt = Number (a);   
   console.log( showResalt + 'my_range');
   var nov = showResalt + 2;
   console.log(nov + "  = nov");

}

</script>
</body>
</html>


необходимо получать значение "a" из функции и затем при его изменении получать новое значение переменной nov. Подскажите, как повесить правильный слушатель события? Я думал через setInterval но что то мне не очень нравится
Добавлю аналог
Ответ:
Сообщение от ksa
Но твой пример в моем варианте не дает ошибок в консоли... При изменении ползунка меняются циферки..
Они изначально там менялись) Вопрос был не о том.
Мне необходимо что б была возможность работать с динамически меняющееся значение переменной "a" которое я получаю из функции.
(привязать значение этой переменной к другой переменой)
Вопрос: Взаимодействие двух ползунков type="range"

Всем добрый день! Подскажите, пожалуйста, как можно изменять значения одного ползунка type="range" в зависимости от значений другого? Очень долго рылась в интернете и на форумах, но либо я плохо ищу, либо не знаю, как это правильно записать, нашла только пример того, что мне нужно

Как на этом сайте, взаимодействие первого и третьего ползунка (только в двустороннем режиме, если можно)

Помогите, пожалуйста, или наставьте на путь истинный с js я немножко дружу, в том плане, если покажете хотя бы пример, то, скорее всего, смогу разобраться

Заранее спасибо за уделённое время!
Ответ: kalabuni, Блин, то, что нужно, спасибо большое))
Вопрос: Как сделать изображение на сайте "фиксированым" и что бы оно не плавало вместе с ползунком?

Код HTML
Код HTML5
1
2
3
4
5
6
7
8
9
<p class="thumb" id="kek">
           
    <a href="#"><img src="http://www.cyberforum.ru/images/3106c7a83858.jpg" width="200" height="400"></a>
     <a href="#"><img src="http://www.cyberforum.ru/images/3106c7a83858.jpg" width="200" height="400"></a>
     <a href="#"><img src="http://www.cyberforum.ru/images/3106c7a83858.jpg" width="200" height="400"></a>
      <a href="#"><img src="http://www.cyberforum.ru/images/3106c7a83858.jpg" width="200" height="400"></a>
       <a href="#"><img src="http://www.cyberforum.ru/images/3106c7a83858.jpg" width="200" height="400"></a>
          
       </p>
CSS
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.thumb img {
 
    border: 2px solid #333333;
  
  left: 130px;
  position: relative;   
  top: 40px;
  
}
 
#kek {
 position:fixed;
 margin: 0px;
 z-index: 2;
 margin-right: auto;
 margin-left: auto;
}
Ответ: Cпаси большое) помогло
Вопрос: Связать input type="range" multiple с инпутами диапазона "от" и "до"


Есть слайдер с двумя ползунками. Помогите, пожалуйста, сделать так, чтобы при движении ползунков менялись значения диапазонов в инпутах.
Слайдер сделан при помощи плагина multirange
На странице 3 таких блока инпутов, все с разными значениями.
Ответ: Yu11949,
может взять нормальный плагин
Вопрос: "Умный" скролл

Всем доброго времени суток!
Уважаемые знатоки, нужна ваша помощь, делаю чат для сайта, все вроде работает, но вот со скроллом проблемы, функция вывода сообщений обновляется каждые 2сек, в функции имеется "прокрутка к последнему сообщению" и вот тут то и проблема, есть проверка, которая должна проверять положение скролла, если он в нижнем положении, то срабатывает scrollTop(...), а когда он выше нижнего положения( пользователь читает старые сообщения ) то эта прокрутка должна отключаться пока пользователь не вернет ползунок в нижнее положение, но скрипт почему то не работает как нужно, отправляя с одного браузера сообщение, в другом прокрутка к последнему сообщению не срабатывает.

За ранее благодарю!

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function load_msg( ) {
        jQuery.ajax({
            type: 'POST',
            url: 'chat/load_msg.php',
            data: 'reg=ok',
            success: function( html ) {
                jQuery( '.view_msg' ).empty( ); //Очистка сообщений перед загрузкой
                jQuery( '.view_msg' ).append( html ); //Загрузка сообщений из php
                if( jQuery( '.view_msg' )[0].scrollTop == jQuery( '.view_msg' )[0].scrollHeight - jQuery( '.view_msg' )[0].clientHeight ) {
                    jQuery( '.view_msg' ).animate({
                        scrollTop: jQuery( '.view_msg' ).prop( 'scrollHeight' ) //Прокрутка к последнему сообщению
                    }, 1000 );
                }
                jQuery( '#text_a' ).val( 'scrollTop: ' +jQuery( '.view_msg' )[0].scrollTop+ ' scrollHeight: ' +jQuery( '.view_msg' )[0].scrollHeight+ ' - clientHeight: ' +jQuery( '.view_msg' )[0].clientHeight );
            }
        });
    }
Ответ: Вопрос решен, админы, плиз удалите тему.
Спасибо.
Вопрос: События ползунка

Здравствуйте. Начал изучать JQuery. Обрабатываю события ползунка range. Хочу, чтобы во время его перемещения менялось значение в текстовом поле. Использую событие .change. Но значение в текстовом поле изменяется только после того, как я отпускаю ползунок. Скажите, пожалуйста, какое событие отвечает именно за перемещение ползунка?

HTML5
1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <script src="jquery-2.2.2.js"></script>
    </head>
    <body>
        <form method="post" action="" id="form_id">
            <input type="text" name="I" id="I">
        <input type="range" min="1" max="500" step="0.5" value="50" id="range_I"> 
        </form>
    </body>
</html>
Javascript
1
2
3
4
5
<script>
    $("#range_I").change(function () {
        I.value=range_I.value;
    });
</script>
Ответ:
Сообщение от Wanderer Andrew
какое событие отвечает именно за перемещение ползунка?
Событие input должно вам подойти.
Вопрос: Вывод значения ползунка

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

HTML5
1
<input id="calc" type="range"  min="1" max="100" value="1">
То есть чтобы отображалось какое значение сейчас выбрано на ползунке, а так же при перемещении его оно изменялось
Ответ:
Сообщение от maxi11115
То есть чтобы отображалось какое значение сейчас выбрано на ползунке, а так же при перемещении его оно изменялось
По поводу ползунка не знаю, но координаты указателя мыши можно... На js, html тут не поможет...
Вопрос: Перемещение ползунка range и отображение элементов

Здравствуйте.

Есть ползунок type="range". При перемещении выводится число.

Как под этим ползунком отображать элементы(несколько) в зависимости от this.value?

Например:
Диапозон от 0 - 1000 шаг 100

Если ползунок на 100
Выводим один элемент
Если ползунок на 200
Выводим второй элемент

и т.д.

Если ползунок возвращаем на место, то элементы пропадают

Элементы в виде четырех ul li
Ответ: Если эти методы применять, то там размеры по умолчанию как бы фиксированные, к тому же все li пилькают.

Так вот как бы сделать чтобы вот я веду ползунок, а появляются один за одним ul li

Добавлено через 2 часа 4 минуты
Т.е. нет ul li, далее начал двигать, отобразил один ul и в нем один li, далее еще двинул ползунок, в этом ul отобразил еще li а страница как бы растет по высоте (т.е. изначально нет этих объектов).