Перейти к содержанию
bowandtie

Как убрать текст под <cut> или readmore

Рекомендуемые сообщения

Добрый день, уважаемые форумчане!

 

Заинтересовал блок с текстом на главной странице сайта wildberries (см. чуть выше footer).

 

ce1957544dbc.png

 

Получается, что текст скрывается градиентом и при желании раскрывается по кнопке "Читать далее". Если css стили можно вытащить через просмотр кода, то скрипт кнопки достать не удалось.

 

Как думаете, как заставить кнопку переключать свойства css, чтобы убирался градиент и открывался полный текст?

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а зачем кнопка... а если по hover сделать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Кнопкой выглядит привычней что-ли....хотя hover - идея неплохая.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В общем, отвечаю на свой же вопрос.

 

Вставляем исходный код в модуле "Приветствие"

<div class="text_block-wrapper">
<div class="text_block" id="box2" style="height: 170px;">
<h2 style="margin-bottom: 10px;">Заголовок</h2>

<p style="text-align: justify; margin-bottom: 10px;">Текст</p>

</div>

<div class="text_block-overlay" id="box" style="display: block;"> </div>
<a href="#" id="toggler">Читать далее</a> </div>

Чуть ниже в этом же тексте или в отдельном файле нужно вставить скрипт:

<script type="text/javascript">
window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('box', this);
        downbox('box2', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
		toggler.innerHTML = 'Закрыть';
	}
	else {
		div.style.display = 'block';
		toggler.innerHTML = 'Читать далее';
	}
}
function downbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.height == '170px') {
		div.style.height = 'auto';
		toggler.innerHTML = 'Закрыть';
	}
	else {
		div.style.height = '170px';
		toggler.innerHTML = 'Читать далее';
	}
}
</script>

В css файле шаблона вставляем свойства:

.text_block-wrapper {
    margin: 25px auto 25px;
}
.text_block {
    padding: 3px 9px 3px 0;
    font-size: 12px;
    height: 170px;
    overflow: hidden;
}
.text_block-overlay {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffffff');
    background: -webkit-linear-gradient(rgba(255,255,255,0),#fff);
    background: -o-linear-gradient(rgba(255,255,255,0),#fff);
    background: linear-gradient(rgba(255,255,255,0),#fff);
    height: 145px;
    margin: -145px 9px 5px 0;
    position: relative;
    z-index: 10;
}

Думаю, можно сделать изящнее код, но у меня работает и так.

 

В итоге, мы получаем описание магазина, как на главной странице wildberries c эффектом градиента и скрытия текста. Полезно для SEO и удобно для пользователя.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 17.11.2015 в 13:43, bowandtie сказал:

В общем, отвечаю на свой же вопрос.

 

Вставляем исходный код в модуле "Приветствие"


<div class="text_block-wrapper">
<div class="text_block" id="box2" style="height: 170px;">
<h2 style="margin-bottom: 10px;">Заголовок</h2>

<p style="text-align: justify; margin-bottom: 10px;">Текст</p>

</div>

<div class="text_block-overlay" id="box" style="display: block;"> </div>
<a href="#" id="toggler">Читать далее</a> </div>

Чуть ниже в этом же тексте или в отдельном файле нужно вставить скрипт:


<script type="text/javascript">
window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('box', this);
        downbox('box2', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
		toggler.innerHTML = 'Закрыть';
	}
	else {
		div.style.display = 'block';
		toggler.innerHTML = 'Читать далее';
	}
}
function downbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.height == '170px') {
		div.style.height = 'auto';
		toggler.innerHTML = 'Закрыть';
	}
	else {
		div.style.height = '170px';
		toggler.innerHTML = 'Читать далее';
	}
}
</script>

В css файле шаблона вставляем свойства:


.text_block-wrapper {
    margin: 25px auto 25px;
}
.text_block {
    padding: 3px 9px 3px 0;
    font-size: 12px;
    height: 170px;
    overflow: hidden;
}
.text_block-overlay {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffffff');
    background: -webkit-linear-gradient(rgba(255,255,255,0),#fff);
    background: -o-linear-gradient(rgba(255,255,255,0),#fff);
    background: linear-gradient(rgba(255,255,255,0),#fff);
    height: 145px;
    margin: -145px 9px 5px 0;
    position: relative;
    z-index: 10;
}

Думаю, можно сделать изящнее код, но у меня работает и так.

 

В итоге, мы получаем описание магазина, как на главной странице wildberries c эффектом градиента и скрытия текста. Полезно для SEO и удобно для пользователя.

 

 

попробовал по вашему примеру но что-то не получается, не открывается текст далее, поможете?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От MgazProffi
      Скачать/Купить дополнение


      Скрытие текста под Hide аналог [spoiler]
      Автор скрипта readmore.js JED FOSTER (http://jedfoster.com/)
      Если у Вас шаблон лежит не в папку catalog/view/theme/default/, то в файле vqmod/xml/readmorejs.xml заменить default в пути к файлам на название папки с Вашим шаблоном

      Как работает?


      В catalog/view/theme/default/template/common/header.tpl
      после
      <script type="text/javascript" src="catalog/view/javascript/common.js"></script>
      добавляются 2 строчки
      <script src="catalog/view/javascript/jquery/readmorejs/readmore.min.js"></script><link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/readmorejs/readmorejs.css"></script>
      В файле catalog/view/theme/default/template/common/footer.tpl перед <div id="powered"> добавляется
      $('.readmore').readmore({ speed: 700, maxHeight: 500, moreLink: '<a href="#"><span class="text">Развернуть</span></a>', lessLink: '<a href="#"><span class="text">Свернуть</span></a>'});
      Внимание: файл footer.tpl должен быть в кодировке UTF-8 ез BOOM

      Как использовать?


      Внимание: требует vqmod не ниже 2.4.0
      I. Подключение
      Закачать все файлы из папки upload в корень Вашего сайта
      II. В режиме исходного кода в Вашем редакторе при редактировании материала:
      То, что хотим сократить заключаем между
      <div class="readmore">
      и
      </div>
      Пример:
      <div class="readmore"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus diam non velit tristique tristique. Aenean id bibendum ante. Praesent sit amet porta elit. In eget venenatis turpis. Quisque feugiat mauris vel ornare sodales. Nam pellentesque sagittis dui a blandit. Proin ac convallis erat. Vestibulum rutrum id velit vel pellentesque.
      Pellentesque mollis, nisi sit amet faucibus pulvinar, orci orci venenatis eros, at convallis lacus nunc id lectus. Quisque luctus sapien nec dolor rutrum tincidunt. Aliquam erat volutpat. Morbi cursus rhoncus elit eu blandit. Curabitur tempus non mi et placerat. Donec eu congue arcu. Vivamus eros odio, aliquam eget auctor vel, viverra et mauris. Maecenas at est nisl. Suspendisse potenti. Suspendisse vestibulum nulla quis metus molestie varius. Suspendisse mollis non tellus a molestie. Nulla facilisi.
      Morbi tempor adipiscing nibh, in aliquet dui tempus nec. Nulla facilisi. Sed cursus aliquet ligula, ut faucibus enim tincidunt quis. Nam tempor eget magna vel sodales. Vestibulum quis vulputate elit. In vitae purus vulputate, faucibus diam nec, eleifend magna. Nulla iaculis fringilla quam ac vehicula. Fusce nec tristique nunc. Curabitur vitae elit non libero tincidunt tempus. Praesent a nisi pretium, luctus tortor at, consectetur nisl. Nullam vel mollis diam. Vivamus placerat sed nisi ac dapibus.
      Nam eget sagittis orci. Mauris lobortis porta justo sit amet sagittis. In eleifend convallis risus interdum dictum. Phasellus faucibus tortor massa, et eleifend erat sagittis sagittis. Sed convallis nulla sit amet ornare lobortis. Ut tempor, erat ut facilisis porttitor, tellus purus vestibulum nibh, non vehicula dolor velit at lorem. Quisque vitae libero volutpat, pretium augue eget, fermentum purus. Morbi ultricies nibh neque, vitae porttitor elit faucibus ut. Integer sit amet lorem et purus luctus dictum. Mauris turpis ipsum, facilisis ac adipiscing eget, ultrices quis sapien. Suspendisse eget magna a arcu ultricies ullamcorper. Quisque semper ac lorem at scelerisque. Suspendisse cursus ante vitae velit lacinia dictum. In faucibus dui eu elit lacinia rhoncus.
      Etiam augue neque, euismod sed arcu et, dignissim consequat ligula. In ut ipsum vitae lectus venenatis fermentum. Cras sit amet orci lacinia, gravida dui viverra, imperdiet elit. Vestibulum feugiat urna id nisl suscipit blandit. Donec nec sem nec magna porta aliquet. Suspendisse in mattis diam, quis laoreet erat. Etiam ac orci id orci elementum vehicula. Nulla faucibus a libero sit amet placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus, velit a tempus pulvinar, velit nulla gravida justo, non congue tellus magna non sem.
      </div>
      III.
      Кастомизация:
      speed - на сколько замедлять открытие скрытого текста
      maxHeight - сколько в пикселях должна быть высота текста перед тем, как остальную часть скрывать
      moreLink - менять можно <span class="text">Развернуть</span> на свой текст и класс
      essLink: 'менять можно <span class="text">Свернуть</span> на свой текст и класс
      Все изменения производить в
      catalog/view/javascript/jquery/readmorejs/readmorejs.css
      и
      vqmod/xml/readmorejs.xml
      По сути это даже не модуль, а просто готовое решение интеграции readmore.js и opencart
      Добавил MgazProffi Добавлено 30.05.2014 Категория Прочее  
    • От MgazProffi
      Автор скрипта readmore.js JED FOSTER (http://jedfoster.com/)
      Если у Вас шаблон лежит не в папку catalog/view/theme/default/, то в файле vqmod/xml/readmorejs.xml заменить default в пути к файлам на название папки с Вашим шаблоном

      Как работает?


      В catalog/view/theme/default/template/common/header.tpl
      после
      <script type="text/javascript" src="catalog/view/javascript/common.js"></script>
      добавляются 2 строчки
      <script src="catalog/view/javascript/jquery/readmorejs/readmore.min.js"></script><link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/readmorejs/readmorejs.css"></script>
      В файле catalog/view/theme/default/template/common/footer.tpl перед <div id="powered"> добавляется
      $('.readmore').readmore({ speed: 700, maxHeight: 500, moreLink: '<a href="#"><span class="text">Развернуть</span></a>', lessLink: '<a href="#"><span class="text">Свернуть</span></a>'});
      Внимание: файл footer.tpl должен быть в кодировке UTF-8 ез BOOM

      Как использовать?


      Внимание: требует vqmod не ниже 2.4.0
      I. Подключение
      Закачать все файлы из папки upload в корень Вашего сайта
      II. В режиме исходного кода в Вашем редакторе при редактировании материала:
      То, что хотим сократить заключаем между
      <div class="readmore">
      и
      </div>
      Пример:
      <div class="readmore"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus diam non velit tristique tristique. Aenean id bibendum ante. Praesent sit amet porta elit. In eget venenatis turpis. Quisque feugiat mauris vel ornare sodales. Nam pellentesque sagittis dui a blandit. Proin ac convallis erat. Vestibulum rutrum id velit vel pellentesque.
      Pellentesque mollis, nisi sit amet faucibus pulvinar, orci orci venenatis eros, at convallis lacus nunc id lectus. Quisque luctus sapien nec dolor rutrum tincidunt. Aliquam erat volutpat. Morbi cursus rhoncus elit eu blandit. Curabitur tempus non mi et placerat. Donec eu congue arcu. Vivamus eros odio, aliquam eget auctor vel, viverra et mauris. Maecenas at est nisl. Suspendisse potenti. Suspendisse vestibulum nulla quis metus molestie varius. Suspendisse mollis non tellus a molestie. Nulla facilisi.
      Morbi tempor adipiscing nibh, in aliquet dui tempus nec. Nulla facilisi. Sed cursus aliquet ligula, ut faucibus enim tincidunt quis. Nam tempor eget magna vel sodales. Vestibulum quis vulputate elit. In vitae purus vulputate, faucibus diam nec, eleifend magna. Nulla iaculis fringilla quam ac vehicula. Fusce nec tristique nunc. Curabitur vitae elit non libero tincidunt tempus. Praesent a nisi pretium, luctus tortor at, consectetur nisl. Nullam vel mollis diam. Vivamus placerat sed nisi ac dapibus.
      Nam eget sagittis orci. Mauris lobortis porta justo sit amet sagittis. In eleifend convallis risus interdum dictum. Phasellus faucibus tortor massa, et eleifend erat sagittis sagittis. Sed convallis nulla sit amet ornare lobortis. Ut tempor, erat ut facilisis porttitor, tellus purus vestibulum nibh, non vehicula dolor velit at lorem. Quisque vitae libero volutpat, pretium augue eget, fermentum purus. Morbi ultricies nibh neque, vitae porttitor elit faucibus ut. Integer sit amet lorem et purus luctus dictum. Mauris turpis ipsum, facilisis ac adipiscing eget, ultrices quis sapien. Suspendisse eget magna a arcu ultricies ullamcorper. Quisque semper ac lorem at scelerisque. Suspendisse cursus ante vitae velit lacinia dictum. In faucibus dui eu elit lacinia rhoncus.
      Etiam augue neque, euismod sed arcu et, dignissim consequat ligula. In ut ipsum vitae lectus venenatis fermentum. Cras sit amet orci lacinia, gravida dui viverra, imperdiet elit. Vestibulum feugiat urna id nisl suscipit blandit. Donec nec sem nec magna porta aliquet. Suspendisse in mattis diam, quis laoreet erat. Etiam ac orci id orci elementum vehicula. Nulla faucibus a libero sit amet placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus, velit a tempus pulvinar, velit nulla gravida justo, non congue tellus magna non sem.
      </div>
      III.
      Кастомизация:
      speed - на сколько замедлять открытие скрытого текста
      maxHeight - сколько в пикселях должна быть высота текста перед тем, как остальную часть скрывать
      moreLink - менять можно <span class="text">Развернуть</span> на свой текст и класс
      essLink: 'менять можно <span class="text">Свернуть</span> на свой текст и класс
      Все изменения производить в
      catalog/view/javascript/jquery/readmorejs/readmorejs.css
      и
      vqmod/xml/readmorejs.xml
      По сути это даже не модуль, а просто готовое решение интеграции readmore.js и opencart
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.