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

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

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

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

5a0d1beaf704.png

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


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

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

  • +1 1

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


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

При использовании левой колонки, основной контент по ширине занимает 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

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


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

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

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

 
		<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

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


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

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

  • +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 пользователей онлайн

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

×

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

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