- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
подскажите пожалуйста как реализовать на примере
hxxp://rozetka.com.ua/lenovo_thinkpad_e560_20evs09v00/p13028071/
речь о блоке с Описанием товара
подскажите, что я пропустил (если что лишнее тоже :) )
сделал вроде тоже самое, но текст не разворачивается
в инете много примеров, скрытия/отображения текста, но они все используют разделитель по тексту, т.е. например такой hxxp://fiddle.jshell.net/driver/a2qtjd4r/3/light/
т.е.
текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст
кнопка/ссылка отображения скрытого текста
скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст
скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст
скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст
на сайте розетки же его нет
т.е.
текст текст текст текст текст текст
текст текст текст текст
текст текст текст текст текст текст
кнопка отображения всего скрытого текста в самом конце этого текста
нашел то, за что отвечает в css
в css
a {
text-decoration: none;
outline: none;
}
.detail-tabs-i .text-description-content {
padding-top: 0;
}
.b-rich-text {
font-family: Arial, Helvetica, FreeSans, "Liberation Sans", "Nimbus Sans L", sans-serif;
font-size: 1.07692em;
line-height: 1.42857em;
}
div {
display: block;
}
.text-description-content.box-hide {
overflow: hidden;
max-height: 13em;
position: relative;
}
.description-more-link {
font-size: 1.38462em;
padding-right: 20px;
}
.description-more-link:before {
background-position: 0 -11349px;
width: 14px;
height: 10px;
top: 0.22222em;
right: 0;
}
.xhr, .dotted {
text-decoration: none;
border-bottom: 1px dotted;
}
.novisited:link, .novisited:visited, .xhr:link, .xhr:visited {
color: #3e77aa;
}
.text-description-content.box-hide:before {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 4em;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #fff));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
}
::selection {
background: #666;
color: #fff;
text-shadow: none;
}
скорее всего у блока задана фиксированная высота и есть параметр overflow: hidden; судя по вашей css, что и делает скрытие того, что в блоке не влазит в заданную высоту. а кнопка попросту отменяет overflow: hidden; например.
это я понял, но не могу понять почему не хочет работать :)
глаз замылен наверное
за отображение как я понимаю отвечает description-more-link
в общем ничего не получается... жду подсказки по коду от гуру
/ru/forum/513286
или
"спрятать текст в подкат javascript"
java не хотелось бы, хотелось бы средствами css да и задача стоит не разбивать текст на два фрагмента...
подскажите пожалуйста как реализовать
По Вашей ссылке с розеткой работает javascript
function(event) {По второй ссылке, с CSS, работает активный чекбокс. Так что определитесь уже - либо по первому варианту с JS, либо по второму варианту с активным элементом. Что-то должно реагировать на клик.event.preventDefault();
this.show();
document.fireEvent('descriptionMore')
}
Sitealert
тогда наверное за java от розетки т.к. реализовано без разделителя
не подскажите что-то ещё нужно кроме того что вы написали?
лучше напишите одним постом полную реализацию кода
заранее огромное спасибо !
Я не знаю, что Вы имеете в виду под разделителем, и какие эффекты ещё желаете получить, но простейший вариант такой
"разделитель" имеется в самом коде, т.е. мы текст делим на видимый и невидимый
у вас он присутствует
<p>Текст</p>
<p id="full_text" style="display: none;">скрытый текст</p>
<a href="javascript:show();" id="short_text_show_link" class="novisited description-more-link">
<span class="xhr">Ещё</span></a>
чем мне у розетки и понравилось что:
<p>Текст идет всем куском</p>
<p> а скрытый текст отрезается через css</p>
<a href="#" id="short_text_show_link" class="novisited description-more-link">
<span class="xhr">Ещё</span></a> </section></div>
т.е. нет нужды задумываться от разделении текста и вставки дополнительной строки <p id="full_text" style="display: none;">скрытый текст</p>
вот только загвоздка в том, но не работает "раскрытие" оставшейся скрытой части текста
Не морочьте себе и мне голову. Задуматься над содержанием краткого описания никогда не вредно, чтобы показать посетителю сайта именно то, что его заинтересует.
Как на этой "розетке", так и в вышеприведённом коде текст открывается через javascript и css, просто свойства используются разные. В вышеприведённой функции открывается конкретный элемент текста, а на "розетке" снимается ограничение по высоте текстового блока. И напрасно Вы думаете, что при этом имеют значение теги <p>. Там всё режется произвольно, какой кусок текста вместится, такой и вместится. Примерно так, разница в нюансах: