Вывод чанка MODX в зависимости от ширины монитора
Необходимо разработать сниппет, который будет выводить чанк в зависимости от ширины экрана.
Например, есть сложный дизайнерский блок, пример http://prntscr.com/ketr19 или http://prntscr.com/ketspn, таких примеров сотни... (выводится через отдельный чанк). Очень часто, неудобно перестраивать такие блоки стилями при адаптации (очень затратно по времени, чтобы довести до адекватного вида http://prntscr.com/ketrqd). Или например нужно вывести блок с совершенно другой html структурой для определенных экранов (например экранов ниже 960 и т д). Или хедер для интернет магазина нужно вывести с другой структурой (где будет другой порядок колонок, не такой как для ПК). На практике, ситуаций очень много, где было бы идеально выводить чанк с отдельной упрощенной структурой, а не играться со стилями и переставлять колонки местами через скрипты...
PS Через CSS (@media screen) просьба не предлагать в стиле напишите для блока display: none; - этот вариант категорически не подходит, так как нужно не просто скрыть содержимое через стиль, а полностью убрать из исходного кода + очень пагубно для продвигаемого сайта скрыть содержимое через display: none, даже сказал бы убийственно и недопустимо (скрывать разные тексты и содержимое и дублировать его другим блоком, который будет отображать это содержимое для меньших экранов). Так же не предлагать Бутстрап и различные скрипты для определения устройства (это все не то)
Нужно определение именно ширины (по такой логике как сейчас с CSS @media screen, точно определяет). Пример компонент MobileDetect для MODX (только он определяет устройство а не ширину экрана), нравится как тут условие задается http://prntscr.com/ketu3t (в таком плане хотелось бы через фильтр Fenom)
-
Я так полагаю можно через ajax запросы, сделать вывод нужного блока.
-
Здравствуйте. Вам виднее
-
Через аякс не получиться, так как контент не будет проиндексирован поисковиком... Я думаю что нужно дорабатывать мобайлДетект таким образом чтоб возвращалось true на запрос вида
{if '320' | mobiledetect}вот такая ситуация, вариант, вас устроит?
-
Я в этом не силен) мне главное чтобы работало и индексировалось поисковиком)
-
так а почему не установите просто мобайлДетект, или проверка должна быть строго по ширине в пикселях? дело в том что эта библиотека проверяет браузер по загаловкам которы тот, браузер, отправляет во время запроса страницы вот и все... тоесть есть 3 варианта моб, планш и комп, а вам я так понял нужны варианты строго в пикселях или в диапазонах размеров ширины..
-
Да, строго в пикселях. Например, у планшета может быть расширение очень разное, например у одного будет 1280+ у другого 1024, зачем мне показывать к примеру узкую версию с 1024 для 1280+, если для 1280+ я могу показать красивую ПК версию... как то так)
-
хорошо, если к примеру моб. и меняется ориентация в пространстве? то как тогда?
и припишите запланированные размеры? или какими предполагаете пользоваться.. + вы установили себе плагин на сайт? он работает в ключе моб. + планш. + комп ?
-
Мне главное один раз перестроить чанки. Тоесть вывести нужный чанк с новой html структурой на определенном расширении экрана (например на 1200, 960 или 800, на каком то одном) а дальше стилями через CSS @media screen, а чанк для ПК версии скрыть (чтобы его вообще в исходном коде небыло). Не совсем понял - (+ вы установили себе плагин на сайт? он работает в ключе моб. + планш. + комп ? )
-
Это про mobile detect.
Он считывает заголовок который отсылает браузер, и определяет тип браузера. Браузер для пк или для планшета или для смартфона
-
"Мне главное один раз перестроить чанки. Тоесть вывести нужный чанк с новой html структурой на определенном расширении экрана (например на 1200, 960 или 800, на каком то одном) а дальше стилями через CSS.., а чанк для ПК версии скрыть (чтобы его вообще в исходном коде небыло). "
- как раз это и делает скирпт мобайлДетект который вы можете прямо использовать по назначению
{if 'standard' | mobiledetect}[[$chnk_desc]] {/if} {if 'tablet' | mobiledetect}[[$chnk_tablet]]{/if} {if 'mobile' | mobiledetect}[[$chnk_mob]]{/if} -
Нет, это не то. Как я и писал ранее, к примеру хоху перестроить чанк для экрана 1024 и ниже, а если задам tablet то он мне может показать этот контент и для экранов меньше 1024 и для экранов больше 1024... а нужно к примеру только 1024 =<
-
Php не может определять ширину экрана.
Мобайл детект считывает заголовок который передает браузер.
Ширину неопределить
-
А кто вам мешает переписать скрипт, дописать к заголовкам размер в пикселях + вернуть не булев тип а массив с юзер агентом и шириной этого девайса?
-
Это каким образом вы заставите браузеры передавать ширину экрана?
-
не заставлять браузер передавать ширину, не получиться, а дописать ширину самому в зависимости от юзер агента в класс детектера
-
Вы сомжете сделать таким способом как описываете?
-
Я как раз думаю над этим, и возможностью реализации, дописать размеры можно к детектору, а вот какие именно, нужно проверять устройства на передаваемый заголовок юзер агента и реальную ширину экрана, тоесть если размер экрана идет для планшета, то дальше нужно раскинуть 1024 это или 960 или 800. я правильно вас понимаю?
-
Ширина экрана в заголовке котлрый отправляет браузера нет. И не будет.
Ширину может получить толь js который выполняется при открытии страницы
-
Например. Зашел человек с ipad 1 в альбоме (это 1024) а мы прописали условие что
{if '1204' | mobiledetect}[[$chnk_1024]] {/if}и ему вывелся чанк с содержимым для 1024, больше он переопределяться не будет, тоесть дальше уже не будет условий для этого чанка для экрана 960 и 800. Один раз только будет глобальная перестройка чанка
-
прописали условие для 1024 и значит что этот чан будет показываться на экранах 1024 и ниже (до самого минимального).
-
Или например зашел человек с планшета в портрете (768) и мы к примеру прописали условие для экранов 768 и ниже, но если он сменил ориентацию в таком случае в альбомную (1024), то уже ему выводится стандартный чанк для ПК
-
Самое простое перестраивать как надо при помощи css. На ваших скринах не видно что там какойто сложный вид
-
Есть в разы сложнее, особенно шапки... css то никак колонок местами не поменяет при необходимости...
-
Ну а то что вы хотите, это невозможно.
Только разные чанки для пк планшета и смартфона. Не учитывая ширину.
Либо при загрузки страницы отправлять ajax запрос в спец файл, который в сесию или куки запишет ширину экрана.
И проверять при выводе чанка какая ширина записана и выводить то что нужно
-
Mobail detect определить тип, а дальше уже медиа запросами. Я думаю это оптимальный вариант.
-
Актуальні фриланс-проєкти в категорії Веб-програмування
Розробник ігор Pixi.Js
15 701 UAH
Шукаємо розробника Pixi.js для створення серії з 12 міні-ігор. Проекти прості у реалізації, і при впевненій роботі розробка однієї гри займає не більше тижня. Необхідно реалізувати фронтенд та ігрову математику, без розробки бекенду. Ігри будуть схожі за структурою, але з… Javascript та Typescript, Веб-програмування ∙ 52 хвилини тому ∙ 16 ставок |
Ведучий програмний інженер / Старший бекенд-інженер (Laravel / AWS / Автоматизація)Ми шукаємо досвідченого ведучого програмного інженера / старшого бекенд-інженера, щоб приєднатися до нашої команди для проекту в сфері охорони здоров'я. Проект зосереджений на покращенні існуючої платформи шляхом створення автоматизації бізнес-процесів, розробки нової… PHP, Веб-програмування ∙ 1 година 19 хвилин тому ∙ 13 ставок |
Покращення СR конверсії сайту
6500 UAH
Покращення СR конверсії сайту. Задачи по ТЗ https://docs.google.com/document/d/1Y7zipbe2IEnFpthYuheAr6QA_50aR2Fz8V14rp5NpNo/edit?usp=sharingКнопка BOOK NOWфото / відеокороткий текстІ ОДРАЗУ форма бронюванняфіксованою (sticky)повторюватися кожні 1–2 блокиоднакового кольору… HTML та CSS верстання, Веб-програмування ∙ 3 години 7 хвилин тому ∙ 25 ставок |
Проблеми з відображенням текстур 3D файлів на Sketchfab
700 UAH
Підкажіть чому в мене не відображаються текстури 3D файлів та при завантаженні їх на Sketchfab в мене білі стіни? Таке відбувається у будь-якому файлі blend,fbx,glb, я працюю у Blender, версії 5.0. Я вже натискала на Pack resources або Make of paths absolute/relative, але все… 3D моделювання та візуалізація, Веб-програмування ∙ 14 годин 13 хвилин тому ∙ 5 ставок |
Онлайн урок"Шукаю технічного спеціаліста / програміста для налаштування короткого онлайн-уроку для сфери косметології в США (штат Іллінойс). Потрібно завантажити текст/відео на готову платформу (Teachable або аналог / або простий WordPress) та налаштувати захист: блокування переходу до… Веб-програмування ∙ 17 годин 24 хвилини тому ∙ 23 ставки |
Київ