Вывод информации при нажатии кнопки читать далее
Ребята, очень прошу о помощи. Есть очень длинная страница, и есть скрипт который скрывает ее часть (еле нашел то, что нужно в данной ситуации). все хорошо, все работает. но как сделать так, чтобы сначала выводилась одна часть страницы, к примеру 1000 px, затем при нажатии кнопки читать далее, следующая часть размером 1000 px и т.д. пока не закончится страница?! Помогите, пожалуйста, очень прошу:)
<script>
$(function(){
if($('#ta').length){
blok_height = Number($('#ta').css('height').replace('px',''));
if(blok_height > 80){
$('#ta').css('max-height','80px');
$('.read-next').show();
}
}
});
$('.read-next').live('click', function(){
if($('#ta').css('max-height') != 'none'){
$('#ta').css('max-height','');
$(this).text('Скрыть');
} else {
$('#ta').css('max-height','80px');
$(this).text('Читать далее...');
}
return false;
});
</script>
<div style="height:'100%'"> <div id="ta" style="overflow:hidden">текст</div> <a class="read-next" style="display:none;" href="#">Читать далее...</a> </div> |
vacuumtrade,
<!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="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}
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>
|
Спасибо большое. То, что нужно. Только вы перепутали значения max и min местами. Но слава богу разобрался. А скажите еще пожалуйста, как сделать, чтобы кнопка "скрыть этот бред" вылазила только в конце страницы?
Пробовал установить значение max и с помощью этого удалось ограничить длину. Но это не подходит, ведь все страницы разной длины. Подскажите, пожалуйста. :-? |
vacuumtrade,
неосилил ваш текст |
рони,
ну, в общем. мне нужно, чтобы кнопка "скрыть этот бред" вылазила только тогда, когда заканчивается текст элемента. |
Цитата:
|
рони,
да. в том варианте в котором вы мне скинули скрипт, он глючил. я поменял местами значение мах и мин, получилось так и работает все хорошо:
<script>
$(function ()
{ var h = 3333, t = $('#more_promocodes'), max = 16100, min = t[0].scrollHeight;
$('.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>
Правда в данном случае, надо устанавливать длину элемента (страницы) в значении max. и здесь я сталкиниваюсь с проблемой, потому что длина каждой страницы разная. если установить немного больше, то остается ненужный кусок. |
vacuumtrade,
мне сложно понять что вы делаите со скриптом и ещё сложнее понять почему нельзя если вам так нужно в максимуме поставить размер страницы ? max = $('html').height() |
рони,
Хорошо. Попробую по-другому. Что изменить в вашем скрипте, чтобы каждый раз, при нажатии кнопки "больше", открывалось 3000 px? |
Цитата:
|
рони,
когда ставлю 3000 туда куда вы сказали, в итоге получается при нажатии кнопки в первый раз, объект уменьшается до значения, заданного в позиции Min(Но это изменить можно и не проблема). В следующий раз, когда нажимаю на кнопку появляется 3000 px. и т.д. пока не заканчивается высота div id="ta", которая была задана через css. проблема в том, что мне не нужно чтобы высота была фиксирована, потому что все страницы разной длины, соответственно длина каждого элемента будет разной. понимаете? |
vacuumtrade,
вы сделайте макет а пока вы описываите чудеса у вас происходящие мне сложно вам что-то подсказать |
рони,
в смысле макет. вы имеете ввиду скриншот? |
vacuumtrade,
посмотрите пост номер 2 -- там макет -- там жмёте далее -- див раскрывается -- если див полностью раскрылся -- надпись сменилась и див можно закрыть -- как у вас на самом деле код я незнаю -- код во втором посте мои догадки - далее сами |
рони,
странно, когда вставляю код сюда, все работает. скажите, есть ли разница между скриптами для php и для html. может данный скрипт некорректно работает у меня, потому что сайт работает на админке wordpress? |
vacuumtrade,
не грузите jquery если оно у вас уже есть - больше добавить нема |
рони,
разобрался в чем проблема. когда данный скрипт работает с текстом, все вообщем хорошо. когда пытаюсь вывести обычные элементы, тоже все ок. но когда вместо текста пытаюсь вывести блок div, который ajaxom подгружает данные из xml таблицы, то все идет наперекосяк. в чем может быть проблема? |
vacuumtrade,
запускать надо скрипт после - ajax или строку 23 пренести в 25 -- может поможет |
рони,
спасибо большое. помогла перестановка строчки:) очень выручили! если вдруг понадобится какая-нибудь помощь - обращайтесь. за мной должок) раньше был копирайтером и не могу сказать что плохим. если вдруг понадобится, могу написать какой-нибудь текст на пару тысяч символов в качестве бонуса. |
еще хотел спросить. можно ли как-то сделать так, чтобы кнопка "скрыть этот бред" при нажатии вела в самый верх страницы? сорри за надоедливость!! и спасибо за помощь:)
|
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 равнялась высоте содержимого? |
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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(function ()
{ var t = $('#ta'), max , min = 0;
$('.read-next').on('click', function (event)
{max = t[0].scrollHeight
var H = t.height();
t.height(H < max ? max : min);
$(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>
|
Использую данный скрипт для сворачивания отзывов, все работает (кроме плавности).
Как изменить скрипт, чтобы при коротком отзыве (например 300 символов или высота блока не превышает например 100px) ссылка свернуть/развернуть не появлялась? |
Andvz24,
может вам хватит варианта по минимальному количеству строк смотреть ещё вариант обрезния строк |
К сожалению данный скрипт не захотел работать в cms
|
Andvz24,
может вы css не ставите? |
css прописал. Выношу скрипт в отдельный файл и не хочет работать (в cms скрипт прописал, подключается с загрузкой страницы). Предыдущий скрипт сразу заработал, но там ссылка явно прописывается, а тут скрипт добавляет
|
Andvz24,
так может у вас один плагин подключен без инициализации или инициализация неправильная ? |
рони,
Извиняюсь за собственную тупость: не совсем понял про плагин. Что я делаю: -переношу скрипт в отдельный файл (только код скрипта), то что перед <body> + код перед </body> -оборачиваю отзывы на сайте в div class="ta" -обязательно css -в шаблоне сайта подключаю сам скрипт (<script src="/bitrix/templates/.default/js/hidden_script.js"></script>) все вот еще один скрипт, но немного не хватает знаний, чтобы изменить его и появилась ссылка скрыть https://jsfiddle.net/rLy7f8r8/4/ |
Цитата:
может попробовать вместо
$(".ta").correctLines({
fullText: true,
maxLine: 4,
moreText: "Открыть все",
lessText: "Свернуть",
afterLength: " "
})
сделать
jQuery(".ta").correctLines({
fullText: true,
maxLine: 4,
moreText: "Открыть все",
lessText: "Свернуть",
afterLength: " "
})
|
рони,
к сожалению не помогло. Может дело в том, что я вырвал 2 части когда и закинул их в один файл, при том, что они как то не последовательно вызываются. Дивы не появляются, надпись тоже "свернуть/развернуть" |
| Часовой пояс GMT +3, время: 22:18. |