Узнать ширину экрана в самрти.

[koteyka]

Можно ли прямо в шаблоне узнать ширину рабочего окна, типа как в JS $(window).width();?

Смысл в чем, есть код

{category->subcategories|@count / 3}

Нужно, чтобы при большом окне делило не на 3, а на 4. Можно ли это сделать, не извращаясь с JS?

[simpla24]

Может Вам тут лучше поработать с версткой:

http://htmlbook.ru/css/max-width ?

[koteyka]

 

 

Может Вам тут лучше поработать с версткой:

http://htmlbook.ru/css/max-width ?

И зачем мне это???

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

Изменено 16 марта, 2015 пользователем koteyka

[Kosjak76]

display: inline-block; вполне может решить проблему

[koteyka]

display: inline-block; вполне может решить проблему

Не может. В корне каждой категории есть от 30 до 500 подкатегорий. Необходимо вывести список подкатегорий в три колонки. Ширину колонки менять нельзя, т.к. есть длинные наименования и они переносятся, увеличивая высоту колонки. Прописана функция, которая общее количество подкатегорий делит на три колонки и выводит. Адаптив сделан, колонки, при уменьшении экрана выстраиваются в одну. Но это для девайсов. Для большинства компов 3 колонки вполне приемлемо и аккуратно. Но на экранах шире 1680 получается незаполненность. Вот ее я и хотел заполнить 4-й колонкой, но только для экрана выше 1680

[Kosjak76]

Поможет, если все сделать правильно.

[koteyka]

Да там шаблон адаптивный, причем c JS адаптацией. Зацепи что-то одно, задолбаешься остальное править. Мне проще через JS тогда реализовать свой вопрос. Как я понял, решения, как я спросил нет?

[cernos]

Можно узнать. Сейчас писать некогда. Чуть позже опишу, хочешь напишу в личку, подскажу как.

Изменено 16 марта, 2015 пользователем cernos

[DaVinci]

php а следовательно и smarty не может определить размер экрана пользователя потому как работают на стороне сервера. Для этого существует javascript

[koteyka]

Можно узнать. Сейчас писать некогда. Чуть позже опишу, хочешь напишу в личку, подскажу как.

Да, конечно хочу

 

 

Изменено 16 марта, 2015 пользователем koteyka

[yr4ik]

koteyka, как вам уже писали выше -  правьте верстку. Данные проблемы должны решатся на уровне css или максимум js (если невозможно через css).

 

А так как хотите вы сделать - это костыль для костыля... Поскольку что бы передать нужные параметры на сервер - нужно писать js скрипт с дальнейшей передачей и сохранение данных в сессии. Либо же использовать огромные библиотеки или сторонние сервисы в которых хранятся данные об устройствах

[Ilya]

display:inline-block; vertical-align: тут по желанию; width:столько то пикселей.

А так поржал, да)

Не в обиду ТС)

[Kosjak76]

Вот, и я о том же

Есть еще media query, но это уже уровнем повыше, и для начала display:inline-block; вполне пойдет.

http://htmlbook.ru/css/display

http://habrahabr.ru/post/198292/

[koteyka]

Да еще раз говорю, весь адаптив сделан через JS, в зависимости от разрешения, которое считывает JS удаляются, добавляются, меняются классы. Там стилей только в одном файле 4800 строк, плюс еще три файла, правда в них немногим меньше строк. Все блоки подогнаны до пиксела. Изменение ширины любого блока хоть на пиксел ведет к сдвигу блоков всего сайта. Не я такую верстку делал и нахрена так делали, не знаю. Вот только небольшой кусок этого JS

			} else {
				$('#sel').removeClass('slct_m');
				$('#sel').addClass('slct');
				$('#sel2').removeClass('slct_m');
				$('#sel2').addClass('slct');
				$('#my_colum1').removeClass('my_col_m');
				$('#my_colum1').addClass('my_col');		
				$('#my_colum2').removeClass('my_col_m');
				$('#my_colum2').addClass('my_col');	
				$('#my_colum3').removeClass('my_col_m');
				$('#my_colum3').addClass('my_col');	
				$('#my_colum4').removeClass('my_col_m');
				$('#my_colum4').addClass('my_col');
				document.getElementById("pokupki").style.display="inline";	
				document.getElementById("pokupki").style.fontSize="70%";
				
				if(winWidthd>=1600) {
					document.getElementById("pokupki").style.fontSize="150%";
				}					
				if(winWidthd>=1440) {
					document.getElementById("pokupki").style.fontSize="140%";
				}				
				if(winWidthd>=1366) {
					document.getElementById("pokupki").style.fontSize="130%";
				}
				if(winWidthd>=1280) {
					document.getElementById("pokupki").style.fontSize="100%";
				}				
				if(winWidthd>=1024) {
					document.getElementById("pokupki").style.fontSize="90%";
				}			
		
			}

Если я сделаю изменение этих блоков через CSS, то это повлечет сдвиг всех блоков. Там даже шрифт безболезнено сменить нельзя.

Данные проблемы должны решатся на уровне css или максимум js (если невозможно через css).

Через скрипт и буду делать, думал есть вариант обойти JS, вот и спросил.

Всем спасибо.

Изменено 16 марта, 2015 пользователем koteyka

[cernos]

Да, конечно хочу

Напиши мне в скайп, я объясню принцип работы.

Но в любом случае - это будет велосипедом, проще уже JS-ом (JQuery) правки делать.

Если верстка убогая - предложите клиенту сделать верстку заново и правильно, как оно того требует.

Изменено 16 марта, 2015 пользователем cernos

[Kors]

Судя по приведенному коду, у Вас в JS уже есть готовые данные по ширине окна

if(winWidthd>=1600) 

Вы можете в шаблоне сразу вывести ДВА (невидимых) блока, один для 

{category->subcategories|@count / 3}

другой для

{category->subcategories|@count / 4}

А в JS сделать видимым только один из блоков.

[koteyka]

Вы можете в шаблоне сразу вывести ДВА (невидимых) блока, один для................

Да. Спасибо. Я так и сделал. Не хотелось в JS лезть, а пришлось

[Ilya]

ТС, мои извинения)

 

Нет, ну, адаптив через js это аццкий адъ, конечно)

 

Я бы отказался с такой версткой работать или переделал бы её полностью)

Судя по всему там пытались реализовать принцип mobile first, но как то уж очень через заднее место.

[Al_Ary]

ТС, почитай вот эту статью, я на её основе сделал вёрстку. На старых мониках товар в 2 колонки, на буках и относительно не старых в 3, а на Full HD в 4. Получается что на всех мониторах сайт одинаково заполнен и нет пустующего пространства.

Изменено 17 марта, 2015 пользователем Al_Ary

[koteyka]

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

Изменено 17 марта, 2015 пользователем koteyka

[Al_Ary]

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

Таким образом сверстан исключительно блок такблицы с товарами, остальной сайт верстай как хочешь.