Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Как растянуть контент на 100%?


Recommended Posts

При использовании левой колонки, основной контент по ширине занимает 75%, как в контенте который находится напротив категорий указать ширину 75% а остальному контенту указать 100%?

5a0d1beaf704.png

Надіслати
Поділитися на інших сайтах


При использовании левой колонки, основной контент по ширине занимает 75%, как в контенте который находится напротив категорий указать ширину 75% а остальному контенту указать 100%?

Убрать дубль категорий с лева
  • +1 1
Надіслати
Поділитися на інших сайтах


Убрать дубль категорий с лева

Дубль категорий нужен

 

@jnxjn вам ломать шаблон придётся. Там левый блок до низу

если я закрою левый блок, закрою контент. После них открою новый div (content2) дам ему col-sm-12  по идее ширина должна стать 100% и в него уже внесу нужные мне блоки. Я в верном направлении думаю?

Надіслати
Поділитися на інших сайтах


 

 

если я закрою левый блок, закрою контент. После них открою новый div (content2) дам ему col-sm-12  по идее ширина должна стать 100% и в него уже внесу нужные мне блоки. Я в верном направлении думаю?

Надо ковырять. Сейчас нет времени на это. Правый клик > показать код и играйтесь с блоками.

  • +1 1
Надіслати
Поділитися на інших сайтах


Дубль категорий нужен

Зачем если оно у вас есть вверху?

Воткните в левый блок фильтр

Надіслати
Поділитися на інших сайтах


Поставил пару закрывающихся дивов и всё у меня стало хорошо. Чуть позже напишу подробней, благодарю за моральную поддержку!

Змінено користувачем jnxjn
  • +1 1
Надіслати
Поділитися на інших сайтах


 

 

Какой фильтр?

@AWAROСкорее всего имел ввиду под блоком категорий воткнуть блок фильтров товаров, что бы визуально спрятать пустоту

  • +1 1
Надіслати
Поділитися на інших сайтах


Я вставил закрывающих дивов, закрыл левый блок и контент, вроде всё отображается на отлично, адаптивность не пострадала. Видимо это лучший вариант, есть подводные камни?

Змінено користувачем jnxjn
Надіслати
Поділитися на інших сайтах


Я вставил закрывающих дивов, закрыл левый блок и контент, вроде всё отображается на отлично, адаптивность не пострадала. Видимо это лучший вариант, есть подводные камни?

смотря как вы это сделали. В любом случае думаю да, есть

Надіслати
Поділитися на інших сайтах


Можно же сделать скриптик, который будет делать display:none; для #column-left при прокрутке страницы на определённую высоту, на подобии стены вконтакте. При этом контент будет растягиваться на всю ширину, и вёрстку ломать не надо.

Надіслати
Поділитися на інших сайтах

Вот, сделал скриптик
 

<script type="text/javascript"><!--
$(function() {
	var fixblock_height = $('#column-left').height();
	var fixblock_pos = $('#column-left').position().top; ;
	$(window).scroll(function(){

	   if ($(window).scrollTop() > fixblock_pos + fixblock_height){
			$('#column-left').css({'display': 'none'});
			$('.col-sm-9').css({'width': '100%'});
			$('.product-grid.col-lg-4').css({'width': '25%'});
			$('#content .product-grid.col-lg-4:nth-child(3n+1)').css({'clear': 'none'});
	   }else{
			$('#column-left').css({'display': 'block'});
			$('.col-sm-9').css({'width': '75%'});
			$('.product-grid.col-lg-4').css({'width': '33.33333%'});
			$('#content .product-grid.col-lg-4:nth-child(3n+1)').css({'clear': 'left'});
	   }
	})
});
//--></script>

 
 
Высчитывается высота левой колонки, и при прокрутке ниже её, ей присваивается стиль display:none;
И волки сыты меню останется, и овцы целы пустых полей не будет.
 
Скрипт вставить в конец файла /catalog/view/theme/*/template/product/category.tpl
Вот пример.

 

Да, надо немного починить переключение сетка/список  :-)

Змінено користувачем mazein
  • +1 3
Надіслати
Поділитися на інших сайтах

  • 2 weeks later...

Допилил скрипт. Только для левой колонки.

С переключателем список/сетка не конфликтует.

 
		<script type="text/javascript"><!--
			$(function() {
			if($(window).width()>767) {
				var fixblock_height = $('#column-left').height();
				var fixblock_pos = $('#column-left').position().top; ;
					$(window).scroll(function(){
						if ($(window).scrollTop() > fixblock_pos + fixblock_height){
							$('#column-left').css({'display': 'none'});
							$('#content').attr('class', 'col-sm-12');
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
						}else{
							$('#column-left').css({'display': 'block'});
							$('#content').attr('class', 'col-sm-9'); 
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-4 col-md-3 col-sm-6 col-xs-12');
						}
					})
			}
			});
		//--></script>
Змінено користувачем mazein
  • +1 2
Надіслати
Поділитися на інших сайтах

Подскажите пжл, если не трудно

у меня шаблон Coloring

На нем меняли верстку

код из такого

<?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-4 col-md-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-8 col-md-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
 
стал таким
<?php $class = 'col-sm-12'; ?>
    <?php if ($column_left && $column_right) { ?>
  <?php $class = 'col-sm-8 col-md-9 leftcol rightcol'; ?>
    <?php } elseif ($column_left) { ?>
  <?php $class = 'col-sm-8 col-md-9 leftcol'; ?>
    <?php } elseif ($column_right) { ?>
  <?php $class = 'col-sm-12 rightcol'; ?>
    <?php } ?>
 
какие цифры надо подставить в ваш код что бы у меня заработало без багов?
 
зы извините что влез в вашу тему
  • +1 1
Надіслати
Поділитися на інших сайтах


, скрипт в текущем виде разве не работает? 

у меня нет

верстку переделали

у меня добавлена правая колонка при разрешении больше 1420

st-sklad.ru

когда ставлю скрипт эта колонка уезжает ниже категорий и становится слева (там где колонка категорий, ниже)

 

и товаров в строке у меня 4

после установки скрипта становится 3

Змінено користувачем kors06
  • +1 1
Надіслати
Поділитися на інших сайтах


, возможно как-то так, могу ошибаться

		<script type="text/javascript"><!--
			$(function() {
			if($(window).width()>767) {
				var fixblock_height = $('#column-left').height();
				var fixblock_pos = $('#column-left').position().top; ;
					$(window).scroll(function(){
						if ($(window).scrollTop() > fixblock_pos + fixblock_height){
							$('#column-left').css({'display': 'none'});
							$('#column-right').css({'display': 'none'});
							$('#content').attr('class', 'col-sm-12');
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
						}else{
							$('#column-left').css({'display': 'block'});
							$('#column-right').css({'display': 'block'});
							$('#content').attr('class', 'col-sm-8 col-md-9 leftcol rightcol'); 
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-3 col-md-4 col-sm-6 col-xs-12');
						}
					})
			}
			});
		//--></script>
  • +1 2
Надіслати
Поділитися на інших сайтах

Очередное обновление. Ввиду кривой работы скрипта в мозилле и ie, пришлось немного дополнить обратное переключение.

		<script type="text/javascript"><!--
			$(function() {
			if($(window).width()>767) {
				var fixblock_height = $('#column-left').height();
				var grid_height = $('.product-grid').height();
				var fixblock_pos = $('#column-left').position().top; ;
					$(window).scroll(function(){
						if ($(window).scrollTop() > fixblock_pos + fixblock_height){
							$('#column-left').css({'display': 'none'});
							$('#content').attr('class', 'col-sm-12');
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
						}else if ($(window).scrollTop() < fixblock_pos + fixblock_height - grid_height){
							$('#column-left').css({'display': 'block'});
							$('#content').attr('class', 'col-sm-9'); 
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-4 col-md-3 col-sm-6 col-xs-12');
						}
					})
			}
			});
		//--></script>
  • +1 1
Надіслати
Поділитися на інших сайтах

 

Очередное обновление. Ввиду кривой работы скрипта в мозилле и ie, пришлось немного дополнить обратное переключение.

		<script type="text/javascript"><!--
			$(function() {
			if($(window).width()>767) {
				var fixblock_height = $('#column-left').height();
				var grid_height = $('.product-grid').height();
				var fixblock_pos = $('#column-left').position().top; ;
					$(window).scroll(function(){
						if ($(window).scrollTop() > fixblock_pos + fixblock_height){
							$('#column-left').css({'display': 'none'});
							$('#content').attr('class', 'col-sm-12');
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
						}else if ($(window).scrollTop() < fixblock_pos + fixblock_height - grid_height){
							$('#column-left').css({'display': 'block'});
							$('#content').attr('class', 'col-sm-9'); 
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-4 col-md-3 col-sm-6 col-xs-12');
						}
					})
			}
			});
		//--></script>

автор спасибо большое за скрипт

обнаружил баг

на 1920*1080 у меня 4 товара, при спуске вниз становится 5

и все отлично

НО

проверял на 1440*900

у меня в категории в строке 4 товара, при спуске также остается 4 но растягиваются по ширине

если ниже нажать кнопку "показать еще" то их становится не 4 как надо а 3 растянутых по всей ширине

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

 

посмотрите у меня если не поймете что я написал st-sklad.ru (разрешение надо до 1440)

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.