vacuumtrade,
:cray:
if(H == max){H = min;$('body,html').animate({scrollTop: 0}, 600) }
|
рони,
целый день тупил, а сейчас так вообще...на какую строчку вставлять-то? когда вставляю между одной из 26-31, то получается что вверх скролит на предпоследнем клике, все еще на кнопке "читать далее". а мне нужно чтобы вверх скролило при клике на 'Скрыть этот бред'. |
vacuumtrade,
добавить в строку 27 $('body,html').animate({scrollTop: 0}, 600) |
vacuumtrade,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#ta{
background:#3C3;
color:#66F;
height:100px;
width:100%;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(function ()
{ var h = 50, t = $('#ta'), max = t[0].scrollHeight, min = 22;
$('.read-next').on('click', function (event)
{
var H = t.height();
if(H == max){H = min;$('body,html').animate({scrollTop: 0}, 600) }
else if (H + h > max){H = max}
else {H += h};
t.height(H);
$(this).text(H == max ? 'Скрыть этот бред' : 'Читать далее...')
return false
})
})
</script>
</head>
<body>
<div style="height:100%; margin-top: 1000px">
<div id="ta" style="overflow:hidden">
Товарищи! консультация с широким активом требуют
определения и уточнения существенных финансовых и
административных условий. Не следует, однако
забывать, что укрепление и развитие структуры
влечет за собой процесс внедрения и модернизации
направлений прогрессивного развития.
Разнообразный и богатый опыт начало повседневной
работы по формированию позиции позволяет оценить
значение форм развития. Товарищи! начало
повседневной работы по формированию позиции
позволяет выполнять важные задания по разработке
форм развития. Товарищи! сложившаяся структура
организации требуют от нас анализа систем
массового участия. Таким образом новая модель
организационной деятельности позволяет оценить
значение позиций, занимаемых участниками в
отношении поставленных задач. Разнообразный и
богатый опыт постоянное
информационно-пропагандистское обеспечение нашей
деятельности способствует подготовки и
реализации модели развития
</div><a class="read-next" href="#">Читать далее...</a>
</div>
</body>
</html>
|
рони,
сейчас оно сразу скролит вверх, при нажатии на кнопку читать далее...:( |
vacuumtrade,
здесь скролит? |
рони,
здесь все хорошо работает. наверное опять проблема с блоком, подгружаемым аяксом. |
Скажите пожалуйста,
1. Как добавить к скрипту в посте №2 из данной темы еще две кнопки "Показать все", "Скрыть все", но так, чтобы при полном раскрытии они исчезали? 2. Как сделать так, чтобы максимальная высота определялась с учетом содержимого? То есть если изначально есть
<div style="height:'100%'">
<div id="ta" style="overflow:hidden">
<div>Товарищи!</div>
<div>Граждане!</div>
<div>Белые мишки!</div>
</div>
<a class="read-next" href="#">Читать далее...</a>
</div>
А стало:
<div style="height:'100%'">
<div id="ta" style="overflow:hidden">
<div>Товарищи!</div>
<div style="display:none">Граждане!</div>
<div style="display:none">Белые мишки!</div>
</div>
<a class="read-next" href="#">Читать далее...</a>
</div>
То высота #ta равнялась высоте <div>Товарищи!</div>? Буду очень признателен за помощь. |
chelfenix,
представляешь не осилил речей твоих :) |
В начале темы было предложено решение
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#ta{
background:#3C3;
color:#66F;
height:100px;
width:600px;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(function ()
{ var h = 50, t = $('#ta'), max = t[0].scrollHeight, min = 22;
$('.read-next').on('click', function (event)
{
var H = t.height();
if(H == max){H = min}
else if (H + h > max){H = max}
else {H += h};
t.height(H);
$(this).text(H == max ? 'Скрыть этот бред' : 'Читать далее...')
return false
})
})
</script>
</head>
<body>
<div style="height:'100%'">
<div id="ta" style="overflow:hidden">
Товарищи! консультация с широким активом требуют
определения и уточнения существенных финансовых и
административных условий. Не следует, однако
забывать, что укрепление и развитие структуры
влечет за собой процесс внедрения и модернизации
направлений прогрессивного развития.
Разнообразный и богатый опыт начало повседневной
работы по формированию позиции позволяет оценить
значение форм развития. Товарищи! начало
повседневной работы по формированию позиции
позволяет выполнять важные задания по разработке
форм развития. Товарищи! сложившаяся структура
организации требуют от нас анализа систем
массового участия. Таким образом новая модель
организационной деятельности позволяет оценить
значение позиций, занимаемых участниками в
отношении поставленных задач. Разнообразный и
богатый опыт постоянное
информационно-пропагандистское обеспечение нашей
деятельности способствует подготовки и
реализации модели развития
</div><a class="read-next" href="#">Читать далее...</a>
</div>
</body>
</html>
В нем есть сслыка/кнопка <a class="read-next" href="#">Читать далее...</a> Она открывает #ta частями, а когда блок показан полностью, текст меняется на "Скрыть этот бред", а нажатие на него снова сворачивает #ta. Хотелось бы добавить <a class="read-all" href="#">Открыть все</a>. По нажатию сразу разворачивает #ta. Если #ta развернут - пропадает. <a class="roll-up" href="#">Свернуть все все</a>. По нажатию сворачивает #ta. Если #ta развернут - пропадает. Далее. Высота #ta получается фиксированной и если после загрузки страницы в нем скрыть часть контента, то тогда получается вот такая пустота http://prntscr.com/72jn4d Может ли этого избежать и сделать так, чтобы максимальная высота #ta равнялась высоте содержимого? |
| Часовой пояс GMT +3, время: 16:06. |