Jump to content

Recommended Posts

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

 

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

 

ce1957544dbc.png

 

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

 

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

  • +1 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

<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 2

Share this post


Link to post
Share on other sites
В 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 и удобно для пользователя.

 

 

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

Share this post


Link to post
Share on other sites
В 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 и удобно для пользователя.

Отлично всё работает
Спасибо

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By 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 Категория Прочее  
    • By 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
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.