Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

2

Можно Организовать?

Автор Yurren, 09 окт. 2013 12:59

Авторизуйтесь для ответа в теме

Сообщений в теме: 9

#1 Yurren

Активный участник

Пользователи
1 415 сообщений

ГородСамара

Отправлено 09 Октябрь 2013 - 12:59

Можно организовать (?) как сделано здесь: http://www.wildberri...og/1/women.aspx перед подвалом. Длинная простыня текста описания плавно обрывается и кнопка дли продолжения "читать далее"....

Наверх

#2 sengun

Активный участник

Модератоpы
1 139 сообщений

ГородНижний Новгород

Отправлено 09 Октябрь 2013 - 14:59

Yurren (09 Октябрь 2013 - 12:59) писал:

Можно организовать (?) как сделано здесь: http://www.wildberri...og/1/women.aspx перед подвалом. Длинная простыня текста описания плавно обрывается и кнопка дли продолжения "читать далее"....

Здравствуйте. В шаблоне HTML должен быть размещен такой код

<div id="grad_text">
  <p>ТЕКСТ</p>
</div>
<div id="grad_bg"></div>
<div id="grad_but">Читать далее...</div>

В шаблоне стилей (main.css) нужно вставить такой код

#grad_text {  height: 150px; overflow: hidden;  }
#grad_bg {
  position: relative;
  height: 100px;
  margin-top: -100px;
  background: -moz-linear-gradient(rgba(255,255,255,0), #fff);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(#FFF));
  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);
  z-index: 2;
}
#grad_but { cursor: pointer;  }

И в конец main.js такой

$(document).ready(function(){
  $('#grad_but').click(function(){
	if ($(this).text() == "Свернуть")  {
	  $(this).text("Читать далее...");
	  $('#grad_bg').css('display','block');
	  $('#grad_text').css('height', '150px');
	}
	else  {
	  $(this).text("Свернуть");
	  $('#grad_bg').css('display','none');
	  $('#grad_text').css('height', 'auto');
	}
  });
});

Везде, где встречается "150px" - это высота текста в свернутом состоянии, "100px" - высота прозрачного фона, который располагается поверх текста и создает эффект постепенной смены прозрачности текста.

Наверх

#3 velena168

Активный участник

Пользователи
1 643 сообщений

ГородСанкт- Петербург

Отправлено 09 Октябрь 2013 - 16:13

Интересно! А, если не на главной странице, а на какой-то определенной?

Наверх

#4 Yurren

Активный участник

Пользователи
1 415 сообщений

ГородСамара

Отправлено 09 Октябрь 2013 - 17:13

velena168 (09 Октябрь 2013 - 16:13) писал:

Интересно! А, если не на главной странице, а на какой-то определенной?

Полностью присоединяюсь к уточнению! Нужно именно на странице категории... сео-простыни убрать

Наверх

#5 Koderhan

Активный участник

Модератоpы
6 227 сообщений

Отправлено 09 Октябрь 2013 - 17:21

velena168 (09 Октябрь 2013 - 16:13) писал:

Интересно! А, если не на главной странице, а на какой-то определенной?

Если вы хотите разместить подобное поведение на любой другой странице то достаточно не много изменить код.
Например если нужно разместить в описание категории.
В разделе Товары -> Товары открыть категорию для редактирования. Перейти в режим редактирования исходного кода.
Добавить следующий html код с стилями и скриптами:

Скрытый текст

<div id="grad_text">
<p>Тут текст который отображается сразу</p>
</div>
<div id="grad_bg"></div>
<div id="grad_but">Читать далее...</div>

<style>
#grad_text {
height: 150px;/* высота блока с текстом*/
overflow: hidden; }
#grad_bg {
position: relative;
height: 100px;
margin-top: -100px;
background: -moz-linear-gradient(rgba(255,255,255,0), #fff);
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(#FFF));
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);
z-index: 2;
}
#grad_but { cursor: pointer; }
</style>
<script>
$(document).ready(function(){
$('#grad_but').click(function(){
if ($(this).text() == "Свернуть") {
$(this).text("Читать далее...");
$('#grad_bg').css('display','block');
$('#grad_text').css('height', '150px');
}
else {
$(this).text("Свернуть");
$('#grad_bg').css('display','none');
$('#grad_text').css('height', 'auto');
}
});
});
</script>

Наверх

#6 Yurren

Активный участник

Пользователи
1 415 сообщений

ГородСамара

Отправлено 09 Октябрь 2013 - 17:38

Koderhan (09 Октябрь 2013 - 17:21) писал:

Если вы хотите разместить подобное поведение на любой другой странице то достаточно не много изменить код.
Например если нужно разместить в описание категории.
В разделе Товары -> Товары открыть категорию для редактирования. Перейти в режим редактирования исходного кода.
Добавить следующий html код с стилями и скриптами:

Скрытый текст

<div id="grad_text">
<p>Тут текст который отображается сразу</p>
</div>
<div id="grad_bg"></div>
<div id="grad_but">Читать далее...</div>

<style>
#grad_text {
height: 150px;/* высота блока с текстом*/
overflow: hidden; }
#grad_bg {
position: relative;
height: 100px;
margin-top: -100px;
background: -moz-linear-gradient(rgba(255,255,255,0), #fff);
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(#FFF));
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);
z-index: 2;
}
#grad_but { cursor: pointer; }
</style>
<script>
$(document).ready(function(){
$('#grad_but').click(function(){
if ($(this).text() == "Свернуть") {
$(this).text("Читать далее...");
$('#grad_bg').css('display','block');
$('#grad_text').css('height', '150px');
}
else {
$(this).text("Свернуть");
$('#grad_bg').css('display','none');
$('#grad_text').css('height', 'auto');
}
});
});
</script>

Понимаю что или сильно туплю или что то конкретно не понимаю.... В коде товары выводятся в конечном счете категории, для которых описания уникальны и описаны в настройках каждой из них. Поэтому как там прописать текст,

<div id="grad_text">
<p>Тут текст который отображается сразу</p>
</div>
<div id="grad_bg"></div>
<div id="grad_but">Читать далее...</div>

если он для каждой категории уникален???

Наверх

#7 velena168

Активный участник

Пользователи
1 643 сообщений

ГородСанкт- Петербург

Отправлено 09 Октябрь 2013 - 18:05

Спасибо за тему. Все получилось. Пригодится в хозяйстве.

Прикрепленные изображения

Наверх

#8 Yurren

Активный участник

Пользователи
1 415 сообщений

ГородСамара

Отправлено 09 Октябрь 2013 - 20:26

velena168 (09 Октябрь 2013 - 18:05) писал:

Спасибо за тему. Все получилось. Пригодится в хозяйстве.

Спасибо! Получилось!
Подскажите попутно как стилизовать кнопки: вторую "свернуть" и третью после свернуть "читать далее..."
http://joxi.ru/MJFVUtg5CbC_QXivwdg
Как простилизовать первую я догадался )

страница с примером: http://kolgotki63.ru...atalog/Леггинсы

Наверх

#9 sengun

Активный участник

Модератоpы
1 139 сообщений

ГородНижний Новгород

Отправлено 09 Октябрь 2013 - 23:16

Yurren (09 Октябрь 2013 - 20:26) писал:

Спасибо! Получилось!
Подскажите попутно как стилизовать кнопки: вторую "свернуть" и третью после свернуть "читать далее..."
http://joxi.ru/MJFVUtg5CbC_QXivwdg
Как простилизовать первую я догадался )

страница с примером: http://kolgotki63.ru...atalog/Леггинсы

В вашем случае надо код

<div id="grad_but">
<p>Читать далее...</p>
</div>

изменить так

<div>
<p id="grad_but">Читать далее...</p>
</div>

Наверх

#10 Yurren

Активный участник

Пользователи
1 415 сообщений

ГородСамара

Отправлено 10 Октябрь 2013 - 06:38

sengun (09 Октябрь 2013 - 23:16) писал:

В вашем случае надо код

<div id="grad_but">
<p>Читать далее...</p>
</div>

изменить так

<div>
<p id="grad_but">Читать далее...</p>
</div>

Спасибо! Все получилось!

Наверх

Обратно в Другое

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

Можно Организовать?

Прикрепленные изображения

Количество пользователей, читающих эту тему: 0

Войти

Google поиск