Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 19.08.2015, 22:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от solunski.d
то соответственно у кнопки меняется значок и прокручивается вниз.
то есть кнопка телепат?
Ответить с цитированием
  #12 (permalink)  
Старый 19.08.2015, 22:27
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

Я не знаю как это реализовать
Ответить с цитированием
  #13 (permalink)  
Старый 19.08.2015, 22:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

solunski.d,
я тоже - не может кнопка одновременно и вверх и вниз работать -- но можно менять действие кнопки в крайних точках
Ответить с цитированием
  #14 (permalink)  
Старый 19.08.2015, 22:42
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

"но можно менять действие кнопки в крайних точках"
Я и это хотел, я просто не знаю как объяснить уже, я так устал, а работодатель каждый час мне звонить, и говорит "Ну что сделал?"
Ответить с цитированием
  #15 (permalink)  
Старый 19.08.2015, 22:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

solunski.d,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

ul {
  height: 150px;
  list-style: none;
  overflow-y:  hidden;
  margin: 0;
  padding: 0;
  width: 80%;
}
.filter_other1{
    margin: 10px;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
    var $ul = $('ul'),
        $maxScroll = $ul[0].scrollHeight - $ul[0].clientHeight,
        $button = $('.filter_other1'),
        n = true;

   function fn()
   {
     ($ul.scrollTop() >=  $maxScroll || !$ul.scrollTop()) && (n = !n,$button.val(n ? 'вниз':'вверх') )
   }
   $button.click(function () {
        $('ul').stop().animate({
            scrollTop: n ? '+=53' : '-=53'
        }, 1000, fn);
    });



});


  </script>
</head>

<body>

	<ul class="h-filter__ul filter_1">
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox">
			<label for="checkboxG1" class="css-label radGroup1 clr">Горошек</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG2" id="checkboxG2" class="css-checkbox">
			<label for="checkboxG2" class="css-label radGroup1 clr">Клеточка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG3" id="checkboxG3" class="css-checkbox">
			<label for="checkboxG3" class="css-label radGroup1 clr">Линейка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox">
			<label for="checkboxG4" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox">
			<label for="checkboxG5" class="css-label radGroup1 clr">Удило</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG6" id="checkboxG6" class="css-checkbox">
			<label for="checkboxG6" class="css-label radGroup1 clr">Шарм</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG7" id="checkboxG7" class="css-checkbox">
			<label for="checkboxG7" class="css-label radGroup1 clr">Горошек</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG8" id="checkboxG8" class="css-checkbox">
			<label for="checkboxG8" class="css-label radGroup1 clr">Клеточка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG9" id="checkboxG9" class="css-checkbox">
			<label for="checkboxG9" class="css-label radGroup1 clr">Линейка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG10" id="checkboxG10" class="css-checkbox">
			<label for="checkboxG10" class="css-label radGroup1 clr">Узор</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
		<li class="h-filter__list">
			<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
			<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
		</li>
	</ul>
    <input name="" type="button" value="вниз" class="filter_other1">



</body>

</html>
Ответить с цитированием
  #16 (permalink)  
Старый 19.08.2015, 23:05
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

Спасибо огромное,

Последний раз редактировалось solunski.d, 19.08.2015 в 23:24.
Ответить с цитированием
  #17 (permalink)  
Старый 20.08.2015, 00:20
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

И опять какая то проблема...
Если зайти с Chrome
Первый фильтр, то кнопка не меняет свойства
А в Firefox все отлично работает.
В чем может быть проблема?
Игрался с высотой у элемента ul, если поставить какое нибудь другую высоту может за работать, а может и нет, от чего это зависит??

Последний раз редактировалось solunski.d, 20.08.2015 в 03:22.
Ответить с цитированием
  #18 (permalink)  
Старый 20.08.2015, 01:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

solunski.d,
хром торопится, попробуй так или перепиши на свой вариант 2 поста

$(window).load(function(){
    var $ul = $('.filter_1'),
        $maxScroll = $ul[0].scrollHeight - $ul.outerHeight(true),
        $button = $('.filter_other1'),
        n = true;

   function fn()
   {
     ($ul.scrollTop() >=  $maxScroll || !$ul.scrollTop()) && (n = !n,$button.val( n ? 'вниз':'вверх') ) ;

   }
   $button.click(function () {
        $('.filter_1').stop().animate({
            scrollTop: n ? '+=100' : '-=100'
        }, 1000, fn);
    });
});
Ответить с цитированием
  #19 (permalink)  
Старый 20.08.2015, 01:14
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

Теперь заработало как надо, спасибо большое, мой вариант... громоздкий, бредовый...
Ответить с цитированием
  #20 (permalink)  
Старый 20.08.2015, 01:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

solunski.d,
так будет проще
$(function(){
    var $ul = $('.filter_1'),
        $button = $('.filter_other1'),
        n = true;
   $ul.scroll(function () {
    if (this.scrollHeight - this.scrollTop === this.clientHeight || !this.scrollTop) {
         n = !n;$button.val( n ? 'вниз':'вверх');
    }
});

   $button.click(function () {
        $ul.stop().animate({
            scrollTop: n ? '+=100' : '-=100'
        }, 1000);
    });
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить ширину и высоту элемента див sanhai Элементы интерфейса 8 13.11.2018 18:04
.height() почему-то считает высоту элемента неправильно adelante jQuery 11 01.08.2012 15:38
Можно ли средствами JS узнать высоту скрытого элемента? ацкий Общие вопросы Javascript 7 24.08.2011 19:07
Браузер не успевает определить высоту вновь созданного через XMLHttpRequest элемента Lockpickup AJAX и COMET 17 25.04.2011 17:58
Вычислить реальную ширину элемента без его отрисовки archytector Элементы интерфейса 7 12.01.2011 09:26