Форум

solunski.d · #21 (**permalink**) 20.08.2015, 01:35

Спасибо, рядом с кнопкой можно поставить span(значок треугольника)
Этот код будет нормальный, для смены значка???

$('.filter_1').scroll(function () {
    if (this.scrollHeight - this.scrollTop === this.clientHeight) {
		$('span').removeClass('glyphicon-triangle-bottom');
        $('span').addClass('glyphicon-triangle-top');
    } else {
		$('span').removeClass('glyphicon-triangle-top');
		$('span').addClass('glyphicon-triangle-bottom');
		
	}
});

рони · #22 (**permalink**) 20.08.2015, 02:08

solunski.d,
достаточно ставить и убирать 1 класс

$('span').toggleClass('стелка вниз', n);

рони · #23 (**permalink**) 20.08.2015, 02:43

solunski.d,

.filter_other1{
     background-color:  #0000FF;

}
.test.filter_other1{
     background-color:  #228B22;

}

$(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.toggleClass('test', !n);
    }
});

   $button.click(function () {
        $ul.stop().animate({
            scrollTop: n ? '+=100' : '-=100'
        }, 1000);
    });
});

solunski.d · #24 (**permalink**) 20.08.2015, 02:50

Все спасибо огромное, теперь дошло!
Смог сделать смену значка туда и обратно.

рони · #25 (**permalink**) 20.08.2015, 03:03

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;
    cursor: pointer;
}
.filter_other1:after{
	content: '\23EC';
    color: red;
    font-size: 23px;
    margin-left: 4px;

}

.test.filter_other1:after{
     content: '\23EB';

}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(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.text( n ? 'вниз':'вверх');
         $button.toggleClass('test', !n);
    }
});

   $button.click(function () {
        $ul.stop().animate({
            scrollTop: n ? '+=100' : '-=100'
        }, 1000);
    });
});
  </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>
    	<span class="filter_other1">вниз</span>



</body>

</html>

solunski.d · #26 (**permalink**) 20.08.2015, 03:05

Спасибо огромное, вот я подправил под свою разметку так, посмотри, хм.. твой вариант по сути тоже хорош, а что лучше?

$(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.html( n ? 'вниз <span class="glyphicon glyphicon-triangle-bottom h-filer_other-icon" aria-hidden="true"></span>':'вверх <span class="glyphicon glyphicon-triangle-top h-filer_other-icon" aria-hidden="true"></span>');
    }
});

   $button.click(function () {
        $ul.stop().animate({
            scrollTop: n ? '+=100' : '-=100'
        }, 1000);
    });
});

рони · #27 (**permalink**) 20.08.2015, 08:28

solunski.d,
чем меньше изменений в html тем быстрее

solunski.d · #28 (**permalink**) 20.08.2015, 11:24

Теперь ясна суть

Форум

Справочник

Discord чат

Курсы javascript